<!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=900" />
  <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='css/jquery-ui.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/jquery.tagit.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/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('settings.custom_styles') }}">

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

  <!-- this calls a route defined in app_factory to never cache this file -->
  <script type="text/javascript" src="/static/js/never_cache/lute.js" charset="utf-8"></script>
</head>
<body>

  {% 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">
    <a href="/" class="home-link">
      <div class="header">
        <img src="{{ url_for('static', filename='img/lute.png') }}" class="lutelogo" alt="LUTE Logo">
        <div class="title-container">
          <h1 id="luteTitle" title="Learning Using Texts">
            {% if self.header() | trim %}
            {% block header %}{% endblock %}
            {% else %}
            Lute
            {% endif %}
          </h1>
        </div>
      </div>
    </a>
    <div class="menu">
      <div class="menu-item">
        <span>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 id="term_parent_index" href="/term_parent_map/index">Parent Term mapping</a></li>
          <li><a href="/termtag/index">Term Tags</a></li>
        </ul>
      </div>
      <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>
        </ul>
      </div>
      {% if backup_acknowledged 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 %}
          <li>last backup: {{ backup_last_display_date }}</li>
          {% endif %}
          <li><a href="/backup/backup?type=manual">Create backup</a></li>
        </ul>
      </div>
      {% endif %}
      <div class="menu-item">
        <span>About</span>
        <ul class="sub-menu last-sub-menu">
          <li><a href="/version">Version and software info</a></li>
          <li><a href="https://github.com/jzohrab/lute/wiki/">Docs</a></li>
          <li><a href="https://discord.gg/CzFUQP5m8u">Discord</a></li>
        </ul>
      </div>
    </div>
  </div>
  {% endif %}

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

  {% block body %}{% endblock %}
</body>
</html>
