<script>
 import {
     Badge,
     Button,
     Card,
     CardBody,
     CardHeader,
     Col,
     Container,
     ListGroup,
     ListGroupItem,
     Row,
     Icon,
 } from 'sveltestrap';

 import { actions_idx } from '$lib/stores/actions';

 export let routine = {
     name: "Classique",
     steps: [],
 };
</script>

<Card>
    <CardHeader>
        <Button
            color="outline-danger"
            size="sm"
            class="float-end ms-1"
        >
            <Icon name="trash" />
        </Button>
        <Button
            color="outline-info"
            size="sm"
            class="float-end ms-1"
        >
            <Icon name="pencil" />
        </Button>
        {routine.name}
    </CardHeader>
    {#if routine.steps}
        <ListGroup>
            {#each routine.steps as step}
                <ListGroupItem action>
                    {#if $actions_idx && $actions_idx[step.action]}
                        {$actions_idx[step.action].name}
                    {:else}
                        {step.action}
                    {/if}
                    <Badge class="float-end">
                        {step.delay/60} min
                    </Badge>
                </ListGroupItem>
            {/each}
        </ListGroup>
    {:else}
        <CardBody>
            Aucune action définie.
        </CardBody>
    {/if}
</Card>
