<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>CANCOM Simple Signage – Priority Playlist</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">

<script>
(() => {
  const stored = window.localStorage.getItem("signage-theme");
  const theme = stored === "dark" || stored === "light" ? stored : "light";
  document.documentElement.setAttribute("data-bs-theme", theme);
})();
</script>

<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>
  .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;
  }

  .drag-handle {
    cursor: grab;
    font-size: 1.2em;
    text-align: center;
    user-select: none;
  }
  .drag-handle:active {
    cursor: grabbing;
  }

  .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 = "Priority Playlist" %}
{% set site_dropdown_url_prefix = "/admin/" %}
{% include "_header.html" %}

<!-- Second Nav -->
<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" href="/admin/{{ current_site }}"><i class="ti ti-layout-dashboard me-1"></i>Übersicht</a>
          <a class="btn btn-white active" 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>
      </div>
    </div>
  </div>
</div>

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

  <!-- ========================= -->
  <!-- PRIORITY / GLOBAL PLAYLIST -->
  <!-- ========================= -->
  <div class="card mb-6">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span>
        <div class="page-title" style="color:#DA002D;">⚠ PRIORITY Playlist</div>
        <div class="page-subtitle">wirkt auf alle Player</div>
      </span>
    </div>

    <div class="card-body">

      <ul class="nav nav-tabs" data-bs-toggle="tabs" role="tablist">
        <li class="nav-item" role="presentation">
          <a href="#tab-prio-playlist" 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="#tab-prio-media" class="nav-link" data-bs-toggle="tab" role="tab">
            <i class="ti ti-upload me-1"></i>Medien
          </a>
        </li>
      </ul>

      <div class="tab-content">

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

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

              <span class="playlist-name"
                    {% if file.type == "image" %}
                      data-bs-toggle="tooltip"
                      data-bs-html="true"
                      title="<img src='/media/priority/{{ 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>

              {% 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 %}

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

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

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

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

        <!-- Tab: Medien -->
        <div class="tab-pane" id="tab-prio-media" role="tabpanel">
          <h3>Medien hochladen</h3>
          <form action="/admin/{{ current_site }}/upload/priority"
                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/priority" method="post" class="mb-3">
            <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>

      </div>

    </div>
  </div>

  </div>
</div>

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

</div>

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

  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"
    });
  }

  initSortable("priority");

  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;

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

});
</script>

</body>
</html>
