{{ template "headersMenuXL.html" . }}

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

  <div class="bg-gray-200 dark:bg-black py-20 min-h-screen">
    <div id="lists-container" class="grid gap-5 px-4 auto-rows-min">
      <!-- Lists will be dynamically added here -->
      <div id="add-list-card" class="bg-yellow-100 rounded-xl shadow-lg p-4 flex items-center justify-center cursor-pointer hover:bg-yellow-200 transition border-2 border-dashed border-yellow-300">
        <span class="text-4xl text-yellow-600 font-bold">+</span>
      </div>
    </div>
  </div>

  <div id="list-detail" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 overflow-y-auto flex items-center justify-center py-8">
    <div id="list-detail-content" class="bg-white dark:bg-black w-full max-w-md p-6 rounded-lg shadow-md relative max-h-[90vh] overflow-y-auto">
      <button id="close-list-btn" class="absolute top-4 right-4">
        ✖️
      </button>
      <h1 id="list-title" class="text-3xl font-bold text-center mb-4 text-gray-800 cursor-edit font-['Caveat']" contenteditable="true"></h1>
      <div id="list-notes" class="mb-4 p-2 border rounded"></div>
      <div id="shopping-list" class="space-y-2 mb-4"></div>
    </div>
  </div>

  <!-- Hidden group filter element initialized by group-manager.js -->
  <select id="group-filter" class="hidden bg-gray-200 dark:bg-black">
    <option value="all">Tous les groupes</option>
  </select>

  <script type="module" src="/cdn/apps/todo/js/app.js"></script>
  <script type="module" src="/cdn/apps/todo/js/group-manager.js"></script>
  <script type="module" src="/cdn/apps/todo/js/group-storage.js"></script>


{{ template "footer.html" . }}