{{ template "headersMenuXL.html" . }}

<link rel="stylesheet" href="/cdn/apps/todo/css/styles.css">

<div id="PMTodoList" class="py-20">

  <div id="stats-container" class="max-w-4xl mx-auto p-4">

    <!-- Loading skeleton des 3 stats -->
    <div id="stats-loading" class="flex items-center justify-center gap-4">
      <div class="h-24 bg-gray-200 rounded-lg animate-pulse"></div>
      <div class="h-24 bg-gray-200 rounded-lg animate-pulse"></div>
      <div class="h-24 bg-gray-200 rounded-lg animate-pulse"></div>
    </div>

    <!-- Contenu réel, caché tant que loading -->
    <div id="stats-content" class="hidden flex items-center justify-center gap-4">
      <div class="p-4 bg-white dark:bg-black border rounded-lg shadow text-center">
        <h3 class="text-sm font-medium text-gray-500">Total tâches</h3>
        <p id="total-tasks" class="mt-2 text-3xl font-bold">0</p>
      </div>
      <div class="p-4 bg-white dark:bg-black border rounded-lg shadow text-center">
        <h3 class="text-sm font-medium text-gray-500">À faire</h3>
        <p id="todo-tasks" class="mt-2 text-3xl font-bold">0</p>
      </div>
      <div class="p-4 bg-white dark:bg-black border rounded-lg shadow text-center">
        <h3 class="text-sm font-medium text-gray-500">En retard</h3>
        <p id="late-tasks" class="mt-2 text-3xl font-bold">0</p>
      </div>
    </div>
    <!-- DONE LIST -->
    <h2 class="mt-8 text-xl font-semibold text-gray-700">Tâches terminées</h2>

    <!-- Loading skeleton pour la liste -->
    <div id="done-loading" class="space-y-2 mt-2">
      <div class="h-4 bg-gray-200 rounded animate-pulse"></div>
      <div class="h-4 bg-gray-200 rounded animate-pulse"></div>
      <div class="h-4 bg-gray-200 rounded animate-pulse"></div>
    </div>

    <!-- Liste réelle, cachée tant que loading -->
    <ul id="done-list" class="hidden mt-2 space-y-2"></ul>
  </div>

</div>

{{ template "footer.html" . }}