<script>
 import { getSurveys } from '../lib/surveys';
 import { getUsers, getGrades, getPromos } from '../lib/users';

 export let promo = null;
</script>

{#await getPromos() then promos}
    <div class="float-end me-2">
        <select class="form-select" bind:value={promo}>
            <option value={null}>tous</option>
            {#each promos as promo, pid (pid)}
                <option value={promo}>{promo}</option>
            {/each}
        </select>
    </div>
{/await}
<h2>
  Étudiants {#if promo !== null}{promo}{/if}
  <small class="text-muted">Notes</small>
</h2>

{#await getSurveys()}
    <div class="d-flex justify-content-center">
        <div class="spinner-border me-2" role="status"></div>
        Chargement des questionnaires corrigés&hellip;
    </div>
{:then surveys}
    {#await getGrades()}
        <div class="d-flex justify-content-center">
            <div class="spinner-border me-2" role="status"></div>
            Chargement des notes&hellip;
        </div>
    {:then grades}
        <div class="card mb-5">
            <table class="table table-striped table-hover mb-0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Login</th>
                        {#each surveys as survey (survey.id)}
                            {#if survey.corrected && (promo === null || survey.promo == promo)}
                                <th><a href="surveys/{survey.id}" style="text-decoration: none">{survey.title}</a></th>
                            {/if}
                        {/each}
                    </tr>
                </thead>
                <tbody>
                    {#await getUsers()}
                        <tr>
                            <td colspan="20">
                                <div class="d-flex justify-content-center">
                                    <div class="spinner-border me-2" role="status"></div>
                                    Chargement des étudiants&hellip;
                                </div>
                            </td>
                        </tr>
                    {:then users}
                        {#each users as user (user.id)}
                            {#if promo === null || user.promo === promo}
                            <tr>
                                <td><a href="users/{user.id}" style="text-decoration: none">{user.id}</a></td>
                                <td><a href="users/{user.login}" style="text-decoration: none">{user.login}</a></td>
                                {#each surveys as survey (survey.id)}
                                    {#if survey.corrected && (promo === null || survey.promo == promo)}
                                        <td>{grades[user.id] && grades[user.id][survey.id]?grades[user.id][survey.id]:""}</td>
                                    {/if}
                                {/each}
                            </tr>
                            {/if}
                        {/each}
                    {/await}
                </tbody>
            </table>
        </div>
    {/await}
{/await}
