{% import "macros.jinja" as macros %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="theme-color" content="#ee6e73">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
      nopaque
      {% if title and request.path != url_for('main.index') %}
      – {{ title }}
      {% endif %}
    </title>
    <link rel="icon" href="{{ url_for('static', filename='images/nopaque_logo.png') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
    {% if current_user.is_authenticated %}
    <style>
      /*
       * ### Start sidenav-fixed offset ###
       * The sidenav-fixed class is used which causes the sidenav to be fixed and open
       * on large screens and hides to the regular functionality on smaller screens.
       * In order to prevent the sidenav to overlap the content, the content (in our
       * case header, main and footer) gets an offset equal to the width of the
       * sidenav.
      */
      @media only screen and (min-width : 993px) {
        header, main, footer {
          padding-left: 300px;
        }

        .modal:not(.bottom-sheet) {
          left: 300px;
        }

        .navbar-fixed > nav {
          width: calc(100% - 300px)
        }
      }
      /* ### End sidenav-fixed offset ### */
    </style>
    {% endif %}
    <script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
    <script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script>
    <script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
    <script src="{{ url_for('static', filename='js/nopaque.lists.js') }}"></script>
  </head>
  <body>
    <header>
      <div class="navbar-fixed">
        <nav>
          <div class="nav-wrapper">
            <a href="{{ url_for('main.index') }}" class="brand-logo center"><i class="material-icons">opacity</i>nopaque</a>
            {% if current_user.is_authenticated %}
            <a href="#" data-target="sidenav-main" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            {% endif %}
            <ul class="right">
              <!--<li><a id="nav-notifications" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-notifications-dropdown"><i class="material-icons">notifications</i></a></li>-->
              <li>
                <a id="nav-account" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-account-dropdown">
                  {% if current_user.is_authenticated %}
                  {{ current_user.username }}<i class="material-icons right">account_circle</i>
                  {% else %}
                  <i class="material-icons">account_circle</i>
                  {% endif %}
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>

      <!-- Dropdown menus for the navbar -->
      <div id="nav-notifications-dropdown" class="dropdown-content grey-text text-darken-4">
        <p>Notifications</p>
      </div>
      <ul id="nav-account-dropdown" class="dropdown-content">
        {% if current_user.is_authenticated %}
        <li><a href="{{ url_for('profile.settings') }}"><i class="material-icons">settings</i>Settings</a></li>
        <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
        {% else %}
        <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
        <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
        {% endif %}
      </ul>

      <ul id="sidenav-main" class="sidenav sidenav-fixed hide">
        <li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>nopaque</a></li>
        <li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
        <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
        <li><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" style="padding-left: 47px;"><i class="material-icons">book</i>My Corpora</a></li>
        <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="material-icons">work</i>My Jobs</a></li>
        <li><div class="divider"></div></li>
        <li><a class="subheader">Processes and Services</a></li>
        <li><a href="{{ url_for('services.service', service='setup_files') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
        <li><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
        <li><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
        <li><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li>
        <li><div class="divider"></div></li>
        <li><a class="subheader">Account</a></li>
        {% if current_user.is_authenticated %}
        <li><a href="{{ url_for('profile.settings') }}"><i class="material-icons">settings</i>Settings</a></li>
        <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
        {% else %}
        <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
        <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
        {% endif %}
        {% if current_user.is_administrator() %}
        <li><div class="divider"></div></li>
        <li><a class="subheader">Administration</a></li>
        <li><a href="{{ url_for('admin.index') }}"><i class="material-icons">build</i>Administration tools</a></li>
        {% endif %}
      </ul>
    </header>

    {%- macro insert_page_content() -%}
    {% block page_content %}{% endblock %}
    {%- endmacro -%}

    {% if parallax %}
      <main>
        {{ insert_page_content() }}
      </main>
    {% else %}
      <main class="grey lighten-5">
        {% if not full_width %}
        <div class="container">
        {% endif %}
        <div class="row">
          <div class="col s12">
            <h2>
              {% if headline %}
              {{ headline }}
              {% elif title %}
              {{ title }}
              {% else %}
              Unnamed page
              {% endif %}
            </h2>
          </div>
          {{ insert_page_content() }}
        </div>
        {% if not full_width %}
        </div>
        {% endif %}
      </div>
    {% endif %}
    </main>

    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col s6 m3">
            <a href="https://www.dfg.de/">
              <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
          </a>
          </div>
          <div class="col s6 m3 offset-m1 center-align">
            <a href="https://www.uni-bielefeld.de/sfb1288/">
              <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_sfb_1288.png') }}">
            </a>
          </div>
          <div class="col s12 m3 offset-m1">
            <h5 class="white-text">Links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!"><i class="material-icons tiny">feedback</i> Feedback</a></li>
              <li><a class="grey-text text-lighten-3" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/opaque"><i class="material-icons tiny">code</i> GitLab</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
          © 2020 Bielefeld University
          <a class="grey-text text-lighten-4 right" href="#!">Legal notice</a>
        </div>
      </div>
    </footer>

    <!--
    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col s12 m3">
            <a href="https://www.dfg.de/">
              <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
            </a>
          </div>
          <div class="col s12 m6">
            <h5 class="white-text" style="margin-left: -15px;">Contact</h5>
            <div class="row">
              <p>Contact our interdisciplinary team via email: <b>inf_sfb1288@lists.uni-bielefeld.de</b></p>
              <p>Silke Schwandt (Digital History), Johanna Vompras (Research Data Management), Julia Becker (Cultural Studies), Patrick Jentsch (Cognitive Informatics), Anna Neubert (Digital Humanities), Stephan Porada (Interdisciplinary Media Studies), Helene Schlicht (History, Philosophy)
            </div>
          </div>
          <div class="col s12 m3">
            <div class="row">
              <div class="col s8">
                <h5 class="white-text">Reminder</h5>
                <p>
                  Check out our website for nopaque's upcomming release:<br>
                  <small>www.uni-bielefeld.de/sfb1288/projekte/inf.html</small>
                </p>
              </div>
              <div class="col s4">
                <p>&nbsp;</p>
                <img class="responsive-img" src="{{ url_for('static', filename='images/qr_-_inf.svg') }}">
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    -->

    <script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        {% if current_user.is_authenticated and current_user.is_dark %}
        DarkReader.enable({"brightness": 150, "contrast": 100, "sepia": 0});
        {% endif %}
        {% for flashed_message in get_flashed_messages() %}
        nopaque.toast("{{ flashed_message }}");
        {% endfor %}
      });
    </script>
    {% if current_user.is_authenticated %}
    <script>
      document.getElementById("sidenav-main").classList.remove("hide");
    </script>
    {% endif %}
  </body>
</html>