{% extends "base.html" %}

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

{% block content %}
<div class="editor-shell" data-editor="locomotive">
  <div class="editor-hero">
    <div>
      <span class="editor-kicker">MK Hub Konfiguration</span>
      <h1>Lok zusammenstellen</h1>
      <p>{{ filename }} · Bauteile auf die gewünschten Kanäle ziehen und anschließend konfigurieren.</p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <button type="button" class="btn btn-outline-dark" id="show-raw-json">JSON anzeigen</button>
      <button type="submit" form="config-form" class="btn btn-danger px-4">Konfiguration speichern</button>
    </div>
  </div>

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

  <form id="config-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>Lok & Hub</h2><p>Grunddaten der Steuerung</p></div></div>
      <div class="row g-3">
        <div class="col-md-5"><label class="form-label">Name der Lok</label><input id="cfg-name" class="form-control form-control-lg"></div>
        <div class="col-md-2"><label class="form-label">Hub-ID</label><input id="cfg-hub-id" type="number" min="0" max="2" class="form-control form-control-lg"></div>
        <div class="col-md-2"><label class="form-label">Hub-Typ</label><select id="cfg-hub-type" class="form-select form-select-lg"><option value="4channel">4 Kanäle</option><option value="6channel">6 Kanäle</option></select></div>
        <div class="col-md-3"><label class="form-label">Bilddatei</label><input id="cfg-image" class="form-control form-control-lg" placeholder="lok.jpg"></div>
      </div>
    </section>

    <div class="row g-4">
      <div class="col-xl-3">
        <section class="editor-panel h-100">
          <div class="editor-section-title compact"><span>02</span><div><h2>Bauteile</h2><p>Auf einen Kanal ziehen</p></div></div>
          <div id="channel-palette" class="component-palette">
            <div class="component-chip motor" draggable="true" data-component="motor"><strong>Motor</strong><small>Richtung & Tempo</small></div>
            <div class="component-chip light" draggable="true" data-component="light"><strong>Licht</strong><small>Ein- und ausschaltbar</small></div>
            <div class="component-chip fogger" draggable="true" data-component="fogger"><strong>Dampf</strong><small>Nebler / Raucherzeuger</small></div>
            <div class="component-chip switch" draggable="true" data-component="switch"><strong>Schalter</strong><small>Universeller Ausgang</small></div>
          </div>
          <p class="small text-muted mt-3 mb-0">Ein belegter Kanal kann ersetzt oder über „Entfernen“ geleert werden.</p>
        </section>
      </div>
      <div class="col-xl-9">
        <section class="editor-panel">
          <div class="editor-section-title compact"><span>03</span><div><h2>Hub-Belegung</h2><p id="channel-count-label">Kanäle A–D</p></div></div>
          <div id="channel-grid" class="channel-grid"></div>
        </section>
      </div>
    </div>

    <section class="editor-panel mt-4">
      <div class="editor-section-title"><span>04</span><div><h2>Lok-Sounds</h2><p>Optionale Tasten für Pfeifen, Motorgeräusche und Signale</p></div><button type="button" id="add-loco-sound" class="btn btn-outline-danger ms-auto">+ Sound</button></div>
      <div id="loco-sound-list" class="sound-entry-list"></div>
    </section>

    <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-danger btn-lg px-5">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">Änderungen hier werden beim Übernehmen wieder in den visuellen Editor geladen.</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">{{ config_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 %}