<%- include("partials/layout-top", {
  title,
  pageWidth: "wide",
  pageId: "stream-testing",
  extraStyles: ["/stream-testing.css"],
  extraScripts: ["/admin/stream-testing/hls.js", "/stream-testing.js"]
}) %>

<main data-stream-testing>
  <section class="card">
    <%- include("partials/page-header", {
      eyebrow: "Admin-only preview",
      pageTitle: "Stream testing",
      description: "Inspect the real OBS output through Lumi without publishing it to a normal streaming destination."
    }) %>
    <div class="callout warning"><strong>Never use this while publicly live.</strong><p>Companion refuses to redirect an active stream. The test uses an expiring destination and restores the exact saved OBS service when it ends.</p></div>
    <div class="stream-test-summary" data-stream-summary aria-live="polite"></div>
  </section>

  <section class="stream-test-layout">
    <div class="card stream-test-player-card">
      <div class="section-heading"><div><span class="eyebrow">Private receiver</span><h2>Live output</h2></div><span class="status-pill neutral" data-stream-state>Idle</span></div>
      <div class="stream-test-player-shell">
        <video data-stream-player controls playsinline crossorigin="use-credentials"><track data-stream-captions kind="captions" srclang="en" label="Lumi captions" default /></video>
        <div class="empty-state" data-stream-empty>Start Stream testing from Lumi Companion on the streaming computer.</div>
      </div>
      <div class="inline-actions">
        <label class="field compact"><span>Quality</span><select data-stream-quality disabled><option value="-1">Automatic</option></select></label>
        <button class="button subtle" type="button" data-stream-fullscreen disabled>Fullscreen</button>
        <button class="button subtle" type="button" data-stream-pattern>Run test pattern</button>
        <button class="button danger" type="button" data-stream-stop disabled>End test</button>
      </div>
    </div>

    <aside class="card">
      <div class="section-heading"><div><span class="eyebrow">Real-time facts</span><h2>Diagnostics</h2></div></div>
      <div class="stream-test-metrics" data-stream-metrics></div>
      <div data-stream-warnings></div>
    </aside>
  </section>

  <section class="card">
    <div class="section-heading"><div><span class="eyebrow">Recovery trail</span><h2>Timeline</h2></div></div>
    <ol class="stream-test-timeline" data-stream-timeline></ol>
    <details class="lumi-expandable-settings"><summary><span><strong>Advanced receiver details</strong><span class="hint">Encoder, ingest safety, and raw metric values</span></span></summary><pre class="log-details" data-stream-advanced></pre></details>
  </section>
</main>

<%- include("partials/layout-bottom") %>
