<%- include("partials/layout-top", { title }) %>
<section class="card">
  <div class="commands-header">
    <div>
      <h1>Commands</h1>
      <p class="command-subtitle">Auto-updated list of core and plugin commands.</p>
    </div>
    <div class="table-tools">
      <div class="command-content-toggle" data-command-content-toggle role="group" aria-label="Custom command details">
        <button type="button" class="is-active" data-command-content-mode="preview" aria-pressed="true">Previews</button>
        <button type="button" data-command-content-mode="description" aria-pressed="false">Descriptions</button>
      </div>
      <input
        class="table-search"
        type="search"
        placeholder="Search commands"
        aria-label="Search commands"
        data-table-filter="commands"
      />
    </div>
  </div>
  <p class="table-note">
    <strong>Usage:</strong> Use <code>&lt;arg&gt;</code> for required arguments and <code>[arg]</code> for optional ones.
  </p>
  <% if (isAdmin && conflicts.length) { %>
  <div class="conflict-card">
    <strong>Command conflicts detected.</strong>
    <p>These triggers overlap on the same platform and may shadow each other.</p>
    <ul>
      <% conflicts.forEach((conflict) => { %>
      <li>
        <code><%= conflict.triggerDisplay %></code> on <strong><%= conflict.platformLabel %></strong>: <%= conflict.sourcesLabel %>
      </li>
      <% }) %>
    </ul>
  </div>
  <% } %>
  <% if (!commandGroups.length) { %>
  <p>No commands registered yet.</p>
  <% } else { %>
  <div class="table-wrap">
    <table class="table commands-table" data-table="commands">
      <thead>
        <tr>
          <th data-sort="trigger" aria-sort="none"><button type="button" class="table-sort-button" data-table-sort-control>Trigger</button></th>
          <th data-sort="name" aria-sort="none"><button type="button" class="table-sort-button" data-table-sort-control>Name</button></th>
          <th data-sort="description" aria-sort="none"><button type="button" class="table-sort-button" data-table-sort-control>Preview / description</button></th>
          <th data-sort="level" aria-sort="none"><button type="button" class="table-sort-button" data-table-sort-control>Level</button></th>
          <th data-sort="platform" aria-sort="none"><button type="button" class="table-sort-button" data-table-sort-control>Platform</button></th>
          <th data-sort="origin" aria-sort="none"><button type="button" class="table-sort-button" data-table-sort-control>Origin</button></th>
          <th data-sort="count" aria-sort="none"><button type="button" class="table-sort-button" data-table-sort-control>Count</button></th>
          <th>Link</th>
        </tr>
      </thead>
      <tbody>
        <% commandGroups.forEach((group) => { %>
        <% const root = group.root; %>
        <% const subcommands = group.subcommands || []; %>
        <% const hasSubcommands = subcommands.length > 0; %>
        <% const rootLevelClass = (root.level || "").toString().toLowerCase().replace(/[^a-z0-9-]/g, ""); %>
        <tr
          id="<%= root.anchor %>"
          class="command-root"
          data-command-root="<%= root.groupKey %>"
          data-search="<%= root.search %>"
          data-trigger="<%= root.sort.trigger %>"
          data-name="<%= root.sort.name %>"
          data-description="<%= root.sort.description %>"
          data-level="<%= root.sort.level %>"
          data-platform="<%= root.sort.platform %>"
          data-origin="<%= root.sort.origin %>"
          data-count="<%= root.sort.count %>"
        >
          <td>
            <div class="command-trigger">
              <% if (hasSubcommands) { %>
              <button
                type="button"
                class="command-toggle"
                data-command-toggle
                aria-expanded="false"
                aria-label="Toggle subcommands"
              ></button>
              <% } else { %>
              <span class="command-toggle spacer" aria-hidden="true"></span>
              <% } %>
              <button type="button" class="copy-pill" data-copy="<%= root.triggerDisplay %>" title="Copy trigger">
                <code><%= root.triggerDisplay %></code>
              </button>
            </div>
          </td>
          <td>
            <span class="command-name" title="<%= root.name %>"><%= root.name %></span>
          </td>
          <td>
            <%- include("partials/command-list-content", { command: root }) %>
          </td>
          <td>
            <span
              class="level-pill <%= rootLevelClass ? `level-${rootLevelClass}` : '' %>"
              <% if (root.levelHelp) { %>title="<%= root.levelHelp %>"<% } %>
            >
              <%= root.level %>
            </span>
          </td>
          <td>
            <span class="platform-pills">
              <% root.platformLabels.forEach((platform) => { %>
              <span class="badge <%= platform.key %>"><%= platform.label %></span>
              <% }) %>
            </span>
          </td>
          <td><span class="origin-pill"><%= root.origin %></span></td>
          <td class="command-count"><%= root.count %></td>
          <td>
            <button type="button" class="copy-pill copy-link" data-copy="<%= root.link %>" title="Copy link">
              <span data-copy-label>Copy link</span>
            </button>
          </td>
        </tr>
        <% subcommands.forEach((command) => { %>
        <% const commandLevelClass = (command.level || "").toString().toLowerCase().replace(/[^a-z0-9-]/g, ""); %>
        <tr
          id="<%= command.anchor %>"
          class="command-subrow"
          data-command-parent="<%= root.groupKey %>"
          data-search="<%= command.search %>"
          data-trigger="<%= command.sort.trigger %>"
          data-name="<%= command.sort.name %>"
          data-description="<%= command.sort.description %>"
          data-level="<%= command.sort.level %>"
          data-platform="<%= command.sort.platform %>"
          data-origin="<%= command.sort.origin %>"
          data-count="<%= command.sort.count %>"
        >
          <td>
            <div class="command-trigger">
              <span class="command-toggle spacer" aria-hidden="true"></span>
              <button type="button" class="copy-pill" data-copy="<%= command.triggerDisplay %>" title="Copy trigger">
                <code><%= command.triggerDisplay %></code>
              </button>
            </div>
          </td>
          <td>
            <span class="command-name" title="<%= command.name %>"><%= command.name %></span>
          </td>
          <td>
            <%- include("partials/command-list-content", { command }) %>
          </td>
          <td>
            <span
              class="level-pill <%= commandLevelClass ? `level-${commandLevelClass}` : '' %>"
              <% if (command.levelHelp) { %>title="<%= command.levelHelp %>"<% } %>
            >
              <%= command.level %>
            </span>
          </td>
          <td>
            <span class="platform-pills">
              <% command.platformLabels.forEach((platform) => { %>
              <span class="badge <%= platform.key %>"><%= platform.label %></span>
              <% }) %>
            </span>
          </td>
          <td><span class="origin-pill"><%= command.origin %></span></td>
          <td class="command-count"><%= command.count %></td>
          <td>
            <button type="button" class="copy-pill copy-link" data-copy="<%= command.link %>" title="Copy link">
              <span data-copy-label>Copy link</span>
            </button>
          </td>
        </tr>
        <% }) %>
        <% }) %>
      </tbody>
    </table>
  </div>
  <% } %>
</section>
<%- include("partials/layout-bottom") %>
