<%
  const pageTitle = 'Blocked Users · ETA Admin';
  function statusOf(approved) {
    if (approved === true) return { key: 'approved', label: 'Approved' };
    if (approved === false) return { key: 'disapproved', label: 'Disapproved' };
    return { key: 'pending', label: 'Pending' };
  }
%>
<%- 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">Blocked Users</h1>
        <p class="muted">
          <span id="blockedCount"><%= users.length %></span>
          <span id="blockedCountNoun">blocked user<%= users.length === 1 ? '' : 's' %></span>
          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/approved" class="btn btn--primary">All Approved Users</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>

    <p class="muted">
      This is the one place a blocked user is always reachable: the list depends
      only on <code>blocked IS TRUE</code>, not on a submission or an approval, so
      nobody can end up blocked with no way to undo it.
    </p>

    <div class="empty" id="blockedEmpty" <%- users.length ? 'hidden style="display: none"' : '' %>>
      <div class="empty__icon" aria-hidden="true">&#128274;</div>
      <h2 class="empty__title">No blocked users</h2>
      <p class="muted">Block a user from the Approvals page and they will be listed here.</p>
      <a href="/approvals" class="btn btn--primary">Go to Approvals</a>
    </div>

    <div class="table-wrap" id="blockedTable" <%- users.length ? '' : 'hidden style="display: none"' %>>
      <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">Approval</th>
            <th scope="col" class="ta-right">Actions</th>
          </tr>
        </thead>
        <tbody id="blockedBody">
          <% users.forEach(function (user, index) {
               const status = statusOf(user.approved);
          %>
            <tr class="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>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="Approval">
                <span class="badge badge--<%= status.key %>" data-approval-status><%= status.label %></span>
              </td>
              <td data-label="Actions">
                <div class="row-actions">
                  <%- include('partials/user-actions', {
                        user,
                        csrfToken,
                        returnTo: '/approvals/blocked',
                        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>
