<!doctype html>
<html lang="{{ ui_language }}">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% block title %}AniWorld Downloader{% endblock %}</title>
  {% set meta_title = self.title() | striptags | trim %}
  {% set meta_description %}{% block meta_description %}AniWorld Downloader Web UI{% endblock %}{% endset %}
  {% include "head_meta.html" %}
  <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v={{ app_version }}" />
  {# ?nocss=1 is the way back in when a theme hides the settings page #}
  {% if custom_css_version and request.args.get('nocss') != '1' %}
  <link rel="stylesheet" data-custom-css href="{{ url_for('pages.custom_css') }}?v={{ custom_css_version }}" />
  {% endif %}
  <script>
    window.UI_LANGUAGE = {{ ui_language | tojson }};
  </script>
  <script src="{{ url_for('static', filename='i18n.js') }}?v={{ app_version }}"></script>
  {% block head %}{% endblock %}
</head>

<body data-page="{{ page_name }}" data-site="" data-queue="idle" data-modal="closed">
  {# Paint surfaces for themes. Empty and invisible until a theme uses them, so
     a theme never has to hijack a pseudo-element that belongs to the app. #}
  <div class="theme-layer" data-layer="1" aria-hidden="true"></div>
  <div class="theme-layer" data-layer="2" aria-hidden="true"></div>
  {% if custom_shader_version and request.args.get('nocss') != '1' %}
  <canvas class="theme-shader" id="themeShader" aria-hidden="true"
    data-src="{{ url_for('pages.custom_shader') }}?v={{ custom_shader_version }}"></canvas>
  {% endif %}

  <header class="top-bar">
    <a href="{{ url_for('pages.index') }}" class="top-bar-brand">
      AniWorld Downloader{% if app_version %} <span class="top-bar-version">v{{ app_version }}</span>{% endif %}
    </a>

    <button class="nav-toggle" id="navToggle" type="button" aria-label="Toggle navigation"
      aria-controls="mainNav" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>

    <nav class="top-bar-nav" id="mainNav">
      <a href="{{ url_for('pages.index') }}" class="top-bar-link" data-i18n="nav.home">Home</a>
      {% if library_enabled %}
      <a href="{{ url_for('pages.library') }}" class="top-bar-link" data-i18n="nav.library">Library</a>
      {% endif %}
      {% if autosync_enabled and (not auth_enabled or (current_user and current_user.role == 'admin')) %}
      <a href="{{ url_for('pages.autosync') }}" class="top-bar-link has-ribbon">
        <span data-i18n="nav.autosync">Auto-Sync</span>
        <span class="new-ribbon" aria-hidden="true">New</span>
      </a>
      {% endif %}
      <a href="{{ url_for('pages.queue') }}" class="top-bar-link">
        <span data-i18n="nav.queue">Queue</span>
        <span class="queue-badge" id="queueBadge" hidden>0</span>
      </a>
      {% if not auth_enabled or (current_user and current_user.role == 'admin') %}
      <a href="{{ url_for('pages.settings') }}" class="top-bar-link" data-i18n="nav.settings">Settings</a>
      {% endif %}
      <a href="{{ github_url }}" class="top-bar-link top-bar-icon" target="_blank" rel="noopener noreferrer"
        title="GitHub" aria-label="GitHub repository">
        <svg viewBox="0 0 16 16" width="17" height="17" aria-hidden="true" fill="currentColor">
          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
            0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
            1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
            0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.42 7.42 0 0 1 2-.27c.68 0
            1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87
            3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16
            8c0-4.42-3.58-8-8-8Z" />
        </svg>
      </a>
      {% if auth_enabled and current_user %}
      <span class="top-bar-user">{{ current_user.username }}</span>
      <a href="{{ url_for('auth.logout') }}" class="top-bar-link" data-i18n="nav.logout">Logout</a>
      {% endif %}
    </nav>
  </header>

  <main class="page">{% block content %}{% endblock %}</main>

  <div class="toast" id="toast" role="status"></div>

  <script src="{{ url_for('static', filename='common.js') }}?v={{ app_version }}"></script>
  <script src="{{ url_for('static', filename='queue-badge.js') }}?v={{ app_version }}"></script>
  {% if custom_shader_version and request.args.get('nocss') != '1' %}
  <script src="{{ url_for('static', filename='shader.js') }}?v={{ app_version }}" defer></script>
  {% endif %}
  {% block scripts %}{% endblock %}
</body>

</html>
