{{define "header-left"}}
    <div class="flex items-center gap-6">
      <a href="/app/projects" class="text-xl font-bold text-white tracking-tight">
        <span class="text-[#c9a84c]">Deal</span>space
      </a>
      <select id="projectSwitcher" class="bg-[#0a1628] border border-white/[0.08] rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-[#c9a84c]">
        <option value="">All Projects</option>
      </select>
    </div>
{{end}}

{{define "content"}}
    <div class="p-8 max-w-5xl">
      <!-- Greeting -->
      <div class="mb-8">
        <h1 id="greeting" class="text-2xl font-bold text-white mb-1"></h1>
        <p class="text-[#b0bec5] text-sm">Here are your pending tasks.</p>
      </div>

      <!-- Task List -->
      <div id="taskList" class="space-y-3">
        <div class="text-[#b0bec5] text-sm">Loading tasks...</div>
      </div>

      <!-- Empty State -->
      <div id="emptyState" class="hidden text-center py-20">
        <div class="text-5xl mb-4">&#127881;</div>
        <h2 class="text-xl font-semibold text-white mb-2">You're all caught up</h2>
        <p class="text-[#b0bec5]">No tasks need your attention right now.</p>
      </div>
    </div>
{{end}}

{{define "scripts"}}
  <script>
    // Greeting
    const hour = new Date().getHours();
    const greetWord = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
    document.getElementById('greeting').textContent = greetWord + ', ' + (user.name || 'there');

    // Load tasks
    async function loadTasks() {
      try {
        const res = await fetchAPI('/api/tasks');
        const tasks = await res.json();
        const list = document.getElementById('taskList');
        const empty = document.getElementById('emptyState');

        if (!tasks || tasks.length === 0) {
          list.classList.add('hidden');
          empty.classList.remove('hidden');
          return;
        }

        list.innerHTML = tasks.map(t => {
          const data = parseData(t.data_text);
          const priority = data.priority || 'normal';
          const title = data.title || t.summary || 'Untitled';
          const ref = data.ref || '';
          const due = data.due_date || '';
          const status = data.status || 'open';

          return `
            <a href="/app/requests/${t.entry_id}" class="task-card block bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-5 transition cursor-pointer">
              <div class="flex items-center gap-3 mb-2">
                <span class="w-2.5 h-2.5 rounded-full priority-${priority} shrink-0"></span>
                ${ref ? `<span class="text-xs font-mono text-[#b0bec5]">${ref}</span>` : ''}
                <span class="text-white font-medium flex-1">${escHtml(title)}</span>
                ${due ? `<span class="text-xs text-[#b0bec5]">Due: ${due}</span>` : ''}
              </div>
              <div class="flex items-center gap-3 text-xs text-[#8899a6]">
                <span class="capitalize px-2 py-0.5 rounded-full bg-white/[0.05] text-[#b0bec5]">${status}</span>
                <span>${t.type || 'request'}</span>
              </div>
            </a>
          `;
        }).join('');
      } catch (err) {
        document.getElementById('taskList').innerHTML = '<div class="text-red-400 text-sm">Failed to load tasks.</div>';
      }
    }

    loadTasks();
  </script>
{{end}}
