<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="referrer" content="no-referrer" />
  <title><%= title %></title>
  <link rel="stylesheet" href="/overlay-runtime.css?v=<%= assetVersion %>" />
  <link rel="stylesheet" href="/overlay-preview-window.css?v=<%= assetVersion %>" />
</head>
<body>
  <main class="overlay-preview-window-stage" data-overlay-preview-window>
    <section class="overlay-preview-window-toolbar" aria-label="Preview editing controls">
      <div class="overlay-preview-window-fields">
        <label>Scene<select data-popout-scene></select></label>
        <label>Source<select data-popout-source></select></label>
        <label class="overlay-preview-window-snap"><input type="checkbox" data-popout-snap checked /> Snap</label>
      </div>
      <div class="overlay-preview-window-actions">
        <button type="button" data-popout-center>Center</button>
        <button type="button" data-popout-fit>Fit</button>
        <button type="button" data-popout-reset>Reset</button>
      </div>
      <p class="overlay-preview-window-readout" data-popout-readout>No source selected</p>
      <p class="overlay-preview-window-status" data-preview-window-status role="status" aria-live="polite">Waiting for editor</p>
    </section>
    <div class="overlay-preview-window-viewport" data-preview-window-viewport>
      <div class="overlay-preview-window-frame" data-preview-window-frame style="--overlay-aspect: <%= overlay.canvas_width || 1920 %> / <%= overlay.canvas_height || 1080 %>">
        <div class="overlay-preview-window-canvas" data-preview-window-canvas tabindex="0" role="application" aria-label="Interactive preview for <%= overlay.name %>">
          <div class="overlay-preview-window-layer" data-preview-window-layer></div>
          <div class="overlay-preview-window-guide guide-x" data-popout-guide-x aria-hidden="true"></div>
          <div class="overlay-preview-window-guide guide-y" data-popout-guide-y aria-hidden="true"></div>
        </div>
      </div>
    </div>
  </main>
  <script type="application/json" data-overlay-preview-state><%- editorStateJson %></script>
  <script src="/overlay-renderer.js?v=<%= assetVersion %>" defer></script>
  <script src="/overlay-preview-window.js?v=<%= assetVersion %>" defer></script>
</body>
</html>
