<script lang="ts">


  import { getContext, onMount } from "svelte";
  import type { Writable } from "svelte/store";
  import type { Waiting } from "../../types/room.type";
  import { goto } from "$app/navigation";

  const member: Writable<Waiting | null> = getContext("member");

  onMount(() => {

    if ($member == null || !$member.waiter_id) {
      goto("?");
    }
  });
</script>

{#if $member != null && $member.waiter_id}
  <div class="waiting">
    <h1>En attente</h1>
    <p>En liste d'attente pour la salle <span class="room">{$member.room.name}<span
      class="id">#{$member.room.id_code}</span></span> en tant que
      <span class="member">{$member.username}<span class="id">#{$member.waiter_id}</span></span></p>
    <p>En attente de la réponse de l'administrateur</p>
  </div>
{/if}

<style lang="scss">
  .waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  h1 {
    margin-bottom: 10px;
  }

  .room, .member {
    text-decoration: underline;
    font-style: italic;
    font-weight: 600;
  }

  .id {
    font-weight: 400;
    color: #bebcbc;
  }

  button {
    margin-top: 20px;
  }

  p {
    text-align: center;
  }
</style>