<h1>Revenue</h1>

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

<div class="card" style="display:flex;gap:32px;flex-wrap:wrap">
  <div><p style="color:var(--muted);font-size:11px;text-transform:uppercase">MRR</p><h2 style="margin:0"><%= summary.mrr.toLocaleString() %></h2></div>
  <div><p style="color:var(--muted);font-size:11px;text-transform:uppercase">Active Subscriptions</p><h2 style="margin:0"><%= summary.activeSubscriptions %></h2></div>
  <div><p style="color:var(--muted);font-size:11px;text-transform:uppercase">Trialing</p><h2 style="margin:0"><%= summary.trialingCount %></h2></div>
  <div><p style="color:var(--muted);font-size:11px;text-transform:uppercase">Comped</p><h2 style="margin:0"><%= summary.compedCount %></h2></div>
  <div><p style="color:var(--muted);font-size:11px;text-transform:uppercase">Churn Rate</p><h2 style="margin:0"><%= summary.churn.churnRatePercent %>%</h2></div>
</div>

<div class="card">
  <h2 style="font-size:15px;margin-top:0">Period: <%= new Date(summary.period.from).toLocaleDateString() %> – <%= new Date(summary.period.to).toLocaleDateString() %></h2>
  <p>Canceled in period: <%= summary.churn.canceledInPeriod %> · Active at period start: <%= summary.churn.activeAtStart %></p>
  <p>Plan changes: <span class="badge badge-ok"><%= summary.trend.upgrades %> upgrades</span> <span class="badge badge-warn"><%= summary.trend.downgrades %> downgrades</span></p>
</div>

<form method="get" action="/billing/revenue" class="card" style="display:flex;gap:12px;align-items:flex-end">
  <div><label>From</label><input type="date" name="from" value="<%= query.from || '' %>"></div>
  <div><label>To</label><input type="date" name="to" value="<%= query.to || '' %>"></div>
  <div><button class="btn" type="submit">Update period</button></div>
</form>

<% } %>
