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

 import {
     Button,
     Icon,
 } from 'sveltestrap';

 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/usuals/new"
        color="outline-primary"
        size="sm"
        class="float-end {($page.params.kind === 'usuals' && $page.url.pathname.endsWith('/new'))?'active':''}"
    >
        <Icon name="plus-lg" />
    </Button>
</div>
<div class="list-group" class:list-group-flush={flush}>
    <a
        href="alarms/usuals/1"
        class="list-group-item list-group-item-action"
        class:active={$page.params.kind === "usuals" && $page.params.aid === "1"}
    >
        Les lundis à 6h50
    </a>
    <a
        href="alarms/usuals/2"
        class="list-group-item list-group-item-action"
        class:active={$page.params.kind === "usuals" && $page.params.aid === "2"}
    >
        Les mardis à 6h50
    </a>
</div>
