<!-- Mobile-first submit form — Holly's primary entry point. -->
<!-- Task #166 — REQ-2026-04-14-issue-tracker -->

<div class="max-w-lg mx-auto">
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-xl font-bold">🐛 New Issue</h1>
    <a href="/admin/issues" class="text-sm text-gray-400 hover:text-gray-200">← Back</a>
  </div>

  <!-- csurf reads _csrf from query string for multipart forms (body isn't parsed until multer runs) -->
  <form method="POST" action="/admin/issues?_csrf=<%= encodeURIComponent(csrfToken) %>" enctype="multipart/form-data"
        class="space-y-4 bg-white dark:bg-darkcard p-4 rounded-lg border border-gray-200 dark:border-gray-700">

    <div>
      <label class="block text-sm font-medium mb-1">Title</label>
      <input name="title" required maxlength="255" autofocus
             placeholder="What broke / what's needed?"
             class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-3 text-base text-white focus:ring-cyan-500 focus:border-cyan-500">
    </div>

    <div>
      <label class="block text-sm font-medium mb-1">Description <span class="text-gray-500 text-xs">(optional)</span></label>
      <textarea name="description" rows="4"
                placeholder="Steps to reproduce, expected behavior, context…"
                class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm text-white focus:ring-cyan-500 focus:border-cyan-500"></textarea>
    </div>

    <div class="grid grid-cols-2 gap-3">
      <div>
        <label class="block text-sm font-medium mb-1">Priority</label>
        <select name="priority" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm text-white">
          <% priorities.forEach(function(p) { %>
            <option value="<%= p %>" <%= p === 'medium' ? 'selected' : '' %>><%= p %></option>
          <% }) %>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">Category</label>
        <select name="category" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm text-white">
          <% categories.forEach(function(c) { %>
            <option value="<%= c %>" <%= c === 'general' ? 'selected' : '' %>><%= c %></option>
          <% }) %>
        </select>
      </div>
    </div>

    <div>
      <label class="block text-sm font-medium mb-1">Screenshots <span class="text-gray-500 text-xs">(optional — up to 6)</span></label>
      <!-- accept=image/* + capture hint triggers phone camera roll / camera on mobile -->
      <input type="file" name="screenshots" accept="image/*" multiple
             class="block w-full text-sm text-gray-300 file:mr-3 file:py-2 file:px-3 file:rounded-md file:border-0 file:bg-cyan-600 file:text-white hover:file:bg-cyan-700">
    </div>

    <button type="submit"
            class="w-full bg-cyan-600 hover:bg-cyan-700 text-white font-semibold py-3 rounded-md text-base transition">
      Submit Issue
    </button>
  </form>

  <p class="text-xs text-gray-500 mt-3 text-center">
    Submitting as <strong><%= adminUser?.username || 'Trinity Console' %></strong>
  </p>
</div>
