<%- include("partials/layout-top", { title }) %>
<section class="card">
  <%- include("partials/page-header", {
    eyebrow: "Administration",
    pageTitle: "Admin dashboard",
    description: "Configure Lumi, manage community tools, and maintain the installation."
  }) %>
  <div class="grid">
    <div class="card">
      <h2>Settings</h2>
      <p>Update site settings and automation preferences.</p>
      <a href="/admin/settings" class="link">Edit settings</a>
    </div>
    <div class="card">
      <h2>Theming</h2>
      <p>Select protected presets or create editable custom themes.</p>
      <a href="/admin/theming" class="link">Open theme studio</a>
    </div>
    <div class="card">
      <h2>Commands</h2>
      <p>Create and manage custom bot commands.</p>
      <a href="/admin/commands" class="link">Manage commands</a>
    </div>
    <div class="card">
      <h2>Users</h2>
      <p>View linked accounts and manage usernames.</p>
      <a href="/admin/users" class="link">Manage users</a>
    </div>
    <div class="card">
      <h2>Pages</h2>
      <p>Create public, moderator, or admin pages.</p>
      <a href="/admin/pages" class="link">Manage pages</a>
    </div>
    <div class="card">
      <h2>OBS overlays</h2>
      <p>Build live Browser Source overlays, scenes, and OBS mappings.</p>
      <a href="/admin/overlays" class="link">Manage overlays</a>
    </div>
    <div class="card">
      <h2>Plugins</h2>
      <p>Install, enable, and update modules.</p>
      <a href="/admin/plugins" class="link">Manage plugins</a>
    </div>
    <div class="card">
      <h2>Updates</h2>
      <p>Check repository updates, review backups, and use ZIP recovery only when needed.</p>
      <a href="/admin/updates" class="link">Manage updates</a>
    </div>
  </div>
</section>
<% (typeof dashboardSections !== "undefined" && Array.isArray(dashboardSections) ? dashboardSections : []).forEach((section) => { %>
<section class="card plugin-dashboard-section" data-dashboard-section="<%= section.id %>">
  <div class="section-header">
    <div><span class="eyebrow"><%= section.eyebrow %></span><h2><%= section.title %></h2><p class="hint"><%= section.description %></p></div>
    <span class="status-indicator status-<%= section.status.tone %>"><%= section.status.label %></span>
  </div>
  <% if (section.metrics.length) { %>
  <div class="dashboard-metric-grid">
    <% section.metrics.forEach((metric) => { %><div><span><%= metric.label %></span><strong><%= metric.value %></strong></div><% }) %>
  </div>
  <% } %>
  <% if (section.issues.length) { %>
  <div class="callout <%= section.status.tone === 'danger' ? 'danger' : 'warning' %>"><strong><%= section.issues.length %> issue<%= section.issues.length === 1 ? '' : 's' %> discovered</strong><ul><% section.issues.forEach((issue) => { %><li><%= issue %></li><% }) %></ul></div>
  <% } else { %>
  <div class="callout success"><strong>Everything healthy</strong><p>No Companion issues are currently reported.</p></div>
  <% } %>
  <div class="inline-actions">
    <% section.actions.forEach((action) => { %>
      <% if (action.method === "post") { %><form method="post" action="<%= action.href %>"><button class="button <%= action.primary ? '' : 'subtle' %>" type="submit" <%= action.disabled ? 'disabled' : '' %> title="<%= action.disabledReason %>"><%= action.label %></button></form>
      <% } else { %><a class="button <%= action.primary ? '' : 'subtle' %> <%= action.disabled ? 'disabled' : '' %>" href="<%= action.disabled ? '#' : action.href %>" <%= action.disabled ? 'aria-disabled="true"' : '' %> title="<%= action.disabledReason %>"><%= action.label %></a><% } %>
    <% }) %>
  </div>
</section>
<% }) %>
<section class="card admin-metrics" data-dashboard-metrics>
  <div class="section-header">
    <div>
      <h2>Live metrics</h2>
      <p class="hint">Process health, content counts, plugin status, and recent log severity.</p>
    </div>
    <span class="status-indicator status-success" data-metrics-status>Loading</span>
  </div>
  <div class="dashboard-scope-tabs" role="group" aria-label="Memory and log scope">
    <button type="button" class="button subtle" data-dashboard-scope="5m">5m</button>
    <button type="button" class="button subtle" data-dashboard-scope="24h">24h</button>
    <button type="button" class="button subtle" data-dashboard-scope="7d">7d</button>
  </div>
  <div class="dashboard-metric-grid">
    <div><span>Uptime</span><strong data-metric="uptime">-</strong></div>
    <div><span>Memory RSS</span><strong data-metric="rss">-</strong></div>
    <div><span>Heap used</span><strong data-metric="heap">-</strong></div>
    <div><span>Plugins enabled</span><strong data-metric="plugins">-</strong></div>
    <div><span>Users</span><strong data-metric="users">-</strong></div>
    <div><span>Commands</span><strong data-metric="commands">-</strong></div>
  </div>
  <div class="dashboard-chart-grid">
    <figure class="dashboard-chart-card">
      <figcaption>Memory trend <span class="hint" data-memory-scope-label>5m</span></figcaption>
      <svg viewBox="0 0 300 120" role="img" aria-label="Memory trend" data-memory-chart></svg>
    </figure>
    <figure class="dashboard-chart-card">
      <figcaption>Recent logs by severity <span class="hint" data-log-scope-label>5m</span></figcaption>
      <svg viewBox="0 0 300 120" role="img" aria-label="Recent logs by severity" data-log-chart></svg>
      <div class="dashboard-log-summary" data-log-summary></div>
    </figure>
  </div>
</section>
<section class="card">
  <h2>Maintenance</h2>
  <div class="button-group">
    <form method="post" action="/admin/check-update" class="inline-form" data-update-action>
      <%- include("partials/state-button", {
        type: "submit",
        classes: "subtle",
        states: [
          { id: "idle", text: "Check for updates" },
          { id: "loading", text: "Checking", spinner: true },
          { id: "success", text: "Checked" }
        ]
      }) %>
    </form>
    <form method="post" action="/admin/update" class="inline-form" data-update-action data-confirm-mode="modal" data-confirm-title="Update Lumi" data-confirm-text="Download the recommended update, create a backup, apply it, and restart Lumi if it succeeds." data-confirm-label="Update Lumi">
      <%- include("partials/state-button", {
        type: "submit",
        states: [
          { id: "idle", text: "Update from repository" },
          { id: "loading", text: "Updating", spinner: true },
          { id: "success", text: "Updated" }
        ]
      }) %>
    </form>
    <form method="post" action="/admin/restart" class="inline-form">
      <%- include("partials/state-button", {
        type: "submit",
        classes: "subtle",
        states: [
          { id: "idle", text: "Restart bot" },
          { id: "loading", text: "Restarting", spinner: true },
          { id: "success", text: "Restarting" }
        ]
      }) %>
    </form>
  </div>
  <p class="hint" data-update-inline-result aria-live="polite"></p>
</section>
<script src="/dashboard.js?v=<%= assetVersion %>" defer></script>
<%- include("partials/layout-bottom") %>


