@if(detail()){
<div class="space-y-4">
	<div class="flex items-center justify-between">
		<h2 class="text-2xl font-semibold">Détails du gain — Course n° {{ detail()!.course.numero }}</h2>
		<div class="flex items-center gap-2">
			<a z-button routerLink="/gains" zType="ghost"><i class="icon-arrow-left mr-2"></i>Retour</a>
		</div>
	</div>

	<z-card class="p-4">
		<div class="grid grid-cols-1 md:grid-cols-4 gap-3 text-sm">
			<div>
				<span class="font-medium">Date:</span>
				{{ detail()!.course.reunionDate | date : 'dd/MM/yyyy' }}
			</div>
			<div><span class="font-medium">Nom:</span> {{ detail()!.course.nom }}</div>
			<div><span class="font-medium">Montant cagnotte:</span> {{ detail()!.montantCagnotte | number : '1.0-0' : 'fr-FR' }} CFA</div>
			<div><span class="font-medium">Montant à rembourser:</span> {{ detail()!.montantARembourser | number : '1.0-0' : 'fr-FR' }} CFA</div>
		</div>
	</z-card>

	@if(detail()!.formules && detail()!.formules.length > 0) {
	<div class="space-y-4">
		@for (f of detail()!.formules; track f.id || $index) {
		<z-card class="p-3">
			<div class="flex items-center justify-between mb-2">
				<div class="text-sm font-medium">Formule: {{ f.gains }} — {{ f.typeFormule }}</div>
				<div class="text-sm text-muted">Type pari: {{ f.typePari }}</div>
			</div>

			<div class="grid grid-cols-1 md:grid-cols-4 gap-2 text-sm mb-3">
				<div><span class="font-medium">Masse initiale:</span> {{ f.masseInitiale | number }}</div>
				<div><span class="font-medium">Masse après prélèvements:</span> {{ f.masseApresPrelevements | number }}</div>
				<div><span class="font-medium">Masse finale:</span> {{ f.masseFinale | number }}</div>
				<div><span class="font-medium">Total gagnants:</span> {{ f.totalGagnants }}</div>
			</div>

			<div class="rounded-md border overflow-hidden">
				<table class="w-full text-sm">
					<thead class="bg-accent">
						<tr>
							<th class="text-left p-2">Libellé</th>
							<th class="text-left p-2">Rapport</th>
							<th class="text-left p-2">Nombre gagnants</th>
							<th class="text-left p-2">Masse partagée</th>
						</tr>
					</thead>
					<tbody>
						@for (r of f.rapportsDetails; track r.id || $index) {
						<tr class="border-t">
							<td class="p-2">{{ r.libelle }}</td>
							<td class="p-2">{{ r.rapport }}</td>
							<td class="p-2">{{ r.nombreGagnants }}</td>
							<td class="p-2">{{ r.massePartageeRang | number }}</td>
						</tr>
						}
					</tbody>
				</table>
			</div>
		</z-card>
		}
	</div>
	}
</div>
}