{% extends "base.html" %}

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

{% block content %}

<div class="container my-4">

  <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>

    <!-- Status-Anzeige -->
    <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">
            <i class="bi bi-circle-fill me-2 text-muted"></i> Nicht verbunden
        </div>
    </div>

  <!-- Connect-Button -->
  <div class="text-center mb-5" id="connect-section">
    <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 angezeigt, wenn Verbindung verloren -->
    <div class="text-center mt-5" id="reconnect-section" 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>

{% endblock %}


{% block scripts %}
  <script>
    // config global verfügbar machen
    window.mkConfig = {{ config | tojson | safe }};

    console.log("window.mkConfig gesetzt:", window.mkConfig);
    console.log("Channels:", window.mkConfig?.channels);
  </script>
{% endblock %}