{{ template "headersCDN.html" . }}

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

  <div class="bg-gray-200 dark:bg-black py-20 min-h-screen flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 w-full max-w-2xl p-6 rounded-lg shadow-md">
      <h1 id="list-title"
          class="text-3xl font-bold text-center mb-4 text-gray-800 dark:text-gray-100 cursor-text font-['Caveat']"
          contenteditable="true">{{ .List.Name }}</h1>

      <div id="list-notes"
           class="mb-4 p-2 border rounded bg-gray-50 dark:bg-gray-800"
           contenteditable="true">{{ .List.Notes }}</div>

      <div id="shopping-list" class="space-y-2 mb-4">
        {{- range $idx, $item := .List.Items }}
        <div class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-2 rounded">
          <input type="checkbox" data-idx="{{ $idx }}"
                 class="toggle-item" {{ if $item.Bought }}checked{{ end }}>
          <span contenteditable="true" data-idx="{{ $idx }}"
                class="flex-grow px-2 {{ if $item.Bought }}line-through text-gray-500{{ end }}">
            {{ $item.Name }}
          </span>
          <input type="date" data-idx="{{ $idx }}"
                 value="{{ $item.Date }}" class="text-sm">
        </div>
        {{- end }}
      </div>

      <button id="add-item-btn"
              class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition">
        + Ajouter une tâche
      </button>
    </div>
  </div>


<script>
    const listId = "{{ .UID }}";
  
    // Débounce utilitaire
    function debounce(fn, ms) {
      let timer;
      return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), ms);
      };
    }
  
    // Charge la liste depuis l'API et remplit le DOM
    async function loadList() {
      const res = await fetch(`/bin/todo/lists/${listId}`);
      if (!res.ok) throw new Error('Liste introuvable');
      const list = await res.json();
  
      // Titre & notes
      document.getElementById('list-title').textContent = list.name;
      document.getElementById('list-notes').innerHTML = list.notes || '';
  
      // Items
      const container = document.getElementById('shopping-list');
      container.innerHTML = '';
      list.items.forEach((item, idx) => {
        const row = document.createElement('div');
        row.className = 'flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-2 rounded';
        row.innerHTML = `
          <input type="checkbox" data-idx="${idx}" class="toggle-item" ${item.bought ? 'checked':''}>
          <span contenteditable="true" data-idx="${idx}" class="flex-grow px-2 ${item.bought?'line-through text-gray-500':''}">
            ${item.name}
          </span>
          <input type="date" data-idx="${idx}" class="text-sm" value="${item.date||''}">
        `;
        container.appendChild(row);
      });
    }
  
    // Lit le DOM et envoie la MAJ
    const saveDebounced = debounce(async () => {
      const title = document.getElementById('list-title').textContent.trim();
      const notes = document.getElementById('list-notes').innerHTML;
      const items = Array.from(document.querySelectorAll('#shopping-list > div')).map(div => ({
        name: div.querySelector('span').textContent.trim(),
        bought: div.querySelector('input[type=checkbox]').checked,
        date: div.querySelector('input[type=date]').value || null
      }));
  
      await fetch(`/bin/todo/lists/${listId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: listId, name: title, notes, items })
      });
    }, 800);
  
    // Pose tous les listeners d’édition
    function attachListeners() {
      document.getElementById('list-title').addEventListener('input', saveDebounced);
      document.getElementById('list-notes').addEventListener('input', saveDebounced);
  
      document.querySelectorAll('.toggle-item').forEach(cb =>
        cb.addEventListener('change', saveDebounced)
      );
      document.querySelectorAll('#shopping-list span').forEach(span =>
        span.addEventListener('input', saveDebounced)
      );
      document.querySelectorAll('#shopping-list input[type=date]').forEach(inp =>
        inp.addEventListener('change', saveDebounced)
      );
  
      document.getElementById('add-item-btn').addEventListener('click', () => {
        const container = document.getElementById('shopping-list');
        const idx = container.children.length;
        const row = document.createElement('div');
        row.className = 'flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-2 rounded';
        row.innerHTML = `
          <input type="checkbox" data-idx="${idx}" class="toggle-item">
          <span contenteditable="true" data-idx="${idx}" class="flex-grow px-2">Nouvelle tâche</span>
          <input type="date" data-idx="${idx}" class="text-sm">
        `;
        container.appendChild(row);
        // bind listeners
        row.querySelector('input[type=checkbox]').addEventListener('change', saveDebounced);
        row.querySelector('span').addEventListener('input', saveDebounced);
        row.querySelector('input[type=date]').addEventListener('change', saveDebounced);
        saveDebounced();
      });
    }
  
    // Initialisation
    document.addEventListener('DOMContentLoaded', async () => {
      try {
        await loadList();
        attachListeners();
      } catch (err) {
        console.error(err);
      }
    });
  
</script>
  
  {{ template "footer.html" . }}