<script>
 import { createEventDispatcher } from 'svelte';

 const dispatch = createEventDispatcher();

 export let repo_pull_state = null
</script>

{#await repo_pull_state}
    <div class="spinner-grow spinner-grow-sm mx-1" role="status"></div>
{:then state}
    {#if state.status == "pending" || state.status == "running"}
        <div
            class="spinner-grow spinner-grow-sm mx-1"
            class:text-primary={state.status == "pending"}
            class:text-warning={state.status == "running"}
            title="La récupération est en cours"
            role="status"
        ></div>
    {:else if state.status == "success"}
        <i class="bi bi-check-circle-fill text-success mx-1" title="La récupération s'est bien passée"></i>
    {:else if state.status == "failure" || state.status == "killed"}
        <i class="bi bi-exclamation-circle-fill text-danger mx-1" title="La récupération ne s'est pas bien passée" style="cursor: pointer" on:click={() => dispatch('show_logs')} on:keypress={() => dispatch('show_logs')}></i>
    {:else}
        {state.status}
    {/if}
{/await}
