<script>
 import { user } from '$lib/stores/user';
 import DateFormat from '$lib/components/DateFormat.svelte';
 import SubmissionStatus from '$lib/components/SubmissionStatus.svelte';

 export let work;
 export let my_submission;
</script>

<dl style="columns: 3">
    <dt>Date de début</dt>
    <dd><DateFormat date={new Date(work.start_availability)} dateStyle="medium" timeStyle="medium" /></dd>
    <dt>Date de fin</dt>
    <dd><DateFormat date={new Date(work.end_availability)} dateStyle="medium" timeStyle="medium" /></dd>
    {#if work.submission_url != "-"}
        <dt>Rendu&nbsp;?</dt>
        <dd>
            {#if work.submission_url}
                <SubmissionStatus work={w} user={$user} />
            {:else}
                {#await my_submission}
                    <div class="spinner-grow spinner-grow-sm mx-1" role="status"></div>
                {:then submission}
                    <i
                        class="bi bi-check-circle text-success"
                        title="Oui !"
                    ></i>
                    <DateFormat date={new Date(submission.date)} dateStyle="medium" timeStyle="medium" />
                {:catch}
                    <i
                        class="bi bi-x-circle text-danger"
                        title="Pas de rendu trouvé"
                    ></i>
                    Non
                {/await}
            {/if}
        </dd>
    {/if}
</dl>
