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

<div class="DayContainer">
    <div
        class="DayLabelContainer"
        style={`--opCount: ${dayData.operators.size + 1}`}
    >
        <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="operatorLabel">
            {#if linkTemplate != null}
                <Link to={linkTemplate(name)}>{name}</Link>
            {:else}
                {name}
            {/if}
        </div>
        <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) minmax(5rem,1fr) 24fr
        border: 1px solid #999999
        font-size: .1vv
        .DayLabelContainer
            display: inline-grid
            .DayLabel
                align-self: center
            grid-row: 1 / var(--opCount)
            border: 1px solid #999999
        .operatorLabel
            border: 1px solid #999999
            grid-column: 2
        .operatorData
            border: 1px solid #999999
            grid-column: 3
            display: inline-grid
            position: relative
</style>