<h1>Firms</h1>

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

<form method="get" action="/tenants" class="card" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap">
  <div><label>Status</label>
    <select name="status" onchange="this.form.submit()">
      <option value="" <%= !query.status ? 'selected' : '' %>>All</option>
      <option value="pending_review" <%= query.status === 'pending_review' ? 'selected' : '' %>>Pending Review</option>
      <option value="active" <%= query.status === 'active' ? 'selected' : '' %>>Active</option>
      <option value="suspended" <%= query.status === 'suspended' ? 'selected' : '' %>>Suspended</option>
      <option value="offboarding" <%= query.status === 'offboarding' ? 'selected' : '' %>>Offboarding</option>
      <option value="deleted" <%= query.status === 'deleted' ? 'selected' : '' %>>Deleted</option>
    </select>
  </div>
  <div><label>Search</label><input type="text" name="search" value="<%= query.search || '' %>" placeholder="Firm name or email…"></div>
  <div><button class="btn" type="submit">Filter</button></div>
</form>

<div class="card">
  <table>
    <thead><tr><th>Firm</th><th>Status</th><th>Plan</th><th>Residency</th><th>Created</th></tr></thead>
    <tbody>
      <% for (const f of firms) { %>
      <tr onclick="window.location='/tenants/<%= f.id %>'" style="cursor:pointer">
        <td><%= f.name %></td>
        <td>
          <% const badgeClass = { active: 'badge-ok', pending_review: 'badge-warn', suspended: 'badge-danger', offboarding: 'badge-warn', deleted: 'badge-danger' }[f.status] || ''; %>
          <span class="badge <%= badgeClass %>"><%= f.status %></span>
        </td>
        <td><%= f.plan_tier %></td>
        <td><%= f.data_residency %></td>
        <td><%= new Date(f.created_at).toLocaleDateString() %></td>
      </tr>
      <% } %>
      <% if (!firms.length) { %><tr><td colspan="5" style="color:var(--muted)">No firms match.</td></tr><% } %>
    </tbody>
  </table>
</div>

<% } %>
