<h1>Notifications</h1>

<form method="get" action="/notifications" class="card" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap">
  <div><label>Category</label>
    <select name="category" onchange="this.form.submit()">
      <option value="" <%= !query.category ? 'selected' : '' %>>All</option>
      <% for (const c of ['system_health','security_threat','billing_payment','support_sla','tenant_onboarding','backup_failure']) { %>
      <option value="<%= c %>" <%= query.category === c ? 'selected' : '' %>><%= c.replace(/_/g,' ') %></option>
      <% } %>
    </select>
  </div>
  <div><label>Severity</label>
    <select name="severity" onchange="this.form.submit()">
      <option value="" <%= !query.severity ? 'selected' : '' %>>All</option>
      <% for (const s of ['info','warning','critical']) { %>
      <option value="<%= s %>" <%= query.severity === s ? 'selected' : '' %>><%= s %></option>
      <% } %>
    </select>
  </div>
  <div><label>Status</label>
    <select name="isRead" onchange="this.form.submit()">
      <option value="" <%= query.isRead === undefined ? 'selected' : '' %>>All</option>
      <option value="false" <%= query.isRead === 'false' ? 'selected' : '' %>>Unread</option>
      <option value="true" <%= query.isRead === 'true' ? 'selected' : '' %>>Read</option>
    </select>
  </div>
  <div><label>Tenant ID</label><input type="text" name="tenantId" value="<%= query.tenantId || '' %>" style="width:120px" placeholder="e.g. 13"></div>
  <div><form method="post" action="/notifications/read-all"><button class="btn" type="submit">Mark All Read</button></form></div>
</form>

<div class="card">
  <table>
    <thead><tr><th>Severity</th><th>Category</th><th>Title</th><th>Tenant</th><th>When</th><th></th></tr></thead>
    <tbody>
      <% for (const n of notifications) { %>
      <tr style="<%= n.is_read ? '' : 'background:#171a2166' %>">
        <td><span class="badge <%= { info: 'badge-ok', warning: 'badge-warn', critical: 'badge-danger' }[n.severity] %>"><%= n.severity %></span></td>
        <td style="font-size:12px;color:var(--muted)"><%= n.category.replace(/_/g, ' ') %></td>
        <td>
          <% if (n.link) { %><a href="<%= n.link %>"><%= n.title %></a><% } else { %><%= n.title %><% } %>
          <% if (n.body) { %><p style="margin:4px 0 0;font-size:12px;color:var(--muted)"><%= n.body %></p><% } %>
        </td>
        <td style="color:var(--muted);font-size:12px">#<%= n.tenant_id || '—' %></td>
        <td style="color:var(--muted);font-size:12px"><%= new Date(n.created_at).toLocaleString() %></td>
        <td>
          <% if (!n.is_read) { %>
          <form method="post" action="/notifications/<%= n.id %>/read"><button class="link-btn" type="submit">Mark read</button></form>
          <% } %>
        </td>
      </tr>
      <% } %>
      <% if (!notifications.length) { %><tr><td colspan="6" style="color:var(--muted)">No notifications match.</td></tr><% } %>
    </tbody>
  </table>
</div>
