<script src="/static/addons/emulator/panel.js"></script>

    <!-- Sektion: Emulator -->
    <section>
      <h2>Emulator</h2>
      <p style="font-size:.85rem;color:#555;margin-bottom:.75rem">
        Kör retro-spel direkt i display-fönstret via EmulatorJS (WebAssembly). Stöder SNES, NES, GBA, N64, PS1, Sega m.fl.
      </p>

      <!-- Spelar nu-banner -->
      <div id="emu-now-playing" style="display:none;margin-bottom:.75rem;padding:.45rem .85rem;background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.3);border-radius:7px;align-items:center;gap:.6rem;font-size:.88rem;color:#c4b5fd;">
        <span>🎮</span>
        <span id="emu-now-playing-text" style="flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Spelar nu...</span>
        <button class="secondary" style="padding:.2rem .6rem;font-size:.8rem" onclick="emuStop()">Avsluta</button>
      </div>

      <h3>ROM-mapp</h3>
      <div class="prop-grid">
        <label>Mapp</label>
        <div class="row">
          <input id="emu-rom-dir" type="text" placeholder="/home/mrfox/roms" style="flex:1"
                 onkeydown="if(event.key==='Enter')emuScanRoms()">
          <button type="button" class="secondary" onclick="emuBrowseFolder()">Bläddra</button>
          <button type="button" onclick="emuScanRoms()">Skanna</button>
        </div>
      </div>

      <!-- ROM-lista -->
      <div id="emu-rom-wrap" style="display:none;margin:.75rem 0">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem">
          <h3 style="margin:0">Hittade spel</h3>
          <input id="emu-filter" type="text" placeholder="Filtrera..." style="max-width:12rem;font-size:.85rem"
                 oninput="emuFilterRoms(this.value)">
        </div>
        <div id="emu-rom-list" style="max-height:280px;overflow-y:auto;background:#111;border-radius:6px;border:1px solid #222;"></div>
      </div>

      <div id="emu-no-roms" style="display:none;color:#555;font-size:.85rem;font-style:italic;margin:.5rem 0">
        Inga ROM-filer hittades i mappen.
      </div>

      <!-- Valt spel -->
      <div id="emu-selected-wrap" style="display:none;margin:.75rem 0">
        <h3>Valt spel</h3>
        <div class="prop-grid">
          <label>Spel</label>
          <span id="emu-selected-name" style="font-size:.9rem;color:#e2e8f0;font-family:monospace"></span>
          <label>System</label>
          <span id="emu-selected-core-label" style="font-size:.9rem;color:#94a3b8"></span>
        </div>
      </div>

      <div class="row" style="margin-top:.75rem">
        <button id="emu-launch-btn" onclick="emuLaunch()" disabled>Starta spel</button>
        <button class="secondary" onclick="emuStop()">Avsluta</button>
        <span id="emu-status" style="color:#aaa;font-size:.85rem;align-self:center"></span>
      </div>

      <!-- Avancerat -->
      <details style="margin-top:1.25rem">
        <summary style="cursor:pointer;color:#555;font-size:.85rem;user-select:none">Avancerat</summary>
        <div class="prop-grid" style="margin-top:.75rem">
          <label>EmulatorJS-källa</label>
          <div>
            <input id="emu-ejs-path" type="text" style="width:100%;font-size:.85rem;font-family:monospace"
                   placeholder="https://cdn.emulatorjs.org/stable/data/">
            <div style="font-size:.75rem;color:#444;margin-top:.3rem">
              CDN (standard) eller lokal sökväg om du hostar EmulatorJS själv, t.ex. <code>/static/emulator/data/</code>
            </div>
          </div>
          <label></label>
          <button class="secondary" onclick="emuSaveSettings()" style="width:fit-content">Spara</button>
        </div>
      </details>
    </section>