<script lang="ts">
 import { goto } from '$app/navigation';

 import { getSurveys } from '../lib/surveys';
 import { getUser, getUserGrade, getUserScore } from '../lib/users';

 export let student = null;
 export let allPromos = false;
</script>

<table class="table table-striped table-hover mb-0">
    <thead>
        <tr>
            <th>ID</th>
            <th>Titre</th>
            <th>Promo</th>
            <th>Avancement</th>
            <th>Note</th>
        </tr>
    </thead>
    <tbody>
        {#await getSurveys()}
            <tr>
                <td colspan="4">
                    <div class="d-flex justify-content-center">
                        <div class="spinner-border me-2" role="status"></div>
                        Chargement des questionnaires&hellip;
                    </div>
                </td>
            </tr>
        {:then surveys}
            {#each surveys as survey, sid (survey.id)}
                {#if allPromos || survey.promo === student.promo}
                    <tr on:click={e => goto(`users/${student.id}/surveys/${survey.id}`)}>
                        <td>{survey.id}</td>
                        <td>{survey.title}</td>
                        <td>{survey.promo}</td>
                        {#await getUserGrade(student.id, survey)}
                            <td>
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                            </td>
                        {:then gr}
                            <td title="{gr.grades}">
                                {gr.avancement * 100}&nbsp;%
                            </td>
                        {/await}
                        {#await getUserScore(student.id, survey)}
                            <td>
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                            </td>
                        {:then score}
                            <td>
                                {score.score}{#if score.score >= 0}/20{/if}
                            </td>
                        {/await}
                    </tr>
                {/if}
            {/each}
        {/await}
    </tbody>
</table>
