<!-- Issue detail view -->
<!-- Task #166 — REQ-2026-04-14-issue-tracker -->

<style>
  .chip { display:inline-block; padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:500; }
  .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; }
  .thumb { width:140px; height:140px; object-fit:cover; border-radius:6px; border:1px solid #374151; cursor:pointer; }
  .lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:50; }
  .lightbox.open { display:flex; }
  .lightbox img { max-width:95vw; max-height:95vh; }
</style>

<div class="max-w-3xl mx-auto">
  <div class="flex items-center justify-between mb-4">
    <a href="/admin/issues" class="text-sm text-gray-400 hover:text-gray-200">← Back to issues</a>
    <span class="text-xs text-gray-500">Submitted by <strong><%= issue.submitted_by %></strong> · <%= new Date(issue.created_at).toLocaleString() %></span>
  </div>

  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-5 mb-4">
    <div class="flex items-start justify-between gap-3 mb-3">
      <h1 class="text-2xl font-bold">
        <span class="text-gray-500 font-mono">#<%= issue.issue_number %></span>
        <%= issue.title %>
      </h1>
      <div class="flex gap-2 shrink-0">
        <span class="chip st-<%= issue.status %>"><%= issue.status %></span>
        <span class="chip pri-<%= issue.priority %>"><%= issue.priority %></span>
        <span class="chip" style="background:#1f2937;color:#9ca3af;"><%= issue.category %></span>
      </div>
    </div>

    <% if (issue.description) { %>
      <div class="text-gray-300 whitespace-pre-wrap mt-3"><%= issue.description %></div>
    <% } else { %>
      <div class="text-gray-500 italic mt-3">No description provided.</div>
    <% } %>

    <!-- Screenshots -->
    <% if (issue.attachments && issue.attachments.length > 0) { %>
      <div class="mt-4">
        <div class="text-xs uppercase tracking-wider text-gray-500 mb-2">Screenshots (<%= issue.attachments.length %>)</div>
        <div class="flex flex-wrap gap-2">
          <% issue.attachments.forEach(function(a) { %>
            <img src="/admin/issues/attachments/<%= a.filename %>" alt="<%= a.original_name %>"
                 class="thumb" onclick="openLightbox(this.src)">
          <% }) %>
        </div>
      </div>
    <% } %>

    <!-- Upload more -->
    <!-- csurf reads _csrf from query string for multipart forms -->
    <form method="POST" action="/admin/issues/<%= issue.id %>/upload?_csrf=<%= encodeURIComponent(csrfToken) %>" enctype="multipart/form-data" class="mt-4">
      <label class="text-xs text-gray-500">Add screenshots</label>
      <div class="flex gap-2 mt-1">
        <input type="file" name="screenshots" accept="image/*" multiple
               class="block flex-1 text-xs text-gray-300 file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:bg-gray-700 file:text-white">
        <button type="submit" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-xs">Upload</button>
      </div>
    </form>
  </div>

  <!-- Workflow controls -->
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <form method="POST" action="/admin/issues/<%= issue.id %>/status" class="flex items-center gap-2">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <label class="text-xs text-gray-500 w-16">Status</label>
        <select name="status" class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm">
          <% statuses.forEach(function(s) { %>
            <option value="<%= s %>" <%= issue.status === s ? 'selected' : '' %>><%= s %></option>
          <% }) %>
        </select>
        <button class="bg-cyan-600 hover:bg-cyan-700 text-white px-3 py-1 rounded text-xs">Save</button>
      </form>

      <form method="POST" action="/admin/issues/<%= issue.id %>/assign" class="flex items-center gap-2">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <label class="text-xs text-gray-500 w-16">Assignee</label>
        <select name="assigned_to" class="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm">
          <% assignees.forEach(function(a) { %>
            <option value="<%= a %>" <%= issue.assigned_to === a ? 'selected' : '' %>><%= a %></option>
          <% }) %>
        </select>
        <button class="bg-cyan-600 hover:bg-cyan-700 text-white px-3 py-1 rounded text-xs">Save</button>
      </form>
    </div>
    <% if (issue.resolved_at) { %>
      <div class="text-xs text-gray-500 mt-3">Resolved <%= new Date(issue.resolved_at).toLocaleString() %> by <strong><%= issue.resolved_by %></strong></div>
    <% } %>
  </div>

  <!-- Comments -->
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <h2 class="text-sm font-semibold mb-3 text-gray-400 uppercase tracking-wider">Comments (<%= issue.comments.length %>)</h2>
    <% if (issue.comments.length === 0) { %>
      <div class="text-gray-500 text-sm italic mb-3">No comments yet.</div>
    <% } else { %>
      <div class="space-y-3 mb-4">
        <% issue.comments.forEach(function(c) { %>
          <div class="border-l-2 border-cyan-700 pl-3">
            <div class="text-xs text-gray-500">
              <strong class="text-gray-300"><%= c.author %></strong> · <%= new Date(c.created_at).toLocaleString() %>
            </div>
            <div class="text-sm text-gray-200 whitespace-pre-wrap mt-1"><%= c.content %></div>
          </div>
        <% }) %>
      </div>
    <% } %>

    <form method="POST" action="/admin/issues/<%= issue.id %>/comments">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <textarea name="content" rows="3" required placeholder="Add a comment…"
                class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm text-white"></textarea>
      <button type="submit" class="mt-2 bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded text-sm">Comment</button>
    </form>
  </div>
</div>

<div id="lightbox" class="lightbox" onclick="this.classList.remove('open')">
  <img id="lightbox-img" src="" alt="">
</div>

<script>
  function openLightbox(src) {
    document.getElementById('lightbox-img').src = src;
    document.getElementById('lightbox').classList.add('open');
  }
</script>
