<%- include('../partials/head', { title, bodyClass: 'app-page admin-page' }) %>
<%- include('../partials/app-header') %>

<main class="app-main">
  <%- include('../partials/admin-nav') %>
  <section class="page-title">
    <p class="eyebrow">Admin</p>
    <h1>Usuarios</h1>
    <p>Modifiez les rôles et le statut d’abonnement.</p>
  </section>

  <div class="table-card">
    <table>
      <thead>
        <tr><th>Usuario</th><th>Rôle</th><th>Suscripción</th><th></th></tr>
      </thead>
      <tbody>
        <% if (!users.length) { %>
          <tr><td colspan="4">No hay usuarios.</td></tr>
        <% } %>
        <% users.forEach((user) => { %>
          <tr>
            <td><strong><%= user.name %></strong><br><small><%= user.email %></small></td>
            <td colspan="3">
              <form method="post" action="/admin/users/<%= user.id %>" class="inline-form">
                <select name="role">
                  <% ['user', 'pro', 'admin'].forEach((role) => { %>
                    <option value="<%= role %>" <%= user.role === role ? 'selected' : '' %>><%= role %></option>
                  <% }) %>
                </select>
                <select name="subscription_status">
                  <% ['free', 'active', 'canceled'].forEach((status) => { %>
                    <option value="<%= status %>" <%= user.subscription_status === status ? 'selected' : '' %>><%= status %></option>
                  <% }) %>
                </select>
                <button class="btn btn-soft btn-small" type="submit">Enregistrer</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>

  <% if (pagination && pagination.totalPages > 1) { %>
    <nav class="pagination admin-users-pagination" aria-label="Pagination utilisateurs">
      <% if (pagination.page > 1) { %>
        <a class="btn btn-soft btn-small" href="/admin/users?page=<%= pagination.page - 1 %>">Précédent</a>
      <% } else { %>
        <span class="btn btn-soft btn-small disabled">Précédent</span>
      <% } %>
      <span>Page <%= pagination.page %> / <%= pagination.totalPages %> · <%= pagination.total %> utilisateur<%= pagination.total > 1 ? 's' : '' %></span>
      <% if (pagination.page < pagination.totalPages) { %>
        <a class="btn btn-soft btn-small" href="/admin/users?page=<%= pagination.page + 1 %>">Suivant</a>
      <% } else { %>
        <span class="btn btn-soft btn-small disabled">Suivant</span>
      <% } %>
    </nav>
  <% } %>
</main>

<%- include('../partials/bottom-nav') %>
<%- include('../partials/footer') %>
