<h1>Data Subject Access Requests</h1>

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

<form method="get" action="/compliance/dsar" 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 ['received','in_progress','fulfilled','rejected']) { %>
      <option value="<%= s %>" <%= query.status === s ? 'selected' : '' %>><%= s %></option>
      <% } %>
    </select>
  </div>
</form>

<div class="card">
  <table>
    <thead><tr><th>Subject</th><th>Type</th><th>Firm</th><th>Status</th><th>Due</th><th></th></tr></thead>
    <tbody>
      <% for (const r of requests) { %>
      <tr>
        <td><%= r.subject_name %> <span style="color:var(--muted);font-size:11px"><%= r.subject_email %></span></td>
        <td><%= r.request_type %></td>
        <td>#<%= r.firm_id %></td>
        <td><span class="badge <%= { received: 'badge-warn', in_progress: 'badge-warn', fulfilled: 'badge-ok', rejected: 'badge-danger' }[r.status] %>"><%= r.status %></span></td>
        <td style="<%= new Date(r.due_date) < new Date() && !['fulfilled','rejected'].includes(r.status) ? 'color:var(--danger);font-weight:600' : '' %>"><%= new Date(r.due_date).toLocaleDateString() %></td>
        <td>
          <% if (!['fulfilled','rejected'].includes(r.status)) { %>
          <form method="post" action="/compliance/dsar/<%= r.id %>" style="display:inline">
            <input type="hidden" name="status" value="fulfilled">
            <button class="link-btn" type="submit">Mark Fulfilled</button>
          </form>
          <% } %>
        </td>
      </tr>
      <% } %>
      <% if (!requests.length) { %><tr><td colspan="6" style="color:var(--muted)">No DSARs logged.</td></tr><% } %>
    </tbody>
  </table>
</div>

<div class="card" style="max-width:480px">
  <h2 style="font-size:15px;margin-top:0">Log New DSAR</h2>
  <form method="post" action="/compliance/dsar">
    <label>Firm</label>
    <div data-firm-search style="position:relative">
      <input type="text" data-firm-search-input placeholder="Search firms by name or email…" autocomplete="off" required>
      <input type="hidden" name="firmId" data-firm-search-hidden>
      <ul data-firm-search-results class="firm-search-results" hidden></ul>
    </div>
    <label>Subject Name</label>
    <input type="text" name="subjectName" required>
    <label>Subject Email</label>
    <input type="email" name="subjectEmail" required>
    <label>Request Type</label>
    <select name="requestType">
      <option value="access">Access</option>
      <option value="deletion">Deletion</option>
      <option value="correction">Correction</option>
      <option value="portability">Portability</option>
    </select>
    <label>Notes</label>
    <textarea name="notes" rows="3"></textarea>
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Log Request</button>
  </form>
</div>

<% } %>
