<script>
 import { page } from '$app/stores';

 import {
     Button,
     Icon,
     Spinner,
 } from '@sveltestrap/sveltestrap';

 import { weekdayStr } from '$lib/alarmrepeated';
 import { alarmsRepeated } from '$lib/stores/alarmrepeated';

 export let flush = false;
</script>

<div class="d-flex justify-content-between align-items-center" class:mx-2={flush}>
    <h2>
        Réveils habituels
    </h2>
    <Button
        href="alarms/repeated/new"
        color="outline-primary"
        size="sm"
        class="float-end {($page.params.kind === 'repeated' && $page.url.pathname.endsWith('/new'))?'active':''}"
    >
        <Icon name="plus-lg" />
    </Button>
</div>
<div class="text-center">
    {#if $alarmsRepeated.list !== null}
        {#if $alarmsRepeated.list.length}
            <div class="list-group" class:list-group-flush={flush}>
                {#each $alarmsRepeated.list as alarm (alarm.id)}
                    <a
                        href="alarms/repeated/{alarm.id}"
                        class="list-group-item list-group-item-action"
                        class:active={$page.params.kind === "repeated" && $page.params.aid === alarm.id}
                        class:text-muted={alarm.disabled}
                        style:text-decoration={alarm.disabled?"line-through":null}
                    >
                        Les {weekdayStr(alarm.weekday)}s à {alarm.time}
                    </a>
                {/each}
            </div>
        {:else}
            <p class="fst-italic">Pas de réveil habituel programmé</p>
        {/if}
    {:else}
        {#await alarmsRepeated.refresh()}
            <div class="d-flex justify-content-center align-items-center gap-2">
                <Spinner color="primary" /> Chargement en cours&hellip;
            </div>
        {/await}
    {/if}
</div>
