<script lang="ts">
    import { gym } from "./store";
    import {dm, back } from "./common";
    const remaining = $gym.length;
    const days = ["sön", "tis", "tor"];
    let done = $derived($gym.filter((c) => c.completed).length);
</script>

<header>
    <button class="clickable back" onclick={() => back()}>←</button>
    <h1>
        Styrketräning: {done} av {remaining}
    </h1>
</header>
<main>
    <progress hidden max={remaining} value={done}></progress>
    <div class="calendar">
        {#each $gym as col, i}
            <article class="clickable">
                <label>
                    <input type="checkbox" bind:checked={col.completed} />
                    <strong>{col.name}</strong>
                    <small>{days[i % 3]} {dm(col.planned_at)}</small>
                </label>
            </article>
        {/each}
    </div>
</main>

<style>
    main {
        background-color: #f62b5a;
        border-top: 4px solid rgba(0, 0, 0, 0.2)
    }

    article:nth-child(1) {
        grid-column: 3;
    }
</style>
