<h1>Support Tickets</h1>

<% if (forbidden) { %>
  <div class="alert alert-danger">Your role does not have permission to view support tickets.</div>
<% } else { %>

<form method="get" action="/support/tickets" class="card" style="display:flex;gap:12px;align-items:flex-end">
  <div><label>Status</label>
    <select name="status" onchange="this.form.submit()">
      <option value="" <%= !query.status ? 'selected' : '' %>>All</option>
      <% for (const s of ['open','in_progress','waiting_on_customer','resolved','closed']) { %>
      <option value="<%= s %>" <%= query.status === s ? 'selected' : '' %>><%= s %></option>
      <% } %>
    </select>
  </div>
  <div><label><input type="checkbox" name="overdueOnly" value="true" onchange="this.form.submit()" <%= query.overdueOnly === 'true' ? 'checked' : '' %>> Overdue only</label></div>
</form>

<div class="card">
  <table>
    <thead><tr><th>#</th><th>Subject</th><th>Priority</th><th>Status</th><th>Escalation</th><th>SLA Due</th></tr></thead>
    <tbody>
      <% for (const t of tickets) { %>
      <tr onclick="window.location='/support/tickets/<%= t.id %>'" style="cursor:pointer">
        <td><code class="mono"><%= t.ticket_number %></code></td>
        <td><%= t.subject %></td>
        <td><span class="badge <%= { urgent: 'badge-danger', high: 'badge-warn', medium: 'badge-ok', low: 'badge-ok' }[t.priority] %>"><%= t.priority %></span></td>
        <td><span class="badge <%= { open: 'badge-danger', in_progress: 'badge-warn', waiting_on_customer: 'badge-warn', resolved: 'badge-ok', closed: 'badge-ok' }[t.status] %>"><%= t.status %></span></td>
        <td><%= t.escalation_level %></td>
        <td style="<%= new Date(t.sla_due_at) < new Date() && !['resolved','closed'].includes(t.status) ? 'color:var(--danger);font-weight:600' : '' %>"><%= new Date(t.sla_due_at).toLocaleString() %></td>
      </tr>
      <% } %>
      <% if (!tickets.length) { %><tr><td colspan="6" style="color:var(--muted)">No tickets match.</td></tr><% } %>
    </tbody>
  </table>
</div>

<div class="card" style="max-width:480px">
  <h2 style="font-size:15px;margin-top:0">New Ticket</h2>
  <form method="post" action="/support/tickets">
    <label>Subject</label>
    <input type="text" name="subject" required>
    <label>Requester Email</label>
    <input type="email" name="requesterEmail" required>
    <label>Firm (optional)</label>
    <div data-firm-search style="position:relative">
      <input type="text" data-firm-search-input placeholder="Search firms by name or email…" autocomplete="off">
      <input type="hidden" name="firmId" data-firm-search-hidden>
      <ul data-firm-search-results class="firm-search-results" hidden></ul>
    </div>
    <label>Priority</label>
    <select name="priority"><option value="low">Low</option><option value="medium" selected>Medium</option><option value="high">High</option><option value="urgent">Urgent</option></select>
    <label>Description</label>
    <textarea name="description" rows="3"></textarea>
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Create Ticket</button>
  </form>
</div>

<% } %>
