@if(detail()){
<div class="space-y-4">
  <div class="flex items-center justify-between">
    <h2 class="text-2xl font-semibold">
      Rapport pour la course n° {{ detail()!.summary.course.numero }}
      <span class="text-sm text-muted-foreground">({{ detail()!.summary.statut }})</span>
    </h2>
    <div class="flex items-center gap-2">
      <a z-button routerLink="/rapport-courses" zType="ghost"
        ><i class="icon-arrow-left mr-2"></i>Retour</a
      >
      <z-button zType="default" (click)="onEditToggle()"
        ><i class="icon-edit mr-1"></i>{{ editMode() ? 'Quitter édition' : 'Modifier' }}</z-button
      >
      <z-button zType="default" (click)="onValidate()"
        ><i class="icon-edit-2 mr-1"></i>Valider</z-button
      >
      <z-button zType="secondary" (click)="onConfirm()"
        ><i class="icon-check mr-1"></i>Confirmer</z-button
      >
      <z-button zType="destructive" (click)="onReset()"
        ><i class="icon-rotate-ccw mr-1"></i>Réinitialiser</z-button
      >
    </div>
  </div>

  <z-card class="p-4">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-2 text-sm">
      <div>
        <span class="font-medium">Date:</span>
        {{ detail()!.summary.course.dateDepartCourse | date : 'dd/MM/yyyy' }}
      </div>
      <div><span class="font-medium">Nom:</span> {{ detail()!.summary.course.nom }}</div>
      <div><span class="font-medium">Type:</span> {{ detail()!.summary.course.type }}</div>
      <div>
        <span class="font-medium">Lieu:</span> {{ detail()!.summary.course.reunion.hippodrome.nom }}
      </div>
    </div>
  </z-card>

  <div class="rounded-md border overflow-hidden">
    <table class="w-full text-sm">
      <thead class="bg-accent">
        <tr>
          <th class="text-left p-2">Type de gain</th>
          <th class="text-left p-2">Type de jeu</th>
          <th class="text-left p-2">Montant</th>
          <th class="text-left p-2">Nombre</th>
          <th class="text-left p-2">Statut</th>
          <th class="text-left p-2">Distribué</th>
          <th class="text-left p-2">Externe</th>
        </tr>
      </thead>
      <tbody>
        <tr
          *ngFor="let r of editedRows(); let i = index; trackBy: trackByRow"
          class="border-t transition-colors"
          [ngClass]="editMode() && isRowDirty(i) ? 'bg-amber-50 dark:bg-amber-900/30' : ''"
        >
          <td class="p-2">{{ r.typeGain }}</td>
          <td class="p-2">{{ r.typeJeu }}</td>
          <td class="p-2">
            @if(editMode() && !detail()!.summary.confirmed){
            <input
              z-input
              type="number"
              [value]="r.montant"
              (input)="onChangeMontant(i, $any($event.target).value)"
            />
            } @else {
            {{ r.montant | number : '1.0-0' : 'fr-FR' }}
            }
          </td>
          <td class="p-2">
            @if(editMode() && !detail()!.summary.confirmed){
            <input
              z-input
              type="number"
              [value]="r.nombre"
              (input)="onChangeNombre(i, $any($event.target).value)"
            />
            } @else {
            {{ r.nombre | number : '1.0-0' : 'fr-FR' }}
            }
          </td>
          <td class="p-2">{{ r.statut }}</td>
          <td class="p-2">
            @if(editMode() && !detail()!.summary.confirmed){
            <input
              type="checkbox"
              [checked]="r.distributed"
              (change)="onToggleDistributed(i, $any($event.target).checked)"
            />
            } @else {
            <input type="checkbox" [checked]="r.distributed" disabled />
            }
          </td>
          <td class="p-2">
            @if(editMode() && !detail()!.summary.confirmed){
            <input
              type="checkbox"
              [checked]="r.externe"
              (change)="onToggleExterne(i, $any($event.target).checked)"
            />
            } @else {
            <input type="checkbox" [checked]="r.externe" disabled />
            }
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
}
