<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>{% block title %}Meine Links{% endblock %}</title>


    <!-- Android Theme Color -->
    <meta name="theme-color" content="#000">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='audioplayer.css') }}">
    <script src="{{ url_for('static', filename='functions.js') }}"></script>
    <script>const admin_enabled = {{ admin_enabled | default(false) | tojson | safe }};</script>

    {% block head_extra %}{% endblock %}
  </head>
  <body>
    <header class="site-header">
      <a href="/" data-ajax-nav>
        <img src="/custom_logo/logoW.png" alt="Logo" class="logo">
      </a>
      <h1>{{ title_long }}</h1>
    </header>
    <div class="wrapper">
      {% if admin_enabled %}
      <!-- Navigation Bar -->
      <div class="admin-nav">
        <div class="admin-nav-rail">
          <div class="admin-nav-track">
            <a href="{{ url_for('index') }}" data-ajax-nav>App</a>
            <span> | </span>
            <a href="{{ url_for('mylinks') }}" data-ajax-nav>Meine Links</a>
            <span> | </span>
            <a href="{{ url_for('folder_secret_config_editor') }}" id="edit-folder-config" data-ajax-nav>Ordnerkonfiguration</a>
            <span> | </span>
          <div class="dropdown dropend d-inline-block">
            <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
              Auswertungen
            </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="{{ url_for('dashboard') }}" data-ajax-nav>Dashbord</a></li>
                <li><a class="dropdown-item" href="{{ url_for('connections') }}" data-ajax-nav>Verbindungen</a></li>
                <li><a class="dropdown-item" href="{{ url_for('file_access') }}" data-ajax-nav>Dateizugriffe</a></li>
                <li><a class="dropdown-item" href="{{ url_for('songs_dashboard') }}" data-ajax-nav>Wiederholungen</a></li>
                <li><a class="dropdown-item" href="{{ url_for('search_db_analyzer') }}" data-ajax-nav>Ordner auswerten</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      {% endif %}

      <div id="page-content" data-page-id="{% block page_id %}{% endblock %}">
        {% block content %}{% endblock %}
      </div>

      <!-- Global Audio Player in Footer -->
      <footer>
        <div class="audio-player-container" id="audioPlayerContainer">
          <button type="button" class="minimize-button icon-color" aria-label="Player einklappen" aria-expanded="true">
            <span class="icon-collapse" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M5 12h14" />
              </svg>
            </span>
            <span class="icon-expand" aria-hidden="true">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M12 5v14M5 12h14" />
              </svg>
            </span>
          </button>
          <div class="audio-player">
            <audio id="globalAudio" prefetch="auto">
              Your browser does not support the audio element.
            </audio>
            <div class="controls">
              <button class="player-button icon-color">
              </button>
              <div class="slider">
                <input type="range" class="timeline" max="100" value="0" step="0.1">
                <div id="timeInfo" class="now-playing-info"></div>
              </div>
              <button class="sound-button icon-color" onclick="player.fileDownload()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path d="M12 2.25A9.75 9.75 0 1 1 2.25 12 9.75 9.75 0 0 1 12 2.25Zm0 5a.75.75 0 0 0-.75.75v4.19l-1.72-1.72a.75.75 0 1 0-1.06 1.06l3.03 3.03a.75.75 0 0 0 1.06 0l3.03-3.03a.75.75 0 1 0-1.06-1.06L12.75 12.2V8a.75.75 0 0 0-.75-.75ZM7.5 15.25a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5Z" />
                </svg>
              </button>
            </div>
          </div>
          <div id="nowPlayingInfo" class="now-playing-info">
            keine Datei ausgewählt...
          </div>
        </div>
      </footer>
    </div>

    <script src="{{ url_for('static', filename='audioplayer.js') }}"></script>
    {% block scripts %}{% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='general.js') }}"></script>
    <script src="{{ url_for('static', filename='page_registry.js') }}"></script>
    <script src="{{ url_for('static', filename='app.js') }}"></script>
    <script src="{{ url_for('static', filename='gallery.js') }}"></script>
    <script src="{{ url_for('static', filename='search.js') }}"></script>
    <script src="{{ url_for('static', filename='messages.js') }}"></script>
    <script src="{{ url_for('static', filename='calendar.js') }}"></script>
    <script src="{{ url_for('static', filename='file_access.js') }}"></script>
    <script src="{{ url_for('static', filename='connections.js') }}"></script>
    <script src="{{ url_for('static', filename='dashboard.js') }}"></script>
    <script src="{{ url_for('static', filename='folder_secret_config_editor.js') }}"></script>
    <script src="{{ url_for('static', filename='search_db_analyzer.js') }}"></script>
    <script src="{{ url_for('static', filename='page_router.js') }}"></script>
  </body>
</html>
