<%- include("partials/layout-top", { title }) %>
<section class="card">
  <div class="section-header">
    <div>
      <h1>Mods List</h1>
      <p class="command-subtitle">Active moderators and admins with linked platform aliases.</p>
    </div>
  </div>
</section>

<section class="card">
  <% if (!mods.length) { %>
  <p>No moderator history recorded yet.</p>
  <% } else { %>
  <div class="table-tools">
    <input
      type="search"
      class="table-search"
      placeholder="Search moderators"
      data-table-filter="mods-list"
    />
    <div class="table-controls">
      <label class="table-page-size">
        Show
        <select data-table-size="mods-list">
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="250">250</option>
        </select>
      </label>
    </div>
  </div>
  <div class="table-wrap">
    <table
      class="table"
      data-table="mods-list"
      data-pageable="true"
      data-page-size="25"
      data-page-sizes="25,50,100,250"
    >
      <thead>
        <tr>
          <th data-sort="username">Internal username</th>
          <th>Platforms</th>
          <th>Aliases</th>
          <th data-sort="age">Mod age</th>
        </tr>
      </thead>
      <tbody>
        <% mods.forEach((mod) => { %>
        <% const platformLabels = mod.identities.map((identity) => identity.label).join(" "); %>
        <% const aliasText = mod.aliasText || ""; %>
        <tr
          data-search="<%= `${mod.username} ${platformLabels} ${aliasText}`.toLowerCase() %>"
          data-username="<%= mod.username.toLowerCase() %>"
          data-age="<%= mod.totalMs %>"
        >
          <td><%= mod.username %></td>
          <td>
            <span class="platform-pills">
              <% if (!mod.identities.length) { %>
              <span class="badge">Internal</span>
              <% } else { %>
              <% mod.identities.forEach((identity) => { %>
              <span class="badge <%= identity.provider %>"><%= identity.label %></span>
              <% }) %>
              <% } %>
            </span>
          </td>
          <td>
            <% if (!aliasText) { %>
            <span class="hint">No linked accounts</span>
            <% } else { %>
            <span class="badge" title="<%= aliasText %>">View aliases</span>
            <% } %>
          </td>
          <td><%= formatDuration(mod.totalMs) %></td>
        </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
  <div class="table-pagination" data-table-pagination="mods-list">
    <button type="button" class="button subtle" data-page-prev>Previous</button>
    <span class="table-page-label" data-page-label>Page 1 of 1</span>
    <button type="button" class="button subtle" data-page-next>Next</button>
  </div>
  <% } %>
</section>
<%- include("partials/layout-bottom") %>
