<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title id="title" data-sitename="{{ site_name }}">{{ page_name }} | {{ site_name }}</title>
    <meta name="description" content="{{ meta_desc }}">
    <meta name="author" content="{{ meta_author }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% for c in css %}
      <link href="{{ c }}" rel="stylesheet" type="text/css">
      {% if "light" in c %}
        {% if debug %}
          <link media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css" href="/static/css/water/dark.standalone.css" />
        {% else %}
          <link media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css" href="/css/water/dark.standalone.min.css" />
        {% endif %}
      {% endif %}
    {% endfor %}

    <link rel="icon" href="{{ favicon_path }}">

  </head>
  <body>
    {% if top_link %}
      <div id="top"></div>
    {% endif %}

    <header>
      <h2 class="center"><a href="{{ url_for('.index') }}" title="The site name, and a link to the main index page.">{{ site_name }}</a></h2>
    </header>

    {% if icons %}<div id="icons-enabled"></div>{% endif %}
    <div data-theme="{{ theme }}" id="current-theme"></div>

    <nav>
      <ul>

        <li>
          <a href="/browse" title="A link to the browse page.">
            {% if icons %}
              <i class="fas fa-book-open"></i>
            {% endif %}Browse
          </a>
        </li>

        {% if secret_key %}

          {% if playlists %}
            <li>
              <a href="{{ url_for('.playlists') }}" title="A link to the playlists page.">
                {% if icons %}
                  <i class="fas fa-list"></i>
                {% endif %}Playlists
              </a>
            </li>
          {% endif %}

            <li><a href="{{ url_for('.queue') }}" title="A link to the queue page.">
              {% if icons %}
                <i class="fas fa-list"></i>
              {% endif %}Queue
            </a>
            </li>

        {% endif %}

        {% if search %}
          <li>
            <a href="{{ url_for('.search') }}" title="A link to the search page.">
              {% if icons %}
                <i class="fas fa-search"></i>
              {% endif %}Search
            </a>
          </li>
        {% endif %}

        {% if secret_key %}
          <li>
            <a href="{{ url_for('.settings') }}" title="A link to the settings page.">
              {% if icons %}
                <i class="fas fa-user-cog"></i>
              {% endif %}Settings
            </a>
          </li>
        {% endif %}

        <li id="logo">
          <a id="logo" href="{% if video_player or video_list %}#videoplayer{% elif audio_player or audio_list %}#audio-time-link{% else %}/{% endif %}">
            <img alt="Fidi Logo and {% if video_player or video_list %}video player{% elif audio_player %}player{% else %}home{% endif %} link" src="{{ logo_path }}" title="The MousikóFídi logo, and a link to the {% if video_player or video_list %}video player{% elif audio_list %}player{% else %}main index page{% endif %}.">
          </a>
        </li>
      </ul>
    </nav>

    <noscript>
      <p class="center">
        <span class="bold red">Javascript is required for the MousikóFídi player.</span>
      </p>
      <p class="center red">Please enable javascript for this domain in order to use it.</p>
    </noscript>

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
          {{ message|safe }}
        {% endfor %}
      {% endif %}
    {% endwith %}

    <div id="content">
      {% block content %}{% endblock %}
    </div>

    {% if top_link %}
      <div id="top-link"><a class="bold" href="#top" title="Click this triangle to navigate back to the top of the current page without reloading it."></a></div> 
    {% endif %}

    <footer class="center">
      <div>
        <a href="{{ url_for('.about') }}">About MousikóFídi</a>{% if debug %} | <a href="{{ url_for('.test_js') }}">Run Javascript Tests</a>{% endif %}
      </div>
      <div>
        <a href="https://git.sr.ht/~hristoast/mousikofidi">MουσικόΦίδι source code hosted by Sourcehut</a> | <a href="http://www.gnu.org/licenses/gpl-3.0.html">Licensed GPLv3</a>
      </div>
      <div>
        <a href="https://watercss.netlify.com/">Dark and Light Theme</a> | <a href="https://nostalgic-css.github.io/NES.css/">NES Theme</a> | <a href="https://fillmyan.us/">Terminal Theme by ogenfald</a>
      </div>
    </footer>

    {% if debug %}
      <script src="/static/js/player.js"></script>
    {% else %}
      <script src="/js/player.min.js"></script>
    {% endif %}
    {% block extra_js %}{% endblock %}

  </body>
</html>
