{% extends "base.html" %}

{% block title %}Bearbeite Theme {{ filename }}{% endblock %}

{% block content %}
<div class="container my-5">
  <h1>Bearbeite Soundboard-Theme</h1>
  <h4 class="text-muted mb-4">{{ filename }}</h4>

  {% if error %}
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      {{ error }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endif %}

  <form method="POST">
    <div class="mb-3">
      <label for="config_content" class="form-label">JSON-Inhalt (Theme):</label>
      <textarea class="form-control font-monospace" id="config_content" name="config_content" rows="24">{{ content }}</textarea>
    </div>
    <div class="d-flex gap-3">
      <button type="submit" class="btn btn-primary btn-lg px-5">Speichern</button>
      <a href="{{ url_for('admin.admin') }}" class="btn btn-outline-secondary btn-lg px-5">Abbrechen</a>
    </div>
  </form>

  <div class="mt-4">
    <h5>Beispielstruktur (Theme)</h5>
    <pre class="bg-light p-3 rounded">
{
  "name": "Wilder Westen",
  "backgrounds": [
    {"id": "wind", "file": "wind.mp3", "loop": true, "channel": 0}
  ],
  "sounds": [
    {"id": "pfeife", "file": "pfeife.mp3", "channel": 2}
  ],
  "random_pool": [
    {"id": "durchsage1", "file": "durchsage1.mp3"}
  ],
  "random_limit_per_hour": 2,
  "random_window_minutes": 60
}
    </pre>
  </div>
</div>
{% endblock %}