<!-- Issue Tracker — Trinity Console -->
<!-- Task #166 — REQ-2026-04-14-issue-tracker (Chronicler #89) -->

<style>
  .chip { cursor:pointer; padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:500; border:1px solid transparent; transition:all 0.15s; }
  .chip.active { background:#06b6d4; color:#fff; border-color:#06b6d4; }
  .chip.inactive { background:#374151; color:#9ca3af; border-color:#4b5563; }
  .chip:hover { opacity:0.85; }
  .pri-critical { background:#7f1d1d; color:#fecaca; }
  .pri-high     { background:#9a3412; color:#fed7aa; }
  .pri-medium   { background:#374151; color:#d1d5db; }
  .pri-low      { background:#1e3a8a; color:#bfdbfe; }
  .st-open        { background:#1e40af; color:#bfdbfe; }
  .st-in_progress { background:#065f46; color:#a7f3d0; }
  .st-blocked     { background:#7f1d1d; color:#fecaca; }
  .st-resolved    { background:#374151; color:#9ca3af; }
  .st-closed      { background:#1f2937; color:#6b7280; }
</style>

<!-- Header -->
<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-bold">🐛 Issues</h1>
  <a href="/admin/issues/new" class="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded-md text-sm font-medium transition">+ New Issue</a>
</div>

<!-- 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">Open</div>
    <div class="text-2xl font-bold mt-1 text-blue-400"><%= stats.open %></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-green-400"><%= 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">Urgent</div>
    <div class="text-2xl font-bold mt-1 text-fire"><%= stats.urgent %></div>
  </div>
</div>

<!-- Filter bar -->
<form method="get" action="/admin/issues" class="flex flex-wrap gap-2 mb-4 items-center">
  <select name="status" onchange="this.form.submit()" class="bg-gray-800 text-gray-200 text-xs rounded px-2 py-1 border border-gray-700">
    <option value="">All active</option>
    <% statuses.forEach(function(s) { %>
      <option value="<%= s %>" <%= filters.status === s ? 'selected' : '' %>><%= s %></option>
    <% }) %>
  </select>
  <select name="priority" onchange="this.form.submit()" class="bg-gray-800 text-gray-200 text-xs rounded px-2 py-1 border border-gray-700">
    <option value="">Any priority</option>
    <% priorities.forEach(function(p) { %>
      <option value="<%= p %>" <%= filters.priority === p ? 'selected' : '' %>><%= p %></option>
    <% }) %>
  </select>
  <select name="category" onchange="this.form.submit()" class="bg-gray-800 text-gray-200 text-xs rounded px-2 py-1 border border-gray-700">
    <option value="">Any category</option>
    <% categories.forEach(function(c) { %>
      <option value="<%= c %>" <%= filters.category === c ? 'selected' : '' %>><%= c %></option>
    <% }) %>
  </select>
  <select name="sort" onchange="this.form.submit()" class="bg-gray-800 text-gray-200 text-xs rounded px-2 py-1 border border-gray-700">
    <option value="" <%= !filters.sort ? 'selected' : '' %>>Default</option>
    <option value="newest"   <%= filters.sort === 'newest' ? 'selected' : '' %>>Newest</option>
    <option value="updated"  <%= filters.sort === 'updated' ? 'selected' : '' %>>Recently updated</option>
    <option value="priority" <%= filters.sort === 'priority' ? 'selected' : '' %>>Priority</option>
  </select>
  <label class="text-xs text-gray-400 flex items-center gap-1 ml-2">
    <input type="checkbox" name="all" value="1" <%= filters.all ? 'checked' : '' %> onchange="this.form.submit()">
    Show resolved/closed
  </label>
  <% if (filters.status || filters.priority || filters.category || filters.sort || filters.all) { %>
    <a href="/admin/issues" class="text-xs text-cyan-400 hover:underline ml-2">Clear</a>
  <% } %>
</form>

<!-- List -->
<div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
  <% if (issues.length === 0) { %>
    <div class="p-6 text-center text-gray-500">No issues match the current filters.</div>
  <% } else { %>
    <table class="w-full text-sm">
      <thead class="bg-gray-100 dark:bg-gray-800 text-xs uppercase text-gray-500 dark:text-gray-400">
        <tr>
          <th class="px-3 py-2 text-left">#</th>
          <th class="px-3 py-2 text-left">Title</th>
          <th class="px-3 py-2 text-left">Status</th>
          <th class="px-3 py-2 text-left">Priority</th>
          <th class="px-3 py-2 text-left">Category</th>
          <th class="px-3 py-2 text-left">Submitter</th>
          <th class="px-3 py-2 text-left">Updated</th>
        </tr>
      </thead>
      <tbody>
        <% issues.forEach(function(i) { %>
          <tr class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/40 cursor-pointer"
              onclick="location.href='/admin/issues/<%= i.id %>'">
            <td class="px-3 py-2 font-mono text-gray-400">#<%= i.issue_number %></td>
            <td class="px-3 py-2">
              <%= i.title %>
              <% if (i.attachment_count > 0) { %><span class="text-gray-500 text-xs">📎<%= i.attachment_count %></span><% } %>
              <% if (i.comment_count > 0) { %><span class="text-gray-500 text-xs">💬<%= i.comment_count %></span><% } %>
            </td>
            <td class="px-3 py-2"><span class="chip st-<%= i.status %>"><%= i.status %></span></td>
            <td class="px-3 py-2"><span class="chip pri-<%= i.priority %>"><%= i.priority %></span></td>
            <td class="px-3 py-2 text-gray-400 text-xs"><%= i.category %></td>
            <td class="px-3 py-2 text-gray-400 text-xs"><%= i.submitted_by %></td>
            <td class="px-3 py-2 text-gray-500 text-xs"><%= new Date(i.updated_at).toLocaleString() %></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</div>
