<script>
 import { page } from '$app/stores';

 import {
     Container,
     Input,
     ListGroup,
     ListGroupItem,
     Spinner,
 } from 'sveltestrap';

 import { getAction } from '$lib/action';
</script>

{#await getAction($page.params.aid)}
    <div class="d-flex flex-fill justify-content-center align-items-center gap-2">
        <Spinner color="primary" /> Chargement en cours&hellip;
    </div>
{:then action}
    <Container>
        <h2>
            {action.name}
        </h2>
        <p class="text-muted">
            {action.description}
        </p>
        <ListGroup>
            <ListGroupItem>
                <strong>Chemin</strong>
                {action.path}
            </ListGroupItem>
            <ListGroupItem class="d-flex gap-2">
                <strong>Actif&nbsp;?</strong>
                <Input type="switch" on:change={() => action.toggleEnable()} checked={action.enabled} />
            </ListGroupItem>
        </ListGroup>
    </Container>
{/await}
