{{ template "headersDATAMIX.html" . }}

  <div class="max-w-7xl mx-auto px-6 py-8 grid grid-cols-12 gap-8">
    <!-- SIDEBAR STATS -->
    <aside class="col-span-12 md:col-span-3 space-y-8">
      <div class="bg-white p-6 rounded-lg shadow-sm">
        <p class="text-4xl font-bold">3 460</p>
        <p class="uppercase text-sm text-gray-500">licences en retard</p>
        <p class="uppercase text-sm text-gray-500">en 3 abonnements</p>
      </div>
    </aside>

    <!-- MAIN CONTENT -->
    <main class="col-span-12 md:col-span-9 space-y-8">

      <!-- ABONNEMENTS EN RETARD -->
      <section class="space-y-6">
        <!-- Cartes d’abonnement -->
		<!-- Abonnement 400 licences -->
<div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-red-600">
	<header class="flex items-center justify-between mb-4">
	  <div>
		<h3 class="text-md font-semibold">Abonnement 400 licences</h3>
		<p class="text-sm text-gray-500">Projet CNP</p>
	  </div>
	  <p class="text-sm text-red-600 uppercase">Quota dépassé de 792 jours</p>
	</header>
	<table class="w-full text-sm mb-4">
	  <thead class="text-left text-gray-500 uppercase">
		<tr>
		  <th>Début</th>
		  <th>Fin</th>
		  <th>Montant TTC</th>
		  <th>Règlement</th>
		  <th></th>
		</tr>
	  </thead>
	  <tbody class="divide-y">
		<tr>
		  <td>15/02/2022</td>
		  <td>15/02/2023</td>
		  <td>3 840.00 €</td>
		  <td class="text-gray-400">–</td>
		  <td><button class="px-2 py-1 border rounded text-xs">Facture PDF</button></td>
		</tr>
		<tr>
		  <td class="text-red-600">15/02/2023</td>
		  <td class="text-red-600">15/02/2024</td>
		  <td class="text-red-600">3 840.00 €</td>
		  <td>
			<a href="#" class="underline text-sm text-red-600">Renouvellement dû</a>
		  </td>
		  <td class="space-x-2">
			<button class="px-3 py-1 bg-black text-white text-xs rounded">Régler</button>
			<button class="px-1 text-red-600">✕</button>
		  </td>
		</tr>
	  </tbody>
	</table>
  </div>
  
  <!-- Abonnement 60 licences -->
  <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-red-600">
	<header class="flex items-center justify-between mb-4">
	  <div>
		<h3 class="text-md font-semibold">Abonnement 60 licences</h3>
		<p class="text-sm text-gray-500">Projet PALATINE</p>
	  </div>
	  <p class="text-sm text-red-600 uppercase">Quota dépassé de 582 jours</p>
	</header>
	<table class="w-full text-sm mb-4">
	  <thead class="text-left text-gray-500 uppercase">
		<tr>
		  <th>Début</th>
		  <th>Fin</th>
		  <th>Montant TTC</th>
		  <th>Règlement</th>
		  <th></th>
		</tr>
	  </thead>
	  <tbody class="divide-y">
		<tr>
		  <td>13/09/2022</td>
		  <td>13/09/2023</td>
		  <td>1 152.00 €</td>
		  <td>31/10/2022</td>
		  <td><button class="px-2 py-1 border rounded text-xs">Facture PDF</button></td>
		</tr>
		<tr>
		  <td class="text-red-600">13/09/2023</td>
		  <td class="text-red-600">13/09/2024</td>
		  <td class="text-red-600">1 152.00 €</td>
		  <td>
			<a href="#" class="underline text-sm text-red-600">Renouvellement dû</a>
		  </td>
		  <td class="space-x-2">
			<button class="px-3 py-1 bg-black text-white text-xs rounded">Régler</button>
			<button class="px-1 text-red-600">✕</button>
		  </td>
		</tr>
	  </tbody>
	</table>
  </div>
  
  <!-- Abonnement 3000 licences -->
  <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-red-600">
	<header class="flex items-center justify-between mb-4">
	  <div>
		<h3 class="text-md font-semibold">Abonnement 3000 licences</h3>
		<p class="text-sm text-gray-500">Projet ALLIANZ</p>
	  </div>
	  <p class="text-sm text-red-600 uppercase">Quota dépassé de 12 jours</p>
	</header>
	<table class="w-full text-sm mb-4">
	  <thead class="text-left text-gray-500 uppercase">
		<tr>
		  <th>Début</th>
		  <th>Fin</th>
		  <th>Montant TTC</th>
		  <th>Règlement</th>
		  <th></th>
		</tr>
	  </thead>
	  <tbody class="divide-y">
		<tr>
		  <td>05/04/2024</td>
		  <td>05/04/2025</td>
		  <td>20 736.00 €</td>
		  <td class="text-gray-400">–</td>
		  <td><button class="px-2 py-1 border rounded text-xs">Facture PDF</button></td>
		</tr>
		<tr>
		  <td class="text-red-600">05/04/2025</td>
		  <td class="text-red-600">05/04/2026</td>
		  <td class="text-red-600">20 736.00 €</td>
		  <td>
			<a href="#" class="underline text-sm text-red-600">Renouvellement dû</a>
		  </td>
		  <td class="space-x-2">
			<button class="px-3 py-1 bg-black text-white text-xs rounded">Régler</button>
			<button class="px-1 text-red-600">✕</button>
		  </td>
		</tr>
	  </tbody>
	</table>
  </div>
  
        <!-- Répéter la carte pour 60 licences et 3000 licences… -->
      </section>
    </main>
  </div>
  

{{ template "footer.html" . }}