<script>
 import {
     Container,
     Icon,
 } from 'sveltestrap';
</script>

<Container class="mh-100 h-100 d-flex flex-column justify-content-center text-center">
    <figure>
        <blockquote class="blockquote text-muted">
            <p class="display-6">A well-known quote, contained in a blockquote element.</p>
        </blockquote>
        <figcaption class="blockquote-footer">
            Someone famous in <cite title="Source Title">Source Title</cite>
        </figcaption>
    </figure>
    <div class="display-5 mb-4">
        Prochain réveil&nbsp;: demain matin à 7h10 (dans 5 cycles)
    </div>
    <div class="d-flex gap-3 justify-content-center">
        <button class="btn btn-primary">
            <Icon name="node-plus" />
            Programmer un nouveau réveil
        </button>
        <button class="btn btn-info">
            <Icon name="node-plus" />
            5 cycles
        </button>
        <button class="btn btn-info">
            <Icon name="node-plus" />
            6 cycles
        </button>
    </div>
    <div class="d-flex gap-3 mt-3 justify-content-center">
        <button class="btn btn-outline-info">
            <Icon name="skip-end-fill" />
            Chanson suivante
        </button>
        <button class="btn btn-danger">
            <Icon name="stop-circle" />
            Éteindre le réveil
        </button>
        <button class="btn btn-outline-info">
            <Icon name="fast-forward-fill" />
            Passer cette étape de la routine
        </button>
    </div>
</Container>
