SchotzIAD/frontend/src/app/features/trajet-list/trajet-list.component.html

@if (groupes().length > 0) {
  <!-- Un groupe par journée : en-tête de date + liste de dépôt indépendante.
       Les listes NE sont PAS connectées entre elles → drag limité à chaque jour. -->
  @for (groupe of groupes(); track groupe.date) {
    <section
      class="jour"
      [class.jour--affiche]="estJourAffiche(groupe)"
      aria-label="Trajets d'une journée"
    >
      <!-- En-tête repliable : chevron + jour de semaine + date + nombre de trajets,
           puis un bouton « + » dédié pour ajouter un trajet SUR CETTE JOURNÉE (indépendant
           de la date affichée sur la carte, pilotée par le survol : viser le bouton
           principal d'ajout en traversant plusieurs journées ouvertes ferait dériver la
           date ciblée). -->
      <div class="jour__entete" [attr.aria-expanded]="estOuvert(groupe)">
        <button
          type="button"
          class="jour__entete-bouton"
          (click)="basculerJour(groupe)"
        >
          <span class="jour__chevron" aria-hidden="true">{{ estOuvert(groupe) ? '▾' : '▸' }}</span>
          <span class="jour__date">{{ groupe.date | date: 'EEEE dd/MM/yyyy' }}</span>
          <span class="jour__compteur">{{ groupe.trajets.length }} trajet{{ groupe.trajets.length > 1 ? 's' : '' }}</span>
        </button>
        <button
          type="button"
          class="jour__ajouter"
          title="Ajouter un trajet sur cette journée"
          aria-label="Ajouter un trajet sur cette journée"
          (click)="ajouterSur(groupe, $event)"
        >
          +
        </button>
      </div>

      @if (estOuvert(groupe)) {
      <ul
        class="trajets"
        cdkDropList
        [cdkDropListData]="groupe.trajets"
        (cdkDropListDropped)="onDrop(groupe, $event)"
        role="list"
      >
        @for (trajet of groupe.trajets; track trajet.id; let i = $index) {
          <li
            class="trajet"
            cdkDrag
            [cdkDragData]="trajet"
            [cdkDragDisabled]="operationEnCours()"
            role="listitem"
            (mouseenter)="onSurvol(trajet.id)"
            (mouseleave)="onSurvol(null)"
          >
            <!-- Poignée de glisser-déposer (Exigence 11.9). -->
            <button
              type="button"
              class="poignee"
              cdkDragHandle
              [disabled]="operationEnCours()"
              aria-label="Déplacer le trajet pour le réordonner"
              title="Glisser pour réordonner"
            >
              ⠿
            </button>

            <div class="trajet__actions">
              <div class="trajet__actions-ligne">
                <button
                  type="button"
                  class="action action--icone"
                  (click)="modifier(trajet)"
                  [disabled]="operationEnCours()"
                  title="Modifier ce trajet"
                  aria-label="Modifier ce trajet"
                >
                  ✏️
                </button>
                <button
                  type="button"
                  class="action action--icone action--danger"
                  (click)="demanderSuppression(trajet)"
                  [disabled]="operationEnCours()"
                  title="Supprimer ce trajet"
                  aria-label="Supprimer ce trajet"
                >
                  🗑️
                </button>
              </div>
              <div class="trajet__actions-ligne">
                @if (!estDernier(groupe, i)) {
                  <button
                    type="button"
                    class="action action--icone"
                    (click)="insererAvantSuivant(groupe, i)"
                    [disabled]="operationEnCours()"
                    title="Insérer un trajet avant le suivant"
                    aria-label="Insérer un trajet avant le suivant"
                  >
                    ↥
                  </button>
                }
                <button
                  type="button"
                  class="action action--icone"
                  (click)="insererApres(trajet)"
                  [disabled]="operationEnCours()"
                  title="Insérer un trajet après celui-ci"
                  aria-label="Insérer un trajet après celui-ci"
                >
                  ↧
                </button>
              </div>
            </div>

            <!-- Colonne dédiée A/R (largeur fixe) : garde date/adresses alignées. -->
            <div class="trajet__ar-col" aria-hidden="false">
              @if (trajet.allerRetour) {
                <span class="trajet__ar" title="Aller/Retour : distance comptée doublée">A/R</span>
              }
            </div>

            <div class="trajet__infos">
              @if (trajet.commentaire) {
                <div class="trajet__ligne">
                  <span class="trajet__commentaire">{{ trajet.commentaire }}</span>
                </div>
              }
              <div class="trajet__adresses">
                <span class="trajet__depart">{{ trajet.adresseDepart }}</span>
                <span class="trajet__fleche" aria-hidden="true">→</span>
                <span class="trajet__arrivee">{{ trajet.adresseArrivee }}</span>
              </div>
            </div>

            <div class="trajet__distance">{{ distanceAffichee(trajet) }}</div>

          </li>
        }
      </ul>
      }
    </section>
  }
}

<!-- Confirmation de suppression (Exigence 5.4). -->
<app-confirm-dialog
  [open]="trajetASupprimer() !== null"
  titre="Supprimer le trajet"
  message="Cette action est irréversible. Voulez-vous vraiment supprimer ce trajet ?"
  libelleConfirmer="Supprimer"
  libelleAnnuler="Annuler"
  [danger]="true"
  (confirmed)="confirmerSuppression()"
  (cancelled)="annulerSuppression()"
></app-confirm-dialog>