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

 let className = '';
 export { className as class };

 const rendus_baseurl = "https://adlin.nemunai.re/rendus/";

 async function getUserRendus() {
     const res = await fetch(`${rendus_baseurl}${$user.login}.json`)
     if (res.status == 200) {
         return await res.json();
     } else {
         return null;
     }
 }
</script>

<table class="table {className}">
    {#await getUserRendus()}
        Please wait...
    {:then rendus}
        <thead>
            <tr>
                {#each Object.keys(rendus) as renduname, rid (rid)}
                    <th>{renduname}</th>
                {/each}
            </tr>
        </thead>
        <tbody>
            <tr>
                {#each Object.keys(rendus) as renduname, rid (rid)}
                    <th
                        class:bg-danger={!rendus[renduname]}
                        class:text-center={!rendus[renduname]}
                        class:bg-success={rendus[renduname]}
                    >
                        {#if rendus[renduname]}
                            <DateFormat date={rendus[renduname].date} dateStyle="medium" timeStyle="medium" /><br>
                            <span class="hash" title={rendus[renduname].hash}>{rendus[renduname].hash}</span>
                        {:else}
                            &ndash;
                        {/if}
                    </th>
                {/each}
            </tr>
        </tbody>
    {/await}
</table>

<style>
    .hash {
        max-width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
</style>
