<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CANCOM Simple Signage Admin</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">

<!-- ─── Dark Mode: Theme vor dem Rendern setzen ─── -->
<script>
(() => {
  const stored = window.localStorage.getItem("signage-theme");
  const theme = stored === "dark" || stored === "light" ? stored : "light";
  document.documentElement.setAttribute("data-bs-theme", theme);
})();
</script>

<!-- ─── Externe Bibliotheken (Tabler CSS/JS, SortableJS) ─── -->
<link rel="stylesheet"
      href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<script defer
        src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
<script defer
        src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

{% include "_styles.html" %}

<style>
  /* ─── Tooltip-Styling (CANCOM-rot) ─── */
  .tooltip {
    --bs-tooltip-border-color: var(--ccm-primary);
  }
  .tooltip .tooltip-inner {
    border: 1px solid var(--ccm-primary);
    background-color: #ffffff;
    color: #212121;
    box-shadow: none;
  }
  .tooltip .tooltip-arrow::before {
    border-top-color: var(--ccm-primary);
    border-bottom-color: var(--ccm-primary);
    background-color: #ffffff;
  }

  /* ─── Playlist-Zeile als Grid (Checkbox | Name | Typ | Größe | Löschen | Drag) ─── */
  .playlist-row {
    display: grid;
    grid-template-columns:
      28px 1fr 90px 80px 90px 32px;
    align-items: center;
    gap: 0.75rem;
  }

  .playlist-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .playlist-size {
    color: #6c757d;
    font-size: 0.9em;
  }

  /* ─── Player-URL im Screen-Header als Link (grau, rot bei Hover) ─── */
  .page-subtitle a {
    color: inherit;
    text-decoration: none;
  }
  .page-subtitle a:hover {
    color: var(--ccm-primary);
  }

  /* ─── Drag-Handle für SortableJS ─── */
  .drag-handle {
    cursor: grab;
    font-size: 1.2em;
    text-align: center;
    user-select: none;
  }
  .drag-handle:active {
    cursor: grabbing;
  }

  /* ─── Tab-Styling (extend to card edges, unified background) ─── */
  .card-body .nav-tabs {
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0 1rem;
    border-bottom-color: var(--ccm-border);
  }
  .card-body .nav-tabs .nav-link {
    background: transparent;
    color: var(--ccm-muted);
  }
  .card-body .nav-tabs .nav-link.active {
    background: var(--ccm-surface);
    border-color: var(--ccm-border) var(--ccm-border) var(--ccm-surface);
    color: var(--ccm-text);
  }
  .card-body .tab-content {
    background: var(--ccm-surface);
    padding: 1rem;
  }
</style>
</head>
<body>
<div class="page">

{% set brand_subtitle = "Admin Dashboard" %}
{% set site_dropdown_url_prefix = "/admin/" %}
{% include "_header.html" %}

<!-- ═══════════════════════════════════════════════════
     Navigation (zweite Zeile)
     Übersicht | Priority | Willkommensseite | Screens-Dropdown | +
     ═══════════════════════════════════════════════════ -->
<div class="navbar-expand-md">
  <div class="collapse navbar-collapse show">
    <div class="navbar navbar-dark nav-surface">
      <div class="container-xl">
        <div class="d-flex flex-wrap gap-2 py-2">
          <a class="btn btn-white active" href="/admin/{{ current_site }}"><i class="ti ti-layout-dashboard me-1"></i>Übersicht</a>
          <a class="btn btn-white" href="/admin/{{ current_site }}/priority"><i class="ti ti-alert-triangle me-1"></i>Priority Playlist</a>
           <a class="btn btn-white" href="/willkommen?site={{ current_site }}"><i class="ti ti-file-plus me-1"></i>Willkommensseite</a>
          <div class="dropdown d-inline-block">
            <button class="btn btn-white" type="button" data-bs-toggle="dropdown">
              <i class="ti ti-device-desktop me-1"></i>Screens <i class="ti ti-chevron-down"></i>
            </button>
            <div class="dropdown-menu">
              {% for s in screens.keys() %}
                <a class="dropdown-item" href="#screen-{{ s }}"><i class="ti ti-device-desktop me-1"></i>{{ s | capitalize }}</a>
              {% endfor %}
            </div>
          </div>
          <!-- + Button: Neuen Screen anlegen (prompt → /admin/<site>/add-screen?name=...) -->
          <a class="btn btn-white" href="javascript:void(0)"
             onclick="var n=prompt('Name des neuen Screens:'); if(n&&n.trim()) location.href='/admin/{{ current_site }}/add-screen?name='+encodeURIComponent(n.trim().toLowerCase());"
             title="Neuen Screen anlegen"><i class="ti ti-plus"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ═══════════════════════════════════════════════════
     CONTENT
     ═══════════════════════════════════════════════════ -->
  <div class="page-wrapper">
    <div class="container-xl mt-4">

      <!-- ─── Standort löschen (Button oben rechts, nur für Admins) ─── -->
      {% if current_user.is_admin %}
      <div class="d-flex justify-content-end mb-3">
        <form action="/admin/{{ current_site }}/delete-site" method="post"
              onsubmit="return confirm('Standort »{{ current_site }}« wirklich löschen? Alle Screens und Medien werden gelöscht.')">
          <button type="submit" class="btn btn-outline-danger btn-sm"><i class="ti ti-building-off me-1"></i>Standort löschen</button>
        </form>
      </div>
      {% endif %}

      <!-- ========================= -->
      <!-- SCREEN-CARDS              -->
      <!-- ========================= -->

      {% for screen, cfg in screens.items() %}
      <div class="card mb-6" id="screen-{{ screen }}">

        <!-- Card-Header: Screen-Name, Status-Badge, Player-URL, Löschen -->
        <div class="card-header d-flex justify-content-between align-items-center">
          <span>
            <div class="page-title">{{ current_site | capitalize }}:&nbsp;<span class="fw-normal">Screen</span>&nbsp;<span class="text-uppercase">- {{ screen }}</span></div>
            <div class="page-subtitle"><a href="{{ server_url }}/player/{{ current_site }}/{{ screen }}">{{ server_url }}/player/{{ current_site }}/{{ screen }}</a></div>
          </span>
          <div class="d-flex align-items-center gap-2">
          {% if screen_status[screen] == "online" %}
            <button type="button" class="btn btn-sm btn-success" onclick="return false;"
              title="Browser: {{ client_info[screen].get('ua', '?')[:60] }}&#10;Auflösung: {{ client_info[screen].get('resolution', '?') }}&#10;IP: {{ client_info[screen].get('ip', '?') }}&#10;Zuletzt: {{ client_info[screen].get('last_seen', '?') }}">Online</button>
          {% else %}
            <button type="button" class="btn btn-sm btn-danger" onclick="return false;">Offline</button>
          {% endif %}
          <form action="/admin/{{ current_site }}/delete-screen/{{ screen }}"
                method="post" class="d-inline m-0 p-0"
                onsubmit="return confirm('Screen »{{ screen }}« wirklich löschen? Alle Medien werden gelöscht.')">
            <button type="submit" class="btn btn-outline-danger btn-sm">Löschen</button>
          </form>
          </div>
        </div>

        <!-- Card-Body: Tabs (Playlist | Einstellungen | Aktionen | Digital Voice Agent | Medien | Info) -->
        <div class="card-body">

          <ul class="nav nav-tabs" data-bs-toggle="tabs" role="tablist">
            <li class="nav-item" role="presentation">
              <a href="#tab-playlist-{{ screen }}" class="nav-link active" data-bs-toggle="tab" role="tab">
                <i class="ti ti-list me-1"></i>Playlist
              </a>
            </li>
            <li class="nav-item" role="presentation">
              <a href="#settings-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
                <i class="ti ti-settings me-1"></i>Einstellungen
              </a>
            </li>
            <li class="nav-item" role="presentation">
              <a href="#actions-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
                <i class="ti ti-click me-1"></i>Aktionen
              </a>
            </li>
            <li class="nav-item" role="presentation">
              <a href="#voice-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
                <i class="ti ti-robot me-1"></i>Digital Voice Agent
              </a>
            </li>
            <li class="nav-item" role="presentation">
              <a href="#media-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
                <i class="ti ti-upload me-1"></i>Medien
              </a>
            </li>
            <li class="nav-item" role="presentation">
              <a href="#info-{{ screen }}" class="nav-link" data-bs-toggle="tab" role="tab">
                <i class="ti ti-info-circle me-1"></i>Info
              </a>
            </li>
          </ul>

          <div class="tab-content mt-3">

            <!-- ═══ Tab: Playlist ═══ -->
            <div class="tab-pane active" id="tab-playlist-{{ screen }}" role="tabpanel">
              <ul class="list-group mb-3" id="playlist-{{ screen }}">
                {% for file in media_files[screen] %}
                <li class="list-group-item playlist-row"
                    data-file="{{ file.name }}">

                  <!-- Aktiv-Checkbox -->
                  <input class="form-check-input playlist-enabled"
                         type="checkbox"
                         {% if file.enabled %}checked{% endif %}
                         title="Element aktivieren">

                  <!-- Dateiname (mit Tooltip-Vorschau) -->
                  <span class="playlist-name"
                        {% if file.type == "image" %}
                          data-bs-toggle="tooltip"
                          data-bs-html="true"
                          title="<img src='/media/{{ current_site }}/{{ screen }}/{{ file.name }}' style='max-width: 200px; max-height: 150px; border: none; background: white; padding: 2px;' alt='Vorschau'>"
                        {% elif file.type == "url" %}
                          data-bs-toggle="tooltip"
                          title="URL: {{ file.name }}{% if file.zoom %} (Zoom: {{ file.zoom }}x){% endif %}"
                        {% endif %}>
                    {{ file.name }}{% if file.type == "url" and file.zoom != 1.0 %} <strong style="color: #DA002D;">[{{ file.zoom }}x]</strong>{% endif %}
                  </span>

                  <!-- Typ-Badge -->
                  {% if file.type == "image" %}
                    <span class="badge bg-purple text-purple-fg">Bild</span>
                  {% elif file.type == "url" or file.type == "html" %}
                    <span class="badge bg-blue text-blue-fg">URL</span>
                  {% else %}
                    <span class="badge bg-orange text-orange-fg">Video</span>
                  {% endif %}

                  <!-- Größe -->
                  <span class="playlist-size">
                    {% if file.type == "url" %}
                      {{ file.size }}
                    {% else %}
                      {{ file.size }} KB
                    {% endif %}
                  </span>

                  <!-- Löschen -->
                  <form action="{{ url_for('delete_file', site=current_site, screen=screen, filename=file.name) }}"
                        method="post">
                    <button type="submit"
                            class="btn btn-outline-danger btn-sm"
                            onclick="return confirm('Datei wirklich löschen?')">
                      Löschen
                    </button>
                  </form>

                  <!-- Drag-Handle (SortableJS) -->
                  <span class="drag-handle" title="Reihenfolge ändern">⇅</span>
                </li>
                {% endfor %}
              </ul>

              <button class="btn btn-primary"
                      onclick="savePlaylist('{{ current_site }}', '{{ screen }}')">
                Playlist speichern
              </button>
            </div>

            <!-- ═══ Tab: Einstellungen ═══ -->
            <div class="tab-pane" id="settings-{{ screen }}" role="tabpanel">
              <form action="/admin/{{ current_site }}/update/{{ screen }}" method="post">
                <div class="mb-2">
                  <label class="form-label">Intervall (Sekunden)</label>
                  <input type="number" class="form-control"
                         name="interval" min="1" value="{{ cfg.interval }}">
                </div>

                <div class="mb-4">
                  <label class="form-label">Newsticker-Text</label>
                  <input type="text" class="form-control" name="newsticker_text" value="{{ cfg.newsticker_text|default('') }}" maxlength="200">
                </div>

                <div class="form-check form-switch mb-2">
                  <input class="form-check-input" type="checkbox"
                         name="newsticker_enabled"
                         {% if cfg.newsticker_enabled %}checked{% endif %}>
                  <label class="form-check-label">Newsticker anzeigen</label>
                </div>

                <div class="form-check form-switch mb-2">
                  <input class="form-check-input" type="checkbox"
                         name="show_images"
                         {% if cfg.show_images %}checked{% endif %}>
                  <label class="form-check-label">Bilder anzeigen</label>
                </div>

                <div class="form-check form-switch mb-4">
                  <input class="form-check-input" type="checkbox"
                         name="show_videos"
                         {% if cfg.show_videos %}checked{% endif %}>
                  <label class="form-check-label">Videos anzeigen</label>
                </div>

                <div class="form-check form-switch mb-4">
                  <input class="form-check-input" type="checkbox"
                         name="stay_on_first"
                         {% if cfg.stay_on_first %}checked{% endif %}>
                  <label class="form-check-label">Auf erstem Element stehen bleiben (kein Refresh)</label>
                </div>

                <button type="submit" class="btn btn-primary">
                  Einstellungen speichern
                </button>
              </form>
            </div>

            <!-- ═══ Tab: Aktionen ═══ -->
            <div class="tab-pane" id="actions-{{ screen }}" role="tabpanel">
              <form action="/admin/{{ current_site }}/update-actions/{{ screen }}" method="post">
                <h3>Aktions-Button (Player)</h3>
                <div class="form-check form-switch mb-3">
                  <input class="form-check-input" type="checkbox"
                         name="custom_url_enabled"
                         {% if cfg.custom_url_enabled %}checked{% endif %}>
                  <label class="form-check-label">Aktions-Button anzeigen</label>
                </div>
                <div class="mb-2">
                  <label class="form-label">Button-URL</label>
                  <input type="url" name="custom_url" class="form-control"
                         placeholder="https://example.com" value="{{ cfg.custom_url|default('') }}">
                </div>
                <div class="mb-4">
                  <label class="form-label">Button-Beschriftung</label>
                  <input type="text" name="custom_url_label" class="form-control"
                         placeholder="z. B. Infos" value="{{ cfg.custom_url_label|default('') }}" maxlength="50">
                </div>
                <div class="mb-4">
                  <label class="form-label">Verhalten bei Klick</label>
                  <select name="custom_url_target" class="form-select">
                    <option value="overlay" {% if cfg.custom_url_target|default('overlay') == 'overlay' %}selected{% endif %}>Im Player (iframe mit Zurück-Button)</option>
                    <option value="redirect" {% if cfg.custom_url_target|default('overlay') == 'redirect' %}selected{% endif %}>Weiterleitung (gleiches Fenster)</option>
                  </select>
                </div>
                <div class="mb-4">
                  <label class="form-label">Position</label>
                  <select name="custom_url_position" class="form-select">
                    <optgroup label="Oben">
                      <option value="top-left" {% if cfg.custom_url_position|default('top-left') == 'top-left' %}selected{% endif %}>Oben links</option>
                      <option value="top-center" {% if cfg.custom_url_position|default('top-left') == 'top-center' %}selected{% endif %}>Oben mitte</option>
                      <option value="top-right" {% if cfg.custom_url_position|default('top-left') == 'top-right' %}selected{% endif %}>Oben rechts</option>
                    </optgroup>
                    <optgroup label="Mitte">
                      <option value="middle-left" {% if cfg.custom_url_position|default('top-left') == 'middle-left' %}selected{% endif %}>Mitte links</option>
                      <option value="middle-center" {% if cfg.custom_url_position|default('top-left') == 'middle-center' %}selected{% endif %}>Mitte zentriert</option>
                      <option value="middle-right" {% if cfg.custom_url_position|default('top-left') == 'middle-right' %}selected{% endif %}>Mitte rechts</option>
                    </optgroup>
                    <optgroup label="Unten">
                      <option value="bottom-left" {% if cfg.custom_url_position|default('top-left') == 'bottom-left' %}selected{% endif %}>Unten links</option>
                      <option value="bottom-center" {% if cfg.custom_url_position|default('top-left') == 'bottom-center' %}selected{% endif %}>Unten mitte</option>
                      <option value="bottom-right" {% if cfg.custom_url_position|default('top-left') == 'bottom-right' %}selected{% endif %}>Unten rechts</option>
                    </optgroup>
                  </select>
                </div>
                <button type="submit" class="btn btn-primary">
                  Einstellungen speichern
                </button>
              </form>
            </div>

            <!-- ═══ Tab: Digital Voice Agent (pro Screen: Enabled, Label, Ziel, Position, Bild) ═══ -->
            <div class="tab-pane" id="voice-{{ screen }}" role="tabpanel">
              <form action="/admin/{{ current_site }}/update-voice/{{ screen }}" method="post">
                <h3>Digital Voice Agent</h3>
                <div class="form-check form-switch mb-3">
                  <input class="form-check-input" type="checkbox"
                         name="voice_agent_enabled"
                         {% if cfg.voice_agent_enabled %}checked{% endif %}>
                  <label class="form-check-label">Voice Agent anzeigen</label>
                </div>
                <div class="form-check form-switch mb-3">
                  <input class="form-check-input" type="checkbox"
                         name="voice_agent_show_image"
                         {% if cfg.voice_agent_show_image %}checked{% endif %}>
                  <label class="form-check-label">Bild (dva.png) über dem Button anzeigen <span class="badge bg-warning text-dark ms-1">Beta</span></label>
                </div>
                <div class="mb-2">
                  <label class="form-label">URL (fest in config.json definiert)</label>
                  <input type="url" class="form-control" value="{{ voice_agent_url|default('') }}" readonly>
                </div>
                <div class="mb-4">
                  <label class="form-label">Button-Beschriftung</label>
                  <input type="text" name="voice_agent_label" class="form-control"
                         placeholder="z. B. Digitaler Assistent" value="{{ cfg.voice_agent_label|default('Digitaler Assistent') }}" maxlength="50">
                </div>
                <div class="mb-4">
                  <label class="form-label">Verhalten bei Klick</label>
                  <select name="voice_agent_target" class="form-select">
                    <option value="overlay" {% if cfg.voice_agent_target|default('overlay') == 'overlay' %}selected{% endif %}>Im Player (iframe mit Zurück-Button)</option>
                    <option value="redirect" {% if cfg.voice_agent_target|default('overlay') == 'redirect' %}selected{% endif %}>Weiterleitung (gleiches Fenster)</option>
                  </select>
                </div>
                <div class="mb-4">
                  <label class="form-label">Position</label>
                  <select name="voice_agent_position" class="form-select">
                    <optgroup label="Oben">
                      <option value="top-left" {% if cfg.voice_agent_position|default('top-left') == 'top-left' %}selected{% endif %}>Oben links</option>
                      <option value="top-center" {% if cfg.voice_agent_position|default('top-left') == 'top-center' %}selected{% endif %}>Oben mitte</option>
                      <option value="top-right" {% if cfg.voice_agent_position|default('top-left') == 'top-right' %}selected{% endif %}>Oben rechts</option>
                    </optgroup>
                    <optgroup label="Mitte">
                      <option value="middle-left" {% if cfg.voice_agent_position|default('top-left') == 'middle-left' %}selected{% endif %}>Mitte links</option>
                      <option value="middle-center" {% if cfg.voice_agent_position|default('top-left') == 'middle-center' %}selected{% endif %}>Mitte zentriert</option>
                      <option value="middle-right" {% if cfg.voice_agent_position|default('top-left') == 'middle-right' %}selected{% endif %}>Mitte rechts</option>
                    </optgroup>
                    <optgroup label="Unten">
                      <option value="bottom-left" {% if cfg.voice_agent_position|default('top-left') == 'bottom-left' %}selected{% endif %}>Unten links</option>
                      <option value="bottom-center" {% if cfg.voice_agent_position|default('top-left') == 'bottom-center' %}selected{% endif %}>Unten mitte</option>
                      <option value="bottom-right" {% if cfg.voice_agent_position|default('top-left') == 'bottom-right' %}selected{% endif %}>Unten rechts</option>
                    </optgroup>
                  </select>
                </div>
                <button type="submit" class="btn btn-primary">
                  Einstellungen speichern
                </button>
              </form>
            </div>

            <!-- ═══ Tab: Medien ═══ -->
            <div class="tab-pane" id="media-{{ screen }}" role="tabpanel">
              <h3>Medien hochladen</h3>
              <form action="/admin/{{ current_site }}/upload/{{ screen }}"
                    method="post" enctype="multipart/form-data">
                <div class="input-group mb-3">
                  <input type="file" name="file" class="form-control" required>
                  <button class="btn btn-primary" type="submit">Upload</button>
                </div>
              </form>

              <hr>
              <h3>URL hinzufügen</h3>
              <form action="/admin/{{ current_site }}/add-url/{{ screen }}" method="post" class="mb-4">
                <div class="mb-2">
                  <label class="form-label">URL</label>
                  <input type="url" name="url" class="form-control"
                         placeholder="https://example.com" required>
                </div>
                <div class="mb-2">
                  <label class="form-label">Zoom Faktor (z.B. 1.0, 1.5, 2.0)</label>
                  <input type="number" name="zoom" class="form-control" step="0.1" value="1.0" min="0.1">
                </div>
                <button class="btn btn-primary" type="submit">URL hinzufügen</button>
              </form>
            </div>

            <!-- ═══ Tab: Info (Client-Informationen) ═══ -->
            <div class="tab-pane" id="info-{{ screen }}" role="tabpanel">
              <h3>Client-Informationen</h3>
              {% if client_info[screen] %}
              <table class="table table-sm">
                <tbody>
                  <tr>
                    <th style="width:140px">IP-Adresse</th>
                    <td><code>{{ client_info[screen].get('ip', '') }}</code></td>
                  </tr>
                  <tr>
                    <th>Browser</th>
                    <td style="word-break:break-all"><small>{{ client_info[screen].get('ua', '') }}</small></td>
                  </tr>
                  <tr>
                    <th>Auflösung</th>
                    <td>{{ client_info[screen].get('resolution', '') }}</td>
                  </tr>
                  <tr>
                    <th>Zuletzt gesehen</th>
                    <td>{{ client_info[screen].get('last_seen', '') }}</td>
                  </tr>
                </tbody>
              </table>
              {% else %}
              <p class="text-muted">Noch keine Client-Daten vorhanden. Der Player muss mindestens einmal die Playlist aufgerufen haben.</p>
              {% endif %}
            </div>

          </div> <!-- /tab-content -->

        </div> <!-- /card-body -->
      </div> <!-- /card -->
      {% endfor %}

    </div> <!-- /container -->
  </div> <!-- /page-wrapper -->

  <!-- Footer -->
  {% include "_footer.html" %}

</div> <!-- /page -->

<script>
document.addEventListener("DOMContentLoaded", function () {

  /* ─── SortableJS Drag & Drop initialisieren ─── */
  function initSortable(name) {
    const el = document.getElementById("playlist-" + name);
    if (!el || typeof Sortable === "undefined") return;

    new Sortable(el, {
      animation: 150,
      handle: ".drag-handle",
      ghostClass: "bg-light",
      chosenClass: "bg-light"
    });
  }

  // Für jeden Screen eine Sortable-Instanz
  {% for screen in screens.keys() %}
    initSortable("{{ screen }}");
  {% endfor %}

  /* ─── Playlist-Reihenfolge speichern ───
       Sendet die aktuelle Sortierung als JSON an /admin/<site>/playlist/<screen> */
  function savePlaylist(site, screen) {
    const items = document.querySelectorAll(
      "#playlist-" + screen + " li"
    );
    const playlist = [];

    const enabled = {};
    items.forEach((item) => {
      const checkbox = item.querySelector(".playlist-enabled");
      const fileName = item.dataset.file;
      enabled[fileName] = !!(checkbox && checkbox.checked);
      playlist.push(fileName);
    });

    fetch("/admin/" + site + "/playlist/" + screen, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        playlist: playlist,
        enabled: enabled
      })
    }).then(() => location.reload());
  }

  window.savePlaylist = savePlaylist;

  /* ─── Bootstrap Tooltips initialisieren ─── */
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });

});
</script>

</body>
</html>
