<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    {% if title %}
    <title>Opaque – {{ title }}</title>
    {% else %}
    <title>Opaque</title>
    {% endif %}
    <link href="{{ url_for('static', filename='images/favicon.png') }}" rel="icon" type="image/png">
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/material-icons/material-icons.css') }}">
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}" media="screen,projection"/>
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/opaque.css') }}" media="screen,projection"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <header>
      <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('auth.logout') }}"><i class="material-icons">chevron_left</i>Log out</a></li>
        {% else %}
        <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">chevron_right</i>Log in</a></li>
        <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">chevron_right</i>Register</a></li>
        {% endif %}
      </ul>
      <div class="navbar-fixed">
        <nav>
          <div class="nav-wrapper">
            <a href="{{ url_for('main.index') }}" class="brand-logo"><i class="material-icons">opacity</i>Opaque</a>
            <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
              <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"><i class="material-icons">account_circle</i></a></li>
            </ul>
          </div>
        </nav>
      </div>

      <ul id="slide-out" class="sidenav sidenav-fixed">
        <li>
          <div class="user-view">
            <div class="background" style="background-color: #ee6e73;"></div>
            <img class="circle" src="{{ url_for('static', filename='images/account_circle.png') }}">
            <span class="white-text name">
              {% if current_user.is_authenticated %}
              {{ current_user.username }}
              {% else %}
              Unknown
              {% endif %}
            </span>
            <span class="white-text email">
              {% if current_user.is_authenticated %}
              {{ current_user.email }}
              {% else %}
              Unknown
              {% endif %}
            </span>
          </div>
        </li>
        <li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>Opaque</a></li>
        <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
        <li class="no-padding">
          <ul class="collapsible collapsible-accordion">
            <li>
              <a class="collapsible-header">Services<i class="material-icons">arrow_drop_down</i></a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="{{ url_for('services.nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
                  <li><a href="{{ url_for('services.ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </li>
        {% if current_user.is_authenticated %}
        <li><div class="divider"></div></li>
        <li><a class="subheader">Account</a></li>
        <li><a href="{{ url_for('auth.settings') }}"><i class="material-icons">settings</i>Settings</a></li>
        {% endif %}
        {% if current_user.is_administrator() %} <!-- Shows only for admins -->
          <li><div class="divider"></div></li>
          <li><a class="subheader">Administration</a></li>
          <li><a href="{{ url_for('main.for_admins_only') }}"><i class="material-icons">build</i>Administration tools</a></li>
        {% endif %}
      </ul>
    </header>

    <main class="grey lighten-5">
      <div class="container">
        <div class="row">
          <div class="col s12">
            <h2>
              {% if title %}
              {{ title }}
              {% else %}
              Unnamed page
              {% endif %}
            </h2>
            <p>&nbsp;</p>
          </div>
          {% block page_content %}
          {% endblock %}
        </div>
      </div>
    </main>

    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col s12 l3">
            <img src="{{ url_for('static', filename='images/logo_dfg.png') }}" class="responsive-img">
          </div>
          <div class="col s12 l3">
            <h5 class="white-text">About</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
            </ul>
          </div>
          <div class="col s12 l3">
            <h5 class="white-text">Connect</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
            </ul>
          </div>
          <div class="col s12 l3">
            <h5 class="white-text">Contact</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © 2019 Bielefeld University
        <a class="grey-text text-lighten-4 right" href="#!">Impress</a>
        </div>
      </div>
    </footer>

    <script type="text/javascript" src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
    <script>
        M.AutoInit();
        M.Dropdown.init(
          document.getElementById("nav-notifications"),
          {"alignment": "right", "constrainWidth": false, "coverTrigger": false}
        );
        M.Dropdown.init(
          document.getElementById("nav-account"),
          {"alignment": "right", "constrainWidth": false, "coverTrigger": false}
        );
        M.Dropdown.init(
          document.getElementById("new-job"),
          {"coverTrigger": false}
        );
        {% for message in get_flashed_messages() %}
        M.toast({html: '{{ message }}'})
        {% endfor %}
    </script>
  </body>
</html>