<script lang="ts">
 import { getKeys, getKey, Key } from '../lib/key';

 export let student = null;
</script>

<table class="table table-striped table-hover mb-0">
    <thead>
        <tr>
            <th>ID</th>
            <th>Type</th>
            <th>Informations</th>
        </tr>
    </thead>
    <tbody>
        {#await getKeys(student.id)}
            <tr>
                <td colspan="4">
                    <div class="d-flex justify-content-center">
                        <div class="spinner-border me-2" role="status"></div>
                        Chargement des clefs&hellip;
                    </div>
                </td>
            </tr>
        {:then keys}
            {#if keys && keys.length > 0}
                {#each keys as keyid}
                    {#await getKey(keyid)}
                        Veuillez patienter
                    {:then key}
                        <tr>
                            <td>{key.id}</td>
                            <td>{key.type.toUpperCase()}</td>
                            <td>
                                <dl>
                                    {#each Object.keys(key.infos) as k}
                                        <dt class="float-start me-3 my-0 py-0">{k}</dt>
                                        <dd>{#if key.infos[k]}{key.infos[k]}{:else}<span class="fst-italic">-</span>{/if}</dd>
                                    {/each}
                                </dl>
                            </td>
                        </tr>
                    {/await}
                {/each}
            {:else}
                <tr>
                    <td colspan="4" class="text-center fst-italic">Cet utilisateur n'a pas défini de clef</td>
                </tr>
            {/if}
        {/await}
    </tbody>
</table>
