<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>
        Exceptions
    </h2>
    <Button
        href="alarms/excepts/new"
        color="outline-primary"
        size="sm"
        class="float-end {($page.params.kind === 'excepts' && $page.url.pathname.endsWith('/new'))?'active':''}"
    >
        <Icon name="plus-lg" />
    </Button>
</div>
<div class="list-group" class:list-group-flush={flush}>
    <a
        href="alarms/excepts/1"
        class="list-group-item list-group-item-action"
        class:active={$page.params.kind === "excepts" && $page.params.aid === "1"}
    >
        <Icon name="x-octagon-fill" />
        Du <abbr title="test">samedi 14</abbr>
        au <abbr title="test">dimanche 26 février</abbr>
    </a>
</div>
