<%- include('partials/page-start', { pageTitle, activePage }) %>

<section class="panel">
  <div class="panel-header"><div><h2 class="panel-title">Subscriptions</h2><p class="panel-subtitle"><%= result.total %> matching subscription(s)</p></div></div>
  <form method="get" action="<%= adminUrl('/subscriptions') %>" class="filter-grid">
    <label class="field"><span>Status</span><select class="input" name="status"><option value="">All statuses</option><% ['active','expired','cancelled','inactive'].forEach((status) => { %><option value="<%= status %>" <%= filters.status === status ? 'selected' : '' %>><%= status %></option><% }) %></select></label>
    <label class="field"><span>Plan</span><select class="input" name="plan"><option value="">All plans</option><option value="free" <%= filters.plan === 'free' ? 'selected' : '' %>>Free</option><option value="pro" <%= filters.plan === 'pro' ? 'selected' : '' %>>Pro</option><option value="vip" <%= filters.plan === 'vip' ? 'selected' : '' %>>VIP</option></select></label>
    <div class="flex items-end gap-2"><button class="btn btn-primary" type="submit">Apply filters</button><a class="btn btn-secondary" href="<%= adminUrl('/subscriptions') %>">Reset</a></div>
  </form>

  <% if (!result.items.length) { %><div class="empty-state">No subscriptions match these filters.</div><% } else { %>
    <div class="hidden overflow-x-auto xl:block">
      <table class="admin-table"><thead><tr><th>ID</th><th>User</th><th>Plan</th><th>Status</th><th>Started</th><th>Expires</th><th>Source order</th><th>Actions</th></tr></thead><tbody>
        <% result.items.forEach((sub) => { %><tr>
          <td>#<%= sub.id %></td>
          <td><a class="table-link" href="<%= adminUrl('/users/' + sub.user_id) %>"><%= sub.user_name || sub.user_email || ('User #' + sub.user_id) %></a><div class="max-w-56 truncate text-xs text-slate-500"><%= sub.user_email %></div></td>
          <td><%= sub.plan_name %></td><td><span class="<%= statusBadgeClass(sub.status) %>"><%= sub.status %></span></td>
          <td><%= formatDate(sub.started_at) %></td><td><%= formatDate(sub.expires_at) %></td><td><%= sub.source_order_id || '—' %></td>
          <td><div class="flex min-w-64 items-end gap-2">
            <form method="post" action="<%= adminUrl('/subscriptions/' + sub.id + '/extend') %>" class="flex items-center gap-2" data-confirm="Extend this subscription?">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>"><input class="input w-20" type="number" min="1" max="3650" name="days" value="30" aria-label="Days"><button class="btn btn-secondary" type="submit">Extend</button>
            </form>
            <form method="post" action="<%= adminUrl('/subscriptions/' + sub.id + '/cancel') %>" data-confirm="Cancel this subscription?"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn btn-danger-outline" type="submit">Cancel</button></form>
          </div></td>
        </tr><% }) %>
      </tbody></table>
    </div>
    <div class="space-y-3 xl:hidden">
      <% result.items.forEach((sub) => { %><article class="mobile-record">
        <div class="flex items-start justify-between gap-3"><div class="min-w-0"><a class="truncate font-medium text-white" href="<%= adminUrl('/users/' + sub.user_id) %>"><%= sub.user_email || sub.user_name || ('User #' + sub.user_id) %></a><div class="mt-1 text-xs text-slate-500">Subscription #<%= sub.id %></div></div><span class="<%= statusBadgeClass(sub.status) %>"><%= sub.status %></span></div>
        <div class="mt-3 grid grid-cols-2 gap-3 text-sm"><div><span class="block text-xs text-slate-500">Plan</span><%= sub.plan_name %></div><div class="text-right"><span class="block text-xs text-slate-500">Expires</span><%= formatDate(sub.expires_at, false) %></div></div>
        <div class="mt-4 grid grid-cols-[1fr_auto] gap-2"><form method="post" action="<%= adminUrl('/subscriptions/' + sub.id + '/extend') %>" class="flex gap-2" data-confirm="Extend this subscription?"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><input class="input min-w-0" type="number" min="1" max="3650" name="days" value="30"><button class="btn btn-secondary" type="submit">Extend</button></form><form method="post" action="<%= adminUrl('/subscriptions/' + sub.id + '/cancel') %>" data-confirm="Cancel this subscription?"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn btn-danger-outline" type="submit">Cancel</button></form></div>
      </article><% }) %>
    </div>
    <%- include('partials/pagination', { result }) %>
  <% } %>
</section>

<%- include('partials/page-end', { activePage }) %>
