<div class="page-header d-print-none">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title"><%= title %></h2>
      <div class="text-secondary mt-1">Public API: <code>GET /api/v1/pricing-packages</code> · sorted by price</div>
    </div>
    <div class="col-auto ms-auto">
      <a href="/admin/pricing-packages/new" class="btn btn-primary">Add Package</a>
    </div>
  </div>
</div>

<div class="card">
  <%- include('../../partials/adminPaginationTop') %>
  <div class="table-responsive">
    <table class="table table-vcenter card-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
          <th>Period</th>
          <th>Features</th>
          <th>Popular</th>
          <th>Status</th>
          <th>Created</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% if (!packages.length) { %>
        <tr><td colspan="8" class="text-secondary text-center py-4">No pricing packages yet.</td></tr>
        <% } %>
        <% packages.forEach(function(p) { %>
        <tr>
          <td>
            <div class="fw-medium"><%= p.name %></div>
            <div class="text-secondary small"><%= p.slug %></div>
          </td>
          <td>
            <% if (p.talkToSales || p.talk_to_sales) { %>
            <span class="badge bg-purple-lt">Talk to Sales</span>
            <% } else { %>
            <%= Number(p.price).toFixed(2) %> <%= p.currency %>
            <% } %>
          </td>
          <td><span class="badge bg-azure-lt"><%= p.billingPeriod %></span></td>
          <td class="text-secondary small"><%= (p.features || []).length %> items</td>
          <td><% if (p.isPopular) { %><span class="badge bg-yellow">Popular</span><% } else { %>—<% } %></td>
          <td>
            <span class="badge bg-<%= p.status === 'active' ? 'success' : p.status === 'disabled' ? 'secondary' : 'dark' %>"><%= p.status %></span>
          </td>
          <td><%- include('../../partials/adminDateTime', { value: p.createdAt }) %></td>
          <td>
            <div class="btn-list flex-nowrap">
              <a href="/admin/pricing-packages/<%= p.id %>/edit" class="btn btn-sm btn-action-icon" title="Edit"><i class="ti ti-pencil"></i></a>
              <% if (p.status !== 'active') { %>
              <form action="/admin/pricing-packages/<%= p.id %>/status" method="post" class="d-inline">
                <input type="hidden" name="status" value="active">
                <button type="submit" class="btn btn-sm btn-outline-success" title="Enable">Enable</button>
              </form>
              <% } %>
              <% if (p.status === 'active') { %>
              <form action="/admin/pricing-packages/<%= p.id %>/status" method="post" class="d-inline">
                <input type="hidden" name="status" value="disabled">
                <button type="submit" class="btn btn-sm btn-outline-secondary" title="Disable">Disable</button>
              </form>
              <% } %>
              <% if (p.status !== 'retired') { %>
              <form action="/admin/pricing-packages/<%= p.id %>/status" method="post" class="d-inline">
                <input type="hidden" name="status" value="retired">
                <button type="submit" class="btn btn-sm btn-outline-dark" title="Retire">Retire</button>
              </form>
              <% } %>
              <form action="/admin/pricing-packages/<%= p.id %>/delete" method="post" class="d-inline delete-form"
                data-delete-title="Delete pricing package?"
                data-delete-message="This will permanently remove &quot;<%= p.name %>&quot; from the pricing API."
                data-delete-consequences="Package removed from GET /api/v1/pricing-packages|Mobile pricing screen will no longer show this plan|Action recorded in Audit Logs with full snapshot">
                <button type="submit" class="btn btn-sm btn-action-icon btn-outline-danger" title="Delete"><i class="ti ti-trash"></i></button>
              </form>
            </div>
          </td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
  <%- include('../../partials/adminPaginationBottom') %>
</div>
