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

 import {
     Button,
     Icon,
     Spinner,
 } from '@sveltestrap/sveltestrap';

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

 let { flush = false, class: className = '' } = $props();

 let refreshInProgress = $state(false);
 function refresh_actions() {
     refreshInProgress = true;
     actions.refresh().then(() => {
         refreshInProgress = false;
     });
 }
</script>

<div class="d-flex justify-content-between align-items-center" class:px-2={flush}>
    <h2>
        Actions
    </h2>
    <div>
        {#if !flush}
            <a
                href="routines/actions"
                class="btn btn-sm btn-outline-info"
            >
                <Icon name="pencil" />
            </a>
        {/if}
        <Button
            color="outline-dark"
            size="sm"
            title="Rafraîchir la liste des actions"
            on:click={refresh_actions}
            disabled={refreshInProgress}
        >
            {#if !refreshInProgress}
                <Icon name="arrow-clockwise" />
            {:else}
                <Spinner color="dark" size="sm" />
            {/if}
        </Button>
    </div>
</div>
<div class="list-group {className}" class:list-group-flush={flush}>
    {#if $actions.list}
        {#each $actions.list as action (action.id)}
            <a
                href="routines/actions/{action.id}"
                class="list-group-item list-group-item-action"
                class:active={$page.url.pathname.indexOf('/actions/') !== -1 && $page.params.aid == action.id}
                aria-current="true"
            >
                <span class:fw-bold={action.enabled}>{action.name}</span>
            </a>
        {/each}
    {:else}
        {#await actions.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}
</div>
