@if (trajetsTries().length === 0) {
  <p class="liste-vide" role="status">Aucun trajet pour cette journée.</p>
} @else {
  <ul
    class="trajets"
    cdkDropList
    (cdkDropListDropped)="onDrop($event)"
    role="list"
  >
    @for (trajet of trajetsTries(); track trajet.id; let i = $index) {
      <li
        class="trajet"
        cdkDrag
        [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__infos">
          <div class="trajet__ligne">
            <span class="trajet__date">{{ trajet.date | date: 'dd/MM/yyyy' }}</span>
            @if (trajet.commentaire) {
              <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>

        <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(i)) {
              <button
                type="button"
                class="action action--icone"
                (click)="insererAvantSuivant(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>
      </li>
    }
  </ul>
}

<!-- 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>