<!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"/>
    <script src="{{ url_for('static', filename='js/add_job.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jsonpatch.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
    <script src="{{ url_for('static', filename='js/list.js') }}"></script>
    <script src="{{ url_for('static', filename='js/list.utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script>
    <script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
    <script src="{{ url_for('static', filename='js/darkreader.js') }}"></script>
    <script>
      {% if current_user.is_dark == True %}
      DarkReader.enable({
        brightness: 100,
        contrast: 100,
        sepia: 0
      });
      {% else %}
      DarkReader.disable();
      {% endif %}
    </script>
    <script>
      var corpora;
      var corporaSubscribers = [];
      var jobs;
      var jobsSubscribers = [];
      var socket = io();

      socket.on('init-corpora', function(msg) {
        corpora = JSON.parse(msg);
        for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
      });
      socket.on('init-jobs', function(msg) {
        jobs = JSON.parse(msg);
        for (let subscriber of jobsSubscribers) {subscriber._init(jobs);}
      });
      socket.on('update-corpora', function(msg) {
        var patch;

        patch = JSON.parse(msg);
        corpora = jsonpatch.apply_patch(corpora, patch);
        for (let subscriber of corporaSubscribers) {subscriber._update(patch);}
      });
      socket.on('update-jobs', function(msg) {
        var patch;

        patch = JSON.parse(msg);
        jobs = jsonpatch.apply_patch(jobs, patch);
        for (let subscriber of jobsSubscribers) {subscriber._update(patch);}
      });
      socket.on('message', function(msg) {
        console.log(msg);
      });
    </script>
    <script>
      var foreignCorpora;
      var foreignCorporaSubscribers = [];
      var foreignJobs;
      var foreignJobsSubscribers = [];

      socket.on('init-foreign-corpora', function(msg) {
        foreignCorpora = JSON.parse(msg);
        for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);}
      });
      socket.on('init-foreign-jobs', function(msg) {
        foreignJobs = JSON.parse(msg);
        for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);}
      });
      socket.on('update-foreign-corpora', function(msg) {
        var patch;

        patch = JSON.parse(msg);
        foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
        for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
      });
      socket.on('update-foreign-jobs', function(msg) {
        var patch;

        patch = JSON.parse(msg);
        foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
        for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
      });
    </script>
    <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('profile.index') }}"><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>
      <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>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">
                  {% 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>

      <ul id="slide-out" class="sidenav sidenav-fixed">
        <li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>Opaque</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><div class="divider"></div></li>
        <li><a class="subheader">Services</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='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
        {% 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 %}
        <div class="hide-on-large-only">
          <li><div class="divider"></div></li>
          <li><a class="subheader">Account</a></li>
          {% if current_user.is_authenticated %}
          <li><a href="{{ url_for('profile.index') }}"><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 %}
        </div>
      </ul>
    </header>

    <main class="grey lighten-5">
      {% block main_block %}{% endblock %}
    </main>

    <footer class="page-footer">
      <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>
      socket.emit('subscribe_user_ressources');
    </script>
    <script src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
    <script>
      M.AutoInit();
      M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'))
      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}
      );
      // Highlight current navigation entry
      var entry;
      for (entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
        if (entry.href === window.location.href) {
          entry.parentNode.classList.add("active");
        }
      }
      {% for message in get_flashed_messages() %}
      M.toast({html: '{{ message }}'})
      {% endfor %}
    </script>
  </body>
</html>