gestion_table_tournante_libre/src/interface/evenement/EnteteEvenement.svelte

<!-- © 2026 TechnoLibre (http://www.technolibre.ca)
     License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl) -->

<script>
  // L'en-tête de l'événement ouvert (§ 9) : son nom, puis ses quatre états,
  // dans l'ordre du § 9. Un état se pose en le cliquant, par la commande
  // changerEtat de la séance — « Bloqué » est la commande « Bloquer », après
  // laquelle la séance revient en lecture et rend le verrou. Ce que la séance
  // refuse — la lecture, un plan bloqué, « Retenu » sans placement retenu,
  // « Proposé » sans proposition — s'affiche à côté de l'état cliqué, avec
  // son remède. L'état courant se distingue par sa forme : gras, et un trait
  // sous lui. Le nom se coupe où il le faut, même sans espace : un nom long
  // de glyphes larges passe à la ligne au lieu d'élargir la page. Chaque état
  // est un bloc : la commande et son refus en sont.
  import { getContext } from 'svelte';
  import Commande from '../primitives/Commande.svelte';
  import { ETATS_PLAN, cleEtat } from './modele.js';

  const t = getContext('t');
  const seance = getContext('seance');

  const courant = $derived($seance.evenement?.etat ?? null);
</script>

<header class="entete">
  <h1>{$seance.evenement?.nom}</h1>
  <div class="etats" role="group" aria-label={t('evenement.etat.titre')}>
    {#each ETATS_PLAN as etat (etat)}
      <div class="etat" class:courant={courant === etat} data-etat={etat}>
        <Commande cle={cleEtat(etat)} nom="etat" executer={() => seance.executer('changerEtat', { etat })} />
      </div>
    {/each}
  </div>
</header>

<style>
  .entete {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--espace-2) var(--espace-4);
  }

  h1 {
    min-width: 0;
    margin: 0;
    font-size: var(--taille-titre);
    overflow-wrap: anywhere;
  }

  .etats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--espace-2);
  }

  .etat {
    padding-bottom: var(--espace-1);
    border-bottom: 3px solid var(--couleur-page-fond);
  }

  .etat.courant {
    border-bottom-color: var(--couleur-page-texte);
    font-weight: bold;
  }
</style>