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

 import { user } from '../stores/user';
 import DateFormat from '../components/DateFormat.svelte';
 import SurveyBadge from '../components/SurveyBadge.svelte';
 import { getSurveys } from '../lib/surveys';
 import { getScore } from '../lib/users';

 let req_surveys = getSurveys();
 export let direct = null;

 req_surveys.then((surveys) => {
     for (const survey of surveys) {
         if (survey.direct != null) {
             direct = survey;
         }
     }
 });
</script>

<table class="table table-striped table-hover mb-0">
  <thead>
    <tr>
      <th>Intitulé</th>
      <th>Date</th>
      {#if $user}
          <th>Score</th>
      {/if}
    </tr>
  </thead>
  {#await req_surveys}
      <tr>
          <td colspan="5" class="text-center py-3">
              <div class="spinner-border mx-3" role="status"></div>
              <span>Chargement des questionnaires &hellip;</span>
          </td>
      </tr>
  {:then surveys}
      <tbody style="cursor: pointer;">
          {#each surveys as survey, sid (survey.id)}
              {#if (survey.shown || survey.direct != null) && (!$user || (!$user.was_admin || $user.promo == survey.promo) || $user.is_admin)}
                  {#if $user && $user.is_admin && (sid == 0 || surveys[sid-1].promo != survey.promo)}
                      <tr class="bg-info text-light">
                          <th colspan="5" class="fw-bold">
                              {survey.promo}
                          </th>
                      </tr>
                  {/if}
                  <tr on:click={e => goto(survey.direct != null ?`surveys/${survey.id}/live`:$user.is_admin?`surveys/${survey.id}/responses`:`surveys/${survey.id}`)}>
                      <td>
                          {survey.title}
                          <SurveyBadge {survey} class="float-end" />
                      </td>
                      {#if survey.start_availability > Date.now()}
                          <td>
                              <DateFormat date={survey.start_availability} dateStyle="medium" timeStyle="medium" />
                              <svg class="bi bi-arrow-bar-right" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.146 6.646a.5.5 0 01.708 0l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L14.793 10l-2.647-2.646a.5.5 0 010-.708z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M8 10a.5.5 0 01.5-.5H15a.5.5 0 010 1H8.5A.5.5 0 018 10zm-2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z" clip-rule="evenodd"></path></svg>
                          </td>
                      {:else}
                          <td>
                              <svg class="bi bi-arrow-bar-left" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.854 6.646a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708l3 3a.5.5 0 00.708-.708L5.207 10l2.647-2.646a.5.5 0 000-.708z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M12 10a.5.5 0 00-.5-.5H5a.5.5 0 000 1h6.5a.5.5 0 00.5-.5zm2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z" clip-rule="evenodd"></path></svg>
                              <DateFormat date={survey.end_availability} dateStyle="medium" timeStyle="medium" />
                          </td>
                      {/if}
                      {#if !$user}
                      {:else if !survey.corrected}
                          <td>N/A</td>
                      {:else}
                          <td>
                              {#await getScore(survey)}
                                  <div class="spinner-border spinner-border-sm" role="status"></div>
                              {:then score}
                                  {score.score}
                              {/await}
                          </td>
                      {/if}
                  </tr>
              {/if}
          {/each}
      </tbody>
  {/await}
  {#if $user && $user.is_admin}
      <tfoot>
          <tr>
              <td colspan="4">
	          <a href="surveys/new" class="btn btn-sm btn-primary">Ajouter un questionnaire</a>
              </td>
          </tr>
      </tfoot>
  {/if}
</table>
