{% extends "base.html" %}

{% block title %}{{ config.name }} – Steuerung{% endblock %}

{% block content %}

<div class="container my-4">

  <!-- Status-Anzeige (oben rechts fixiert) -->
  <div class="position-fixed top-0 end-0 m-3" style="z-index: 1050;">
    <div id="connection-status" class="badge bg-secondary px-3 py-2 fs-6">
      <i class="bi bi-circle-fill me-2 text-muted"></i> Nicht verbunden
    </div>
  </div>

  <div class="row">
    <!-- Linke Spalte: Kanal-Steuerung (8/12 auf lg) -->
    <div class="col-lg-8">
      <div class="row mb-4 align-items-center">
        <div class="col-md-8">
          <h1 class="mb-1">{{ config.name }}</h1>
          <p class="text-muted">
            Hub-ID: {{ config.hub_id | default('unbekannt') }} •
            Typ: {{ config.hub_type | default('unbekannt') }} •
            Datei: {{ config.filename }}
          </p>
        </div>
        <div class="col-md-4 text-md-end">
          {% if config.image %}
            <img src="{{ url_for('serve_config_file', filename=config.image) }}"
                 alt="{{ config.name }}"
                 class="img-fluid rounded shadow"
                 style="max-height: 180px; object-fit: cover;">
          {% else %}
            <div class="bg-light rounded d-flex align-items-center justify-content-center shadow"
                 style="height: 180px; width: 100%; max-width: 300px; margin-left: auto;">
              <i class="bi bi-train-freight-front display-1 text-muted"></i>
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Connect-Bereich -->
      <div id="connect-section" class="text-center mb-5">
        <button id="connect-btn" class="btn btn-lg btn-success px-5 py-3">
          <i class="bi bi-bluetooth me-2"></i> Mit Hub verbinden
        </button>
        <p class="mt-3 text-muted small">Stelle sicher, dass der Hub eingeschaltet ist und im Bluetooth-Modus ausgewählt wurde.</p>
      </div>

      <!-- Steuerbereich – anfangs versteckt -->
      <div id="control-section" style="display: none;">
        <div class="card shadow">
          <div class="card-header bg-primary text-white">
            <h5 class="mb-0">Steuerung</h5>
          </div>
          <div class="card-body" id="channels-container">
            <!-- Dynamische Kanäle werden hier per JavaScript eingefügt -->
          </div>
          <div class="card-footer text-center">
            <button id="stop-all-btn" class="btn btn-danger btn-lg px-5">
              <i class="bi bi-stop-fill me-2"></i> Alle stoppen
            </button>
          </div>
        </div>
      </div>

      <!-- Reconnect-Bereich – wird nur bei Verbindungsverlust eingeblendet -->
      <div id="reconnect-section" class="text-center mt-5" style="display: none;">
        <div class="alert alert-warning">
          <strong>Verbindung unterbrochen</strong><br>
          Der Hub reagiert nicht mehr. Bitte erneut verbinden.
        </div>
        <button id="reconnect-btn" class="btn btn-warning btn-lg px-5 py-3">
          <i class="bi bi-arrow-repeat me-2"></i> Erneut verbinden
        </button>
      </div>
    </div>

    <!-- Rechte Spalte: Soundboard (4/12 auf lg) -->
    <div class="col-lg-4">
      <div class="card shadow sticky-top" style="top: 20px;">
        <div class="card-header bg-info text-white">
          <h5 class="mb-0">Soundboard</h5>
        </div>
        <div class="card-body" style="max-height: 70vh; overflow-y: auto;">

          <!-- Lok-spezifische Sounds -->
          {% if config.sounds and config.sounds|length > 0 %}
            <h6 class="mt-0 mb-3">Lok-spezifisch</h6>
            <div class="d-grid gap-2 mb-4">
              {% for sound in config.sounds %}
                <button class="btn btn-outline-primary play-sound-btn"
                        data-sound-id="{{ sound.id }}">
                  {{ sound.name }}
                  {% if sound.description %}
                    <small class="d-block text-muted">{{ sound.description }}</small>
                  {% endif %}
                </button>
              {% endfor %}
            </div>
          {% endif %}

          <!-- Globale / Standard-Sounds -->
          {% if global_sounds and global_sounds|length > 0 %}
            <h6 class="mt-4 mb-3">Standard-Sounds</h6>
            <div class="d-grid gap-2">
              {% for sound in global_sounds %}
                <button class="btn btn-outline-secondary play-sound-btn"
                        data-sound-id="{{ sound.id }}">
                  {{ sound.name }}
                  {% if sound.description %}
                    <small class="d-block text-muted">{{ sound.description }}</small>
                  {% endif %}
                </button>
              {% endfor %}
            </div>
          {% endif %}

          {% if (not config.sounds or config.sounds|length == 0) and (not global_sounds or global_sounds|length == 0) %}
            <p class="text-muted text-center py-4">Keine Sounds konfiguriert</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
  <script>
    // Config + globale Sounds direkt ins JS übergeben
    const config       = {{ config | tojson | safe }};
    const globalSounds = {{ global_sounds | tojson | safe }};
    window.mkConfig    = config;  // falls du es global brauchst
  </script>
{% endblock %}