<script lang="ts">
    import BaseTimeGrid from "./baseTimeGrid.svelte";
    import type { Day } from "./models/models";
    import Timeperiod from "./timeperiod.svelte";
    export let dayData: Day;
    const options: Intl.DateTimeFormatOptions = {
        weekday: "short",
        year: "numeric",
        month: "numeric",
        day: "numeric",
    };
</script>

<div class="DayContainer">
    <div class="DayLabelContainer">
        <div class="DayLabel">
            {#if dayData.date}
                {dayData.date.toLocaleDateString(undefined, options)}
            {:else}
                {dayData.Name}
            {/if}
        </div>
    </div>
    {#each [...dayData.operators.entries()] as [name, periods]}
        <div class="operatorData">
            <BaseTimeGrid />
            {#each periods as period}
                <Timeperiod {period} />
            {/each}
        </div>
    {/each}
</div>

<style lang="sass">
    .DayContainer
        display: grid
        grid-template-columns: minmax(5rem,1.5fr) 24fr
        border: 1px solid #999999
        font-size: .1vv
        .DayLabelContainer
            display: inline-grid
            .DayLabel
                align-self: center
            grid-row: 1
            border: 1px solid #999999
        .operatorData
            border: 1px solid #999999
            grid-column: 2
            display: inline-grid
            position: relative
</style>