{% extends "base.html" %}

{% block title %}Soundboard-Editor – {{ filename }}{% endblock %}

{% block content %}
<div class="editor-shell" data-editor="soundboard">
  <div class="editor-hero soundboard-hero">
    <div><span class="editor-kicker">Soundboard Theme</span><h1>Klangwelt gestalten</h1><p>{{ filename }} · Sounds hinzufügen, verschieben und ihre Wiedergabe festlegen.</p></div>
    <div class="d-flex gap-2 flex-wrap"><button type="button" class="btn btn-outline-light" id="show-raw-json">JSON anzeigen</button><button type="submit" form="theme-form" class="btn btn-warning px-4">Theme speichern</button></div>
  </div>

  {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}

  <form id="theme-form" method="POST">
    <textarea class="d-none" id="config_content" name="config_content">{{ content }}</textarea>

    <section class="editor-panel mb-4">
      <div class="editor-section-title"><span>01</span><div><h2>Theme-Einstellungen</h2><p>Name und Standardwerte für die Zufallswiedergabe</p></div></div>
      <div class="row g-3">
        <div class="col-md-6"><label class="form-label">Theme-Name</label><input id="theme-name" class="form-control form-control-lg"></div>
        <div class="col-md-3"><label class="form-label">Max. Wiederholungen</label><input id="theme-limit" type="number" min="1" class="form-control form-control-lg"></div>
        <div class="col-md-3"><label class="form-label">Zeitraum in Minuten</label><input id="theme-window" type="number" min="1" class="form-control form-control-lg"></div>
      </div>
    </section>

    <section class="editor-panel mb-4">
      <div class="editor-section-title compact"><span>02</span><div><h2>Neues Klangelement</h2><p>In einen Bereich ziehen oder zum Hinzufügen anklicken</p></div></div>
      <div id="sound-palette" class="sound-palette">
        <button type="button" draggable="true" data-sound-kind="background" class="sound-kind background"><strong>Hintergrund</strong><small>Endlosschleife</small></button>
        <button type="button" draggable="true" data-sound-kind="sound" class="sound-kind effect"><strong>Einzelsound</strong><small>Manuell abspielen</small></button>
        <button type="button" draggable="true" data-sound-kind="random" class="sound-kind random"><strong>Zufallssound</strong><small>Automatischer Pool</small></button>
      </div>
    </section>

    <div class="theme-lanes">
      <section class="sound-lane background-lane"><div class="lane-heading"><span class="lane-icon">∞</span><div><h2>Hintergrund</h2><p>Läuft als Loop auf einem festen Kanal</p></div></div><div class="lane-dropzone" data-dropzone="backgrounds"></div></section>
      <section class="sound-lane effect-lane"><div class="lane-heading"><span class="lane-icon">▶</span><div><h2>Einzelsounds</h2><p>Gezielt über einen Button abspielen</p></div></div><div class="lane-dropzone" data-dropzone="sounds"></div></section>
      <section class="sound-lane random-lane"><div class="lane-heading"><span class="lane-icon">⤨</span><div><h2>Zufallspool</h2><p>Wird durch die Soundboard-Automatik gewählt</p></div></div><div class="lane-dropzone" data-dropzone="random_pool"></div></section>
    </div>

    <div class="d-flex justify-content-between align-items-center mt-4"><a href="{{ url_for('admin.admin') }}" class="btn btn-outline-secondary">Abbrechen</a><button type="submit" class="btn btn-warning btn-lg px-5">Theme speichern</button></div>
  </form>

  <div class="modal fade" id="rawJsonModal" tabindex="-1"><div class="modal-dialog modal-xl"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Erweiterte JSON-Ansicht</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><p class="text-muted">Die JSON-Ansicht bleibt für Sonderfelder und spätere Erweiterungen verfügbar.</p><textarea id="raw-json-editor" class="form-control font-monospace" rows="24"></textarea><div id="raw-json-error" class="text-danger mt-2"></div></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button><button type="button" id="apply-raw-json" class="btn btn-dark">JSON übernehmen</button></div></div></div></div>
</div>

<script type="application/json" id="editor-data">{{ theme_data|tojson }}</script>
<script type="application/json" id="sound-files-data">{{ sound_files|tojson }}</script>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/admin-config-editors.js') }}"></script>
{% endblock %}