<!-- Tasks Module — Trinity Console -->
<!-- Chronicler #78 | April 11, 2026 -->

<!-- Stats -->
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Active</div>
    <div class="text-2xl font-bold mt-1"><%= stats.active %></div>
  </div>
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">In Progress</div>
    <div class="text-2xl font-bold mt-1 text-frost"><%= stats.in_progress %></div>
  </div>
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Blocked</div>
    <div class="text-2xl font-bold mt-1 text-red-500"><%= stats.blocked %></div>
  </div>
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">High Priority</div>
    <div class="text-2xl font-bold mt-1 text-fire"><%= stats.high_priority %></div>
  </div>
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Completed</div>
    <div class="text-2xl font-bold mt-1 text-green-500"><%= stats.done %></div>
  </div>
</div>

<!-- Filters + Create -->
<div class="flex flex-wrap gap-4 mb-6 items-end">
  <form method="GET" class="flex flex-wrap gap-3 items-end flex-1">
    <div>
      <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Status</label>
      <select name="status" class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
        <option value="">Active</option>
        <% statuses.forEach(s => { %>
          <option value="<%= s %>" <%= filters.status === s ? 'selected' : '' %>><%= s.replace('_', ' ') %></option>
        <% }); %>
      </select>
    </div>
    <div>
      <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Priority</label>
      <select name="priority" class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
        <option value="">All</option>
        <% priorities.forEach(p => { %>
          <option value="<%= p %>" <%= filters.priority === p ? 'selected' : '' %>><%= p %></option>
        <% }); %>
      </select>
    </div>
    <div>
      <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Owner</label>
      <select name="owner" class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
        <option value="">All</option>
        <% owners.forEach(o => { %>
          <option value="<%= o %>" <%= filters.owner === o ? 'selected' : '' %>><%= o %></option>
        <% }); %>
      </select>
    </div>
    <div class="flex gap-2">
      <button type="submit" class="bg-frost text-white px-4 py-2 rounded-md text-sm hover:opacity-90 transition">Filter</button>
      <a href="/admin/tasks" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-md text-sm hover:opacity-90 transition">Reset</a>
      <a href="/admin/tasks?all=1" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-md text-sm hover:opacity-90 transition">Show All</a>
    </div>
  </form>
  <button onclick="document.getElementById('create-modal').style.display='flex'" class="bg-gradient-to-r from-fire to-frost text-white px-4 py-2 rounded-md text-sm hover:opacity-90 transition font-medium">
    + New Task
  </button>
</div>

<!-- Task List -->
<div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
  <table class="w-full">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-700 text-left text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
        <th class="px-4 py-3 w-16">#</th>
        <th class="px-4 py-3">Task</th>
        <th class="px-4 py-3 w-24">Priority</th>
        <th class="px-4 py-3 w-28">Status</th>
        <th class="px-4 py-3 w-24">Owner</th>
        <th class="px-4 py-3 w-32">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
      <% if (tasks.length === 0) { %>
        <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">No tasks match your filters.</td></tr>
      <% } %>
      <% tasks.forEach(task => {
        const priColors = { critical:'bg-red-500/20 text-red-500', high:'bg-fire/20 text-fire', medium:'bg-yellow-500/20 text-yellow-500', low:'bg-blue-500/20 text-blue-400', wish:'bg-purple-500/20 text-purple-400' };
        const staColors = { open:'bg-gray-500/20 text-gray-400', in_progress:'bg-frost/20 text-frost', blocked:'bg-red-500/20 text-red-500', done:'bg-green-500/20 text-green-500', obsolete:'bg-gray-700/20 text-gray-600' };
        const priClass = priColors[task.priority] || 'bg-gray-500/20 text-gray-400';
        const staClass = staColors[task.status] || 'bg-gray-500/20 text-gray-400';
      %>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition group">
          <td class="px-4 py-3 text-sm font-mono text-gray-500"><%= task.task_number %></td>
          <td class="px-4 py-3">
            <div class="font-medium text-sm text-gray-200"><%= task.title %></div>
            <% if (task.description) { %>
              <div class="text-xs text-gray-500 mt-0.5 truncate max-w-md"><%= task.description.substring(0, 80) %><%= task.description.length > 80 ? '...' : '' %></div>
            <% } %>
            <% if (task.tags && task.tags.length > 0) { %>
              <div class="flex gap-1 mt-1">
                <% task.tags.forEach(tag => { %>
                  <span class="text-[9px] px-1.5 py-0.5 rounded bg-gray-700 text-gray-400"><%= tag %></span>
                <% }); %>
              </div>
            <% } %>
          </td>
          <td class="px-4 py-3">
            <span class="inline-block px-2 py-0.5 text-xs rounded-full font-medium <%= priClass %>"><%= task.priority %></span>
          </td>
          <td class="px-4 py-3">
            <form method="POST" action="/admin/tasks/update/<%= task.id %>" class="inline">
              <select name="status" onchange="this.form.submit()" class="bg-transparent border-0 text-xs cursor-pointer <%= staClass %> rounded-full px-2 py-0.5 font-medium appearance-none">
                <% statuses.forEach(s => { %>
                  <option value="<%= s %>" <%= task.status === s ? 'selected' : '' %> class="bg-gray-800 text-white"><%= s.replace('_', ' ') %></option>
                <% }); %>
              </select>
            </form>
          </td>
          <td class="px-4 py-3">
            <form method="POST" action="/admin/tasks/update/<%= task.id %>" class="inline">
              <select name="owner" onchange="this.form.submit()" class="bg-transparent border-0 text-xs cursor-pointer text-gray-400 appearance-none">
                <% owners.forEach(o => { %>
                  <option value="<%= o %>" <%= task.owner === o ? 'selected' : '' %> class="bg-gray-800 text-white"><%= o %></option>
                <% }); %>
              </select>
            </form>
          </td>
          <td class="px-4 py-3">
            <% if (task.status !== 'done' && task.status !== 'obsolete') { %>
              <form method="POST" action="/admin/tasks/update/<%= task.id %>" class="inline">
                <input type="hidden" name="status" value="done">
                <button type="submit" class="text-xs text-green-500 hover:text-green-400 transition opacity-0 group-hover:opacity-100">✓ Done</button>
              </form>
            <% } else if (task.completed_by) { %>
              <span class="text-[10px] text-gray-600"><%= task.completed_by %></span>
            <% } %>
          </td>
        </tr>
      <% }); %>
    </tbody>
  </table>
</div>

<div class="text-center text-xs text-gray-600 mt-4">
  <%= tasks.length %> task(s) shown · Source: PostgreSQL · Also available via /tasks in Discord
</div>

<!-- Create Task Modal -->
<div id="create-modal" style="display:none" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm" onclick="if(event.target===this)this.style.display='none'">
  <div class="bg-white dark:bg-darkcard border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full max-w-lg p-6">
    <h2 class="text-xl font-bold mb-4 text-gray-200">New Task</h2>
    <form method="POST" action="/admin/tasks/create">
      <div class="space-y-4">
        <div>
          <label class="block text-xs text-gray-500 mb-1">Title *</label>
          <input type="text" name="title" required
            class="w-full bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm" 
            placeholder="What needs to be done?">
        </div>
        <div>
          <label class="block text-xs text-gray-500 mb-1">Description</label>
          <textarea name="description" rows="3"
            class="w-full bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm"
            placeholder="Optional details..."></textarea>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Priority</label>
            <select name="priority" class="w-full bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
              <option value="medium" selected>Medium</option>
              <option value="critical">Critical</option>
              <option value="high">High</option>
              <option value="low">Low</option>
              <option value="wish">Wish List</option>
            </select>
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Owner</label>
            <select name="owner" class="w-full bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
              <option value="Michael">Michael</option>
              <option value="Holly">Holly</option>
              <option value="Meg">Meg</option>
              <option value="Trinity">Trinity</option>
              <option value="unassigned">Unassigned</option>
            </select>
          </div>
        </div>
      </div>
      <div class="flex justify-end gap-3 mt-6">
        <button type="button" onclick="document.getElementById('create-modal').style.display='none'"
          class="px-4 py-2 text-gray-500 hover:text-gray-300 transition text-sm">Cancel</button>
        <button type="submit"
          class="bg-gradient-to-r from-fire to-frost text-white px-6 py-2 rounded-md text-sm font-medium hover:opacity-90 transition">
          Create Task
        </button>
      </div>
    </form>
  </div>
</div>
