<h1>Breach Incidents</h1>

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

<div class="card">
  <table>
    <thead><tr><th>Title</th><th>Severity</th><th>Status</th><th>Discovered</th></tr></thead>
    <tbody>
      <% for (const i of incidents) { %>
      <tr onclick="window.location='/compliance/breach/<%= i.id %>'" style="cursor:pointer">
        <td><%= i.title %></td>
        <td><span class="badge <%= { low: 'badge-ok', medium: 'badge-warn', high: 'badge-danger', critical: 'badge-danger' }[i.severity] %>"><%= i.severity %></span></td>
        <td><span class="badge <%= { investigating: 'badge-danger', contained: 'badge-warn', notifying: 'badge-warn', closed: 'badge-ok' }[i.status] %>"><%= i.status %></span></td>
        <td><%= new Date(i.discovered_at).toLocaleString() %></td>
      </tr>
      <% } %>
      <% if (!incidents.length) { %><tr><td colspan="4" style="color:var(--muted)">No breach incidents logged.</td></tr><% } %>
    </tbody>
  </table>
</div>

<div class="card" style="max-width:480px">
  <h2 style="font-size:15px;margin-top:0">Log New Incident</h2>
  <form method="post" action="/compliance/breach">
    <label>Title</label>
    <input type="text" name="title" required>
    <label>Severity</label>
    <select name="severity"><option value="low">Low</option><option value="medium" selected>Medium</option><option value="high">High</option><option value="critical">Critical</option></select>
    <label>Description</label>
    <textarea name="description" rows="4"></textarea>
    <button class="btn btn-danger" type="submit" style="width:100%;margin-top:16px">Log Incident</button>
  </form>
</div>

<% } %>
