<%- include("partials/layout-top", { title }) %>
<section class="card">
  <div class="section-header">
    <div>
      <h1>Discord Privileges</h1>
      <p class="command-subtitle">Verify the bot's permissions inside the configured server.</p>
      <p class="hint">
        Guild:
        <strong><%= discord && discord.guildName ? discord.guildName : "Not connected" %></strong>
      </p>
    </div>
    <div class="table-tools">
      <input
        class="table-search"
        type="search"
        placeholder="Search Discord privileges"
        aria-label="Search Discord privileges"
        data-table-filter="discord-privileges"
      />
    </div>
  </div>
  <div class="table-wrap">
    <table class="table" data-table="discord-privileges">
      <thead>
        <tr>
          <th data-sort="label">Privilege</th>
          <th data-sort="description">Details</th>
          <th data-sort="status">Status</th>
        </tr>
      </thead>
      <tbody>
        <% (discord && discord.rows ? discord.rows : []).forEach((row) => { %>
        <tr
          data-search="<%= row.search %>"
          data-label="<%= row.sort.label %>"
          data-description="<%= row.sort.description %>"
          data-status="<%= row.sort.status %>"
        >
          <td><strong><%= row.label %></strong></td>
          <td><%= row.description || "-" %></td>
          <td>
            <span class="perm-toggle <%= row.granted ? "on" : "off" %>" aria-hidden="true">
              <span class="perm-thumb"></span>
            </span>
            <span class="perm-label"><%= row.granted ? "Granted" : "Missing" %></span>
          </td>
        </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</section>

<section class="card">
  <div class="section-header">
    <div>
      <h1>Twitch Privileges</h1>
      <p class="command-subtitle">Confirm Twitch configuration and chat connectivity.</p>
      <p class="hint">
        Channels configured:
        <strong><%= twitch && Number.isFinite(twitch.channelCount) ? twitch.channelCount : 0 %></strong>
      </p>
    </div>
    <div class="table-tools">
      <input
        class="table-search"
        type="search"
        placeholder="Search Twitch privileges"
        aria-label="Search Twitch privileges"
        data-table-filter="twitch-privileges"
      />
    </div>
  </div>
  <div class="table-wrap">
    <table class="table" data-table="twitch-privileges">
      <thead>
        <tr>
          <th data-sort="label">Privilege</th>
          <th data-sort="description">Details</th>
          <th data-sort="status">Status</th>
        </tr>
      </thead>
      <tbody>
        <% (twitch && twitch.rows ? twitch.rows : []).forEach((row) => { %>
        <tr
          data-search="<%= row.search %>"
          data-label="<%= row.sort.label %>"
          data-description="<%= row.sort.description %>"
          data-status="<%= row.sort.status %>"
        >
          <td><strong><%= row.label %></strong></td>
          <td><%= row.description || "-" %></td>
          <td>
            <span class="perm-toggle <%= row.granted ? "on" : "off" %>" aria-hidden="true">
              <span class="perm-thumb"></span>
            </span>
            <span class="perm-label"><%= row.granted ? "Granted" : "Missing" %></span>
          </td>
        </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</section>
<%- include("partials/layout-bottom") %>
