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

 export let routine = {
     title: "Classique",
     steps: [
         {
             id: 1,
             name: "Salutation & heure",
             start: 0,
         },
         {
             id: 2,
             name: "7 min workout",
             start: 60,
         },
         {
             id: 3,
             name: "RATP traffic",
             start: 540,
         },
     ],
 };
</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.title}
    </CardHeader>
    <ListGroup>
        {#each routine.steps as step (step.id)}
            <ListGroupItem action>{step.name}</ListGroupItem>
        {/each}
    </ListGroup>
</Card>
