{{ template "headersMenu.html" . }}

<div class="container py-20">

	<div class="flex min-h-screen">
	  
		<!-- Main content -->
		<main class="block w-full">
		  <!-- Header -->
		  <div class="mb-8">
			<h1 class="text-3xl font-bold">📨 {{ "Campagnes" | t }}</h1>
			<p class="">{{ "Suivi de vos campagnes d’automatisation" | t }}</p>
		  </div>
	  
		  <!-- Metrics -->
		  <div class="grid grid-cols-2 gap-6 mb-8 md:grid-cols-4">
			<div class="p-4 bg-white rounded shadow dark:bg-gray-800">
			  <p class="text-sm">{{ "Emails envoyés" | t }}</p>
			  <p class="text-2xl font-bold">3 540</p>
			</div>
			<div class="p-4 bg-white rounded shadow dark:bg-gray-800">
			  <p class="text-sm">{{ "Taux d’ouverture" | t }}</p>
			  <p class="text-2xl font-bold">64%</p>
			</div>
			<div class="p-4 bg-white rounded shadow dark:bg-gray-800">
			  <p class="text-sm">{{ "Taux de réponse" | t }}</p>
			  <p class="text-2xl font-bold">23%</p>
			</div>
			<div class="p-4 bg-white rounded shadow dark:bg-gray-800">
			  <p class="text-sm">{{ "Campagnes actives" | t }}</p>
			  <p class="text-2xl font-bold">5</p>
			</div>
		  </div>
	  
		  <!-- Campaigns list -->
		  <div class="overflow-hidden bg-white rounded shadow dark:bg-gray-800">
			<table class="w-full text-sm table-auto">
			  <thead class="text-left">
				<tr>
				  <th class="px-6 py-3">{{ "Nom" | t }}</th>
				  <th class="px-6 py-3">{{ "Statut" | t }}</th>
				  <th class="px-6 py-3">{{ "Envoyés" | t }}</th>
				  <th class="px-6 py-3">{{ "Ouvertures" | t }}</th>
				  <th class="px-6 py-3">{{ "Réponses" | t }}</th>
				  <th class="px-6 py-3 text-right">{{ "Actions" | t }}</th>
				</tr>
			  </thead>
			  <tbody>
				<tr class="border-t hover:bg-gray-50 dark:hover:bg-black">
				  <td class="px-6 py-4">{{ "Relance leads avril" | t }}</td>
				  <td class="px-6 py-4 font-medium text-green-600">{{ "Active" | t }}</td>
				  <td class="px-6 py-4">234</td>
				  <td class="px-6 py-4">62%</td>
				  <td class="px-6 py-4">87</td>
				  <td class="px-6 py-4 space-x-2 text-right">
					<a href="/edit/1" class="text-indigo-600 hover:underline">{{ "Modifier" | t }}</a>
					<a href="#" class="text-yellow-500 hover:underline">{{ "Dupliquer" | t }}</a>
					<a href="#" class="text-red-500 hover:underline">{{ "Supprimer" | t }}</a>
				  </td>
				</tr>
				<!-- Boucle ici -->
			  </tbody>
			</table>
		  </div>
	  
		  <!-- Add new -->
		  <div class="mt-6 text-right">
			<a href="/dashboard/workflows/new" class="inline-block px-4 py-2 text-white bg-indigo-600 rounded shadow hover:bg-indigo-700">
			  ➕ {{ "Nouvelle campagne" | t }}
			</a>
		  </div>
		</main>
	  </div>
	  
</div>

{{ template "footer.html" . }}