<script>
 import {
     Button,
     Col,
     Container,
     Row,
     Icon,
 } from 'sveltestrap';

 import { page } from '$app/stores';

 import AlarmSingleList from '../../../components/AlarmSingleList.svelte';
 import AlarmRepeatedList from '../../../components/AlarmRepeatedList.svelte';
 import AlarmExceptionList from '../../../components/AlarmExceptionList.svelte';

 function slugToComponent(slug) {
     switch(slug) {
         case "singles":
             return AlarmSingleList;
         case "repeateds":
             return AlarmRepeatedList;
         case "excepts":
             return AlarmExceptionList;
     }
 }
</script>

<div class="d-flex flex-fill flex-column">
    <div class="d-flex flex-row justify-content-between d-block d-md-none">
        <Button href="alarms" color="link" class="p-0">
            <Icon name="chevron-left" /> Réveils
        </Button>
    </div>
    <Container fluid class="flex-fill">
        <Row class="mh-100 h-100">
            <Col md={3} class="d-none d-md-block px-0 py-2" style="background: #e7e8e9">
            <svelte:component this={slugToComponent($page.params["kind"])} flush={true} />
            </Col>
            <Col md={9} class="d-flex py-2">
            <slot></slot>
            </Col>
        </Row>
    </Container>
</div>
