<%- include("partials/layout-top", { title, pageWidth: "wide", pageId: "overlay-management" }) %>
<link rel="stylesheet" href="/overlay-management.css?v=<%= assetVersion %>" />
<section class="card">
  <%- include("partials/page-header", {
    eyebrow: "Streaming",
    pageTitle: "OBS overlays",
    description: "Build what viewers see, preview it here, then copy the finished link into OBS.",
    actions: '<button type="button" class="button" data-overlay-create-open>Create overlay</button>'
  }) %>
  <% if (!overlays.length) { %>
    <div class="empty-state">No overlays yet. Create one, arrange its first scene, then add it to OBS.</div>
  <% } else { %>
    <div class="table-wrap">
      <table class="table">
        <thead><tr><th>Overlay</th><th>Live scene</th><th>Contents</th><th>Status</th><th>Private OBS link</th><th>Actions</th></tr></thead>
        <tbody>
        <% overlays.forEach((overlay) => { const url = `${baseUrl}/overlay/${overlay.public_token}`; %>
          <tr>
            <td><strong><%= overlay.name %></strong><% if (overlay.description) { %><div class="table-note"><%= overlay.description %></div><% } %></td>
            <td><%= overlay.active_scene_name || "None" %></td>
            <td><%= overlay.scene_count %> scene<%= overlay.scene_count === 1 ? "" : "s" %> · <%= overlay.module_count %> source<%= overlay.module_count === 1 ? "" : "s" %></td>
            <td><span class="badge <%= overlay.enabled ? 'success' : 'warning' %>"><%= overlay.enabled ? "On" : "Off" %></span></td>
            <td>
              <div class="overlay-url-row">
                <input value="<%= url %>" readonly aria-label="<%= overlay.name %> private OBS link" />
                <button type="button" class="button subtle" data-copy-value="<%= url %>">Copy link</button>
              </div>
            </td>
            <td><a class="button subtle" href="/admin/overlays/<%= overlay.id %>">Open editor</a></td>
          </tr>
        <% }) %>
        </tbody>
      </table>
    </div>
    <form method="post" action="/admin/overlays/reorder" class="form-grid" data-reorder-form>
      <div class="field full">
        <label>Display order</label>
        <div class="overlay-reorder-list" data-reorder-list>
          <% overlays.forEach((overlay) => { %><button type="button" class="button subtle" data-reorder-id="<%= overlay.id %>"><%= overlay.name %></button><% }) %>
        </div>
        <input type="hidden" name="ids" data-reorder-value />
        <p class="hint">Select an item to move it one position to the right.</p>
      </div>
      <button type="submit" class="button subtle">Save order</button>
    </form>
  <% } %>
</section>

<div class="modal-backdrop" data-overlay-create-modal aria-hidden="true">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="overlay-create-title">
    <div class="modal-header"><h2 id="overlay-create-title">Create overlay</h2><button type="button" class="icon-button" data-overlay-create-close aria-label="Close">×</button></div>
    <form method="post" action="/admin/overlays" class="form-grid">
      <div class="field"><label>Overlay name</label><input data-dialog-initial-focus name="name" required maxlength="120" placeholder="Main stream" /></div>
      <div class="field"><label>First scene name</label><input name="scene_name" required maxlength="120" value="Main" /></div>
      <div class="field full"><label>Description</label><textarea name="description" rows="3" maxlength="1000"></textarea></div>
      <div class="modal-actions"><button type="button" class="button subtle" data-overlay-create-close>Cancel</button><button type="submit" class="button">Create overlay</button></div>
    </form>
  </div>
</div>

<script src="/overlay-management.js?v=<%= assetVersion %>" defer></script>
<%- include("partials/layout-bottom") %>
