<script>
 import { goto } from '$app/navigation';

 import { user } from '$lib/stores/user';
 import DateFormat from '$lib/components/DateFormat.svelte';
 import { getUsers, getPromos } from '$lib/users';

 function showUser(user) {
     goto(`users/${user.id}`)
 }

 let filterPromo = "";
</script>

{#if $user && $user.is_admin}
    <a
        href="auth/gitlabcri?next={window.location.pathname}"
        class="btn btn-primary float-end"
    >
        <i class="bi bi-link-45deg"></i>
        OAuth GitLab
    </a>
    <a href="grades" class="btn btn-success me-1 float-end" title="Notes">
        <i class="bi bi-files"></i>
    </a>
    {#await getPromos() then promos}
        <div class="float-end me-2">
            <select class="form-select" bind:value={filterPromo}>
                <option value="">-</option>
                {#each promos as promo, pid (pid)}
                    <option value={promo}>{promo}</option>
                {/each}
            </select>
        </div>
    {/await}
{/if}
<h2>
  Étudiants
</h2>

{#await getUsers()}
    <div class="text-center">
        <div class="spinner-border text-danger mx-3" role="status"></div>
        <span>Chargement des &eacute;tudiants &hellip;</span>
    </div>
{:then users}
    <table class="table table-sm table-striped table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Login</th>
                <th>E-mail</th>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date d'inscription</th>
                <th>Promo</th>
            </tr>
        </thead>
        <tbody>
            {#each users.filter((u) => (filterPromo === "" || filterPromo === u.promo)) as u, uid (u.id)}
                <tr
                    class:bg-danger={u.is_admin}
                >
                    <td>
                        {u.id}
                        <div class="d-inline-block float-end" style="max-height: 1.5em">
                            <img src="//photos.cri.epita.fr/square/{u.login}" alt={u.login} style="max-height: 2.5em; margin-top: -0.33em">
                        </div>
                    </td>
                    <td>
                        <a href="users/{u.login}">{u.login}</a>
                    </td>
                    <td>
                        <a href="mailto:{u.email}">{u.email}</a>
                    </td>
                    <td>{u.lastname}</td>
                    <td>{u.firstname}</td>
                    <td>
                        <DateFormat date={u.time} dateStyle="short" timeStyle="medium" />
                    </td>
                    <td>{u.promo}</td>
                </tr>
            {/each}
        </tbody>
    </table>
{/await}
