<h1>Subscriptions</h1>

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

<% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>
<% if (query.dunning) { %><div class="alert alert-ok">Dunning cycle complete: <%= query.dunning %></div><% } %>

<form method="get" action="/billing/subscriptions" 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 ['trialing','active','past_due','canceled','comped']) { %>
      <option value="<%= s %>" <%= query.status === s ? 'selected' : '' %>><%= s %></option>
      <% } %>
    </select>
  </div>
  <div><form method="post" action="/billing/dunning/run"><button class="btn btn-danger" type="submit">Run Dunning Cycle Now</button></form></div>
</form>

<div class="card">
  <table>
    <thead><tr><th>Firm</th><th>Plan</th><th>Status</th><th>Seats</th><th>Price</th></tr></thead>
    <tbody>
      <% for (const s of subscriptions) { %>
      <tr onclick="window.location='/billing/subscriptions/<%= s.id %>'" style="cursor:pointer">
        <td><%= s.firm_name %> <span style="color:var(--muted);font-size:11px">#<%= s.firm_id %></span></td>
        <td><%= s.plan_name %><% if (s.is_comped) { %> <span class="badge badge-warn">comped</span><% } %></td>
        <td><span class="badge <%= { active: 'badge-ok', trialing: 'badge-warn', past_due: 'badge-danger', canceled: 'badge-danger', comped: 'badge-ok' }[s.status] %>"><%= s.status %></span></td>
        <td><%= s.seats %></td>
        <td><%= s.price_currency %> <%= (s.price_override_amount != null ? s.price_override_amount : s.price_amount) %></td>
      </tr>
      <% } %>
      <% if (!subscriptions.length) { %><tr><td colspan="5" style="color:var(--muted)">No subscriptions match.</td></tr><% } %>
    </tbody>
  </table>
</div>

<div class="card" style="max-width:420px">
  <h2 style="font-size:15px;margin-top:0">New Subscription</h2>
  <form method="post" action="/billing/subscriptions">
    <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>Plan</label>
    <select name="planId" required>
      <% for (const p of plans) { %><option value="<%= p.id %>"><%= p.name %> — <%= p.price_currency %> <%= p.price_amount %>/<%= p.billing_interval %></option><% } %>
    </select>
    <div style="display:flex;gap:12px">
      <div style="flex:1"><label>Seats</label><input type="number" name="seats" value="1"></div>
      <div style="flex:1"><label>Trial Days (0 = none)</label><input type="number" name="trialDays" value="0"></div>
    </div>
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Create Subscription</button>
  </form>
</div>

<% } %>
