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

 import { routines } from '../../stores/routines';

 import CardRoutine from '../../components/CardRoutine.svelte';
 import ActionList from '../../components/ActionList.svelte';
</script>

<Container fluid class="flex-fill d-flex flex-column py-2">
    <Row>
        <Col md="8">
        <Row cols={{xs: 1, lg: 2, xl: 3}}>
            <Col class="mb-4">
            {#if $routines.list}
                {#each $routines.list as routine (routine.id)}
                    <CardRoutine {routine} />
                {/each}
            {:else}
                {#await routines.refresh()}
                    <div class="d-flex justify-content-center align-items-center gap-2">
                        <Spinner color="primary" /> Chargement en cours&hellip;
                    </div>
                {:then}
                    test
                {/await}
            {/if}
            </Col>
            <Col class="mb-4">
            <Card
                class="h-100 d-flex justify-content-center align-items-center fst-italic"
                style="cursor: pointer; border-style: dashed; min-height: 5em;"
            >
                Ajouter une routine &hellip;
            </Card>
            </Col>
        </Row>
        </Col>
        <Col md="4">
        <ActionList class="mb-5" />
        </Col>
    </Row>
</Container>
