<% const pageTitle = 'All Approved Users · ETA Admin'; %>
<%- include('partials/head', { pageTitle }) %>
<body class="app">
  <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation" aria-expanded="false">&#9776;</button>
  <div class="scrim" id="scrim" hidden style="display: none"></div>
  <%- include('partials/sidebar') %>

  <main class="main">
    <header class="main__header">
      <div>
        <h1 class="main__title">All Approved Users</h1>
        <p class="muted">
          <%= users.length %> approved user<%= users.length === 1 ? '' : 's' %>
          in the <code>etas</code> table.
        </p>
      </div>
      <div class="bulk-actions">
        <a href="/approvals" class="btn btn--ghost">&#8592; Back to Approvals</a>
        <a href="/approvals/blocked" class="btn btn--ghost">Blocked Users</a>
        <a href="/approvals/approved.pdf" class="btn btn--primary" download>Download PDF</a>
      </div>
    </header>

    <% if (flash) { %>
      <div class="alert alert--<%= flash.type === 'success' ? 'success' : 'error' %>" role="status">
        <%= flash.message %>
      </div>
    <% } %>

    <!-- Live region: AJAX results are announced here without a page reload. -->
    <div class="alert alert--success" data-live-flash role="status" hidden style="display: none"></div>

    <% if (users.length === 0) { %>
      <div class="empty">
        <div class="empty__icon" aria-hidden="true">&#10003;</div>
        <h2 class="empty__title">No approved users yet</h2>
        <p class="muted">Users appear here as soon as you approve them on the Approvals page.</p>
        <a href="/approvals" class="btn btn--primary">Go to Approvals</a>
      </div>
    <% } else { %>
      <div class="table-wrap">
        <table class="table">
          <thead>
            <tr>
              <th scope="col" class="ta-right">#</th>
              <th scope="col">Name</th>
              <th scope="col">Phone Number</th>
              <th scope="col">Picked Number</th>
              <th scope="col" class="ta-right">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% users.forEach(function (user, index) { %>
              <tr class="<%= user.blocked ? 'is-blocked' : '' %>" data-approval-id="<%= user.id %>">
                <td data-label="#" class="ta-right num"><%= index + 1 %></td>
                <td data-label="Name">
                  <strong><%= user.name || 'Unnamed user' %></strong>
                  <span class="badge badge--blocked" data-blocked-badge
                        <%- user.blocked ? '' : 'hidden style="display: none"' %>>Blocked</span>
                </td>
                <td data-label="Phone Number" class="num"><%= user.phone_number || '—' %></td>
                <td data-label="Picked Number">
                  <span class="pay-cell__number" data-picked-number><%= user.picked_number || '—' %></span>
                </td>
                <td data-label="Actions">
                  <div class="row-actions">
                    <%- include('partials/user-actions', {
                          user,
                          csrfToken,
                          returnTo: '/approvals/approved',
                          buttonClass: 'btn--sm',
                        }) %>
                  </div>
                </td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    <% } %>
  </main>

  <%- include('partials/confirm-modal') %>

  <script src="/static/js/app.js?v=<%= typeof assetVersion !== 'undefined' ? assetVersion : '1' %>" defer></script>
</body>
</html>
