<!doctype html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>{% block title %}LUTE{% endblock %}</title>

  {% if config.ENV == 'dev' %}
  <link rel="icon" href="{{ url_for('static', filename='favicon_dev.ico') }}" type="image/x-icon"/>
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon_dev.ico') }}" type="image/x-icon"/>
  {% else %}
  <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}?v=2" type="image/x-icon"/>
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}?v=2" type="image/x-icon"/>
  {% endif %}

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="apple-touch-icon" href="{{ url_for('static', filename='img/apple-touch-icon-57x57.png') }}" />
  <link rel="apple-touch-icon" sizes="72x72" href="{{ url_for('static', filename='img/apple-touch-icon-72x72.png') }}" />
  <link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}" />
  <link rel="apple-touch-startup-image" href="{{ url_for('static', filename='img/apple-touch-startup.png') }}" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
    
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/jquery/jquery-ui.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/tagify/tagify.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/tagify/tagify_overrides.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/datatables/datatables.min.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/player-styles.css') }}" />

  <link rel="stylesheet" type="text/css" href="/theme/current">
  <link rel="stylesheet" type="text/css" href="/theme/custom_styles">

  {% block preloadassets %}{% endblock %}

  <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.js') }}" charset="utf-8"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.scrollTo.min.js') }}" charset="utf-8"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery-ui.min.js') }}"  charset="utf-8"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.jeditable.mini.js') }}" charset="utf-8"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='vendor/tagify/tagify.min.js') }}" charset="utf-8"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='vendor/tagify/tagify.polyfills.min.js') }}" charset="utf-8"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='vendor/datatables/datatables.min.js') }}" charset="utf-8"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='vendor/datatables/datatables.button.download.js') }}" charset="utf-8"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.hoverIntent.js') }}" charset="utf-8"></script>

  <!-- the "never_cache" calls a route defined in app_factory to never cache that particular .js file -->
  <script type="text/javascript" src="/static/js/never_cache/lute-hotkey-utils.js" charset="utf-8"></script>
  <script type="text/javascript" src="/static/js/never_cache/lute.js" charset="utf-8"></script>

  <script type="text/javascript">
    const LUTE_USER_SETTINGS = {{ user_settings | safe }}
  </script>
</head>
<body>

<div class="container">
  {% if config.ENV == 'dev' %}
  <p style="background-color: blue; color: white; margin: 2px; padding: 2px;">Dev environment.</p>
  {% endif %}

  {% if not hide_top_menu %}
  {# Menu bar variables are injected with @app.context_processor in the app_factory. #}
  <div class="menu-bar">
    <div class="header">
      <a href="/" class="home-link">
        <img src="{{ url_for('static', filename='img/lute.png') }}" class="lutelogo" alt="LUTE Logo">
      </a>
      <div class="title-container">
        <h1 id="luteTitle" title="Learning Using Texts">
          {% if self.header() | trim %}
          {% block header %}{% endblock %}
          {% else %}
          Lute
          {% endif %}
        </h1>
      </div>
    </div>
    <div class="menu">
      {% if not hide_homelink %}
      <div class="menu-item">
        <span><a class="home-link" href="/">Home</a></span>
      </div>
      {% endif %}
      {% if have_languages %}
      <div class="menu-item">
        <span id="menu_books">Books</span>
        <ul class="sub-menu">
          <li><a id="book_new" href="/book/new">Create new Book</a></li>
          <li><a href="/book/import_webpage">Import web page</a></li>
          <li><a href="/book/archived">Book archive</a></li>
        </ul>
      </div>
      <div class="menu-item">
        <span id="menu_terms">Terms</span>
        <ul class="sub-menu">
          <li><a id="term_index" href="/term/index">Terms</a></li>
          <li><a id="term_import_index" href="/termimport/index">Import Terms</a></li>
          <li><a href="/termtag/index">Term Tags</a></li>
        </ul>
      </div>
      {% endif %}
      <div class="menu-item">
        <span id="menu_settings">Settings</span>
        <ul class="sub-menu">
          <li><a id="lang_index" href="/language/index">Languages</a></li>
          <li><a href="/settings/index">Settings</a></li>
          <li><a href="/settings/shortcuts">Keyboard shortcuts</a></li>
        </ul>
      </div>
      {% if backup_enabled and backup_directory != '' %}
      <div class="menu-item">
        <span>Backup</span>
        <ul class="sub-menu last-sub-menu">
          {% if backup_last_display_date is not none %}
          {% if backup_time_since is not none %}
          <li>Last backup was {{ backup_time_since }}.</li>
          {% endif %}
          <li>{{ backup_last_display_date | format }}</li>
          <hr>
          {% endif %}
          <li><a id="backup_index" href="/backup/index">Backups</a></li>
          <li><a href="/backup/backup?type=manual">Create backup</a></li>
        </ul>
      </div>
      {% endif %}
      <div class="menu-item">
        <span id="menu_about">About</span>
        <ul class="sub-menu last-sub-menu">
          <li><a href="/version">Version and software info</a></li>
          <li><a href="/stats/">Statistics</a></li>
          <li><a href="https://luteorg.github.io/lute-manual/" target="_blank">Docs</a></li>
          <li><a href="https://discord.gg/CzFUQP5m8u" target="_blank">Discord</a></li>
        </ul>
      </div>
    </div>
  </div>
  {% endif %}

  {% with messages = get_flashed_messages() %}
  {% for message in messages %}
  <div class="flash-notice">{{ message | safe}}</div>
  {% endfor %}
  {% endwith %}

  {% block body %}{% endblock %}

</div>
</body>
</html>
