<% if (!incident) { %>
  <h1>Breach Incident</h1>
  <div class="alert alert-danger"><%= error || 'Not found.' %></div>
<% } else { %>

<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
  <h1 style="margin:0"><%= incident.title %></h1>
  <span class="badge <%= { low: 'badge-ok', medium: 'badge-warn', high: 'badge-danger', critical: 'badge-danger' }[incident.severity] %>"><%= incident.severity %></span>
  <span class="badge <%= { investigating: 'badge-danger', contained: 'badge-warn', notifying: 'badge-warn', closed: 'badge-ok' }[incident.status] %>"><%= incident.status %></span>
</div>

<div class="card">
  <p><%= incident.description || 'No description.' %></p>
  <p>Discovered: <%= new Date(incident.discovered_at).toLocaleString() %></p>
  <% if (incident.notified_at) { %><p>Notified: <%= new Date(incident.notified_at).toLocaleString() %> — <%= incident.notification_recipients %></p><% } %>

  <h2 style="font-size:14px;margin-top:20px">Timeline</h2>
  <% const timeline = JSON.parse(incident.timeline || '[]'); %>
  <ul style="font-size:13px;padding-left:18px">
    <% for (const entry of timeline.slice().reverse()) { %>
    <li><strong><%= new Date(entry.at).toLocaleString() %></strong> — <%= entry.by %>: <%= entry.note %></li>
    <% } %>
  </ul>
</div>

<div class="card" style="max-width:480px">
  <h2 style="font-size:15px;margin-top:0">Add Update</h2>
  <form method="post" action="/compliance/breach/<%= incident.id %>">
    <label>Note</label>
    <textarea name="note" rows="3" required></textarea>
    <label>Change Status</label>
    <select name="status">
      <option value="">— no change —</option>
      <option value="investigating">Investigating</option>
      <option value="contained">Contained</option>
      <option value="notifying">Notifying</option>
      <option value="closed">Closed</option>
    </select>
    <label><input type="checkbox" name="notified" value="true"> Mark notification sent</label>
    <label>Notification Recipients (if marking sent)</label>
    <input type="text" name="notificationRecipients" placeholder="e.g. affected firms, Data Protection Commission">
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Add Update</button>
  </form>
</div>

<% } %>
