anonymous_github/public/partials/admin/users.htm

<div class="container page">
  <!-- Admin Navigation -->
  <nav class="admin-nav">
    <a href="/admin/">
      <i class="fas fa-code-branch"></i> Repositories
    </a>
    <a href="/admin/users" class="active">
      <i class="fas fa-users"></i> Users
    </a>
    <a href="/admin/conferences">
      <i class="fas fa-chalkboard-teacher"></i> Conferences
    </a>
    <a href="/admin/queues">
      <i class="fas fa-tasks"></i> Queues
    </a>
  </nav>

  <!-- Summary Stats -->
  <div class="admin-stats">
    <div class="admin-stat-card">
      <div class="stat-value" ng-bind="total >= 0 ? (total | number) : '...'"></div>
      <div class="stat-label">Total Users</div>
    </div>
    <div class="admin-stat-card">
      <div class="stat-value">{{query.page}}/{{totalPage || '...'}}</div>
      <div class="stat-label">Current Page</div>
    </div>
  </div>

  <!-- Toolbar -->
  <div class="admin-toolbar">
    <input
      type="search"
      class="form-control"
      aria-label="Search users..."
      placeholder="Search users..."
      autocomplete="off"
      ng-model="query.search"
    />

    <div class="pagination-compact">
      <button class="btn btn-sm" ng-click="query.page = Math.max(1, query.page - 1)" ng-disabled="query.page <= 1">
        <i class="fas fa-chevron-left"></i>
      </button>
      <input
        type="number"
        class="form-control form-control-sm"
        ng-model="query.page"
        min="1"
        max="{{totalPage}}"
      />
      <span>/{{totalPage}}</span>
      <button class="btn btn-sm" ng-click="query.page = Math.min(totalPage, query.page + 1)" ng-disabled="query.page >= totalPage">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>

    <div class="dropdown">
      <button
        class="btn btn-sm dropdown-toggle"
        type="button"
        id="dropdownSort"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        <i class="fas fa-sort"></i> Sort
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownSort">
        <h6 class="dropdown-header">Sort by</h6>
        <a class="dropdown-item" href="#" ng-click="query.sort = 'username'">
          <i class="fas fa-check" ng-show="query.sort == 'username'"></i> Username
        </a>
      </div>
    </div>
  </div>

  <!-- User List -->
  <div
    class="admin-list-item"
    ng-repeat="u in users | filter:userFiler | orderBy:orderBy as filteredUsers"
  >
    <div class="item-main">
      <div class="item-title">
        <a ng-href="/admin/users/{{u.username}}">
          <img
            ng-src="{{u.photo}}"
            ng-if="u.photo"
            width="20"
            height="20"
            class="rounded-circle mr-1"
            style="vertical-align: text-bottom"
          />
          {{u.username}}
        </a>
        <span
          class="status-badge"
          ng-class="'status-' + u.status"
        >{{u.status | title}}</span>
        <span
          class="status-badge status-active"
          ng-if="u.isAdmin"
        >Admin</span>
      </div>
      <div class="item-meta">
        <span ng-if="u.emails[0].email">
          <i class="fas fa-envelope"></i> {{u.emails[0].email}}
        </span>
        <span>
          <i class="fab fa-github"></i>
          <a ng-href="https://github.com/{{u.username}}" target="_blank">{{u.username}}</a>
        </span>
      </div>
    </div>
    <div class="item-actions">
      <div class="dropdown">
        <button
          class="btn dropdown-toggle btn-sm"
          type="button"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          Actions
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="/admin/users/{{u.username}}">
            <i class="far fa-eye"></i> View Details
          </a>
          <div class="dropdown-divider"></div>
          <a
            class="dropdown-item"
            href="#"
            ng-show="u.status == 'active'"
            ng-click="banUser(u)"
          >
            <i class="fas fa-ban"></i> Ban
          </a>
          <a
            class="dropdown-item"
            href="#"
            ng-show="u.status == 'removed' || u.status == 'banned'"
            ng-click="activateUser(u)"
          >
            <i class="fas fa-check-circle"></i> Activate
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="empty-state" ng-if="filteredUsers.length == 0">
    <i class="fas fa-users"></i>
    No users match the current filters.
  </div>

  <!-- Bottom pagination -->
  <div class="admin-toolbar" ng-if="totalPage > 1" style="justify-content: center; border-bottom: none;">
    <div class="pagination-compact">
      <button class="btn btn-sm" ng-click="query.page = Math.max(1, query.page - 1)" ng-disabled="query.page <= 1">
        <i class="fas fa-chevron-left"></i> Previous
      </button>
      <span>Page {{query.page}} of {{totalPage}}</span>
      <button class="btn btn-sm" ng-click="query.page = Math.min(totalPage, query.page + 1)" ng-disabled="query.page >= totalPage">
        Next <i class="fas fa-chevron-right"></i>
      </button>
    </div>
  </div>
</div>