{% extends "materialize/base.html.j2" %}
{% from '_colors.html.j2' import colors %}

{% block html_attribs %} lang="en"{% endblock html_attribs %}

{% block head %}
{{ super() }}
<link href="{{ url_for('static', filename='images/nopaque_-_favicon.png') }}" rel="icon">
{% endblock head %}

{% block metas %}
<meta charset="UTF-8">
{{ super() }}
{% endblock metas %}

{% block title %}{{title}}{% endblock title %}

{% block styles %}
{{ super() }}
{% if current_user.is_authenticated %}
<link href="{{ url_for('static', filename='css/materialize.sidenav-fixed.css') }}" media="screen,projection" rel="stylesheet">
{% endif %}
<link href="{{ url_for('static', filename='css/materialize.sticky-footer.css') }}" media="screen,projection" rel="stylesheet">
<link href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection" rel="stylesheet">
<style>
  .primary-color {background-color: {{ colors.primary }} !important;}
  .primary-color-text {color: {{ colors.primary }} !important;}
  .secondary-color {background-color: {{ colors.secondary }} !important;}
  .secondary-color-text {color: {{ colors.secondary }} !important;}
  .footer-color {background-color: {{ colors.footer }} !important;}
  .footer-color-text {color: {{ colors.footer }} !important;}

  .corpus-analysis-color {background-color: {{ colors.corpus_analysis }} !important;}
  .corpus-analysis-color-text {color: {{ colors.corpus_analysis }} !important;}
  .corpus-analysis-color.darken {background-color: {{ colors.corpus_analysis_darken }} !important;}
  .corpus-analysis-color-text.text-darken {color: {{ colors.corpus_analysis_darken }} !important;}
  .corpus-analysis-color.lighten {background-color: {{ colors.corpus_analysis_lighten }} !important;}
  .corpus-analysis-color-text.text-lighten {color: {{ colors.corpus_analysis_lighten }} !important;}

  .file-setup-color {background-color: {{ colors.file_setup }} !important;}
  .file-setup-color-text {color: {{ colors.file_setup }} !important;}
  .file-setup-color.darken {background-color: {{ colors.file_setup_darken }} !important;}
  .file-setup-color-text.text-darken {color: {{ colors.file_setup_darken }} !important;}
  .file-setup-color.lighten {background-color: {{ colors.file_setup_lighten }} !important;}
  .file-setup-color-text.text-lighten {color: {{ colors.file_setup_lighten }} !important;}

  .ocr-color {background-color: {{ colors.ocr }} !important;}
  .ocr-color-text {color: {{ colors.ocr }} !important;}
  .ocr-color.darken {background-color: {{ colors.ocr_darken }} !important;}
  .ocr-color-text.text-darken {color: {{ colors.ocr_darken }} !important;}
  .ocr-color.lighten {background-color: {{ colors.ocr_lighten }} !important;}
  .ocr-color-text.text-lighten {color: {{ colors.ocr_lighten }} !important;}

  .nlp-color {background-color: {{ colors.nlp }} !important;}
  .nlp-color-text {color: {{ colors.nlp }} !important;}
  .nlp-color.darken {background-color: {{ colors.nlp_darken }} !important;}
  .nlp-color-text.text-darken {color: {{ colors.nlp_darken }} !important;}
  .nlp-color.lighten {background-color: {{ colors.nlp_lighten }} !important;}
  .nlp-color-text.text-lighten {color: {{ colors.nlp_lighten }} !important;}

  {% if scheme_primary_color is not defined %}
    {% set scheme_primary_color = colors.primary %}
  {% endif %}
  {% if scheme_secondary_color is not defined %}
    {% set scheme_secondary_color = colors.secondary %}
  {% endif %}
  main .btn, main .btn-small, main .btn-large, main .btn-floating {background-color: {{ scheme_primary_color }};}
  main .btn:hover, main .btn-large:hover, main .btn-small:hover, main .btn-floating:hover {background-color: {{ scheme_secondary_color }};}
  main .pagination li.active {background-color: {{ scheme_primary_color }};}
  main .table-of-contents a.active {border-color: {{ scheme_primary_color }};}
  main .tabs .tab a {color: inherit;}
  main .tabs .tab a:hover {color: {{ scheme_primary_color }};}
  main .tabs .tab a.active, .tabs .tab a:focus.active {
    color: {{ scheme_primary_color }};
    background-color: {{ scheme_primary_color }}28;
  }
  main .tabs .indicator {background-color: {{ scheme_primary_color }};}
</style>
{% endblock styles %}

{% block navbar %}
<div class="navbar-fixed">
  <nav class="nav-extended">
    <div class="nav-wrapper primary-color">
      {% if current_user.is_authenticated %}
      <a href="#" data-target="sidenav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      {% endif %}
      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo_name_slogan.svg') }}" style="height: 128px; margin-top: -32px; margin-left: -32px;"></a>
      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-large-only" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo.svg') }}" style="height: 128px; margin-top: -32px; margin-left: -32px;"></a>
      <ul class="right">
        <li class="hide-on-med-and-down{% if request.path == url_for('main.news') %} active{% endif %}"><a href="{{ url_for('main.news') }}"><i class="material-icons left">notifications</i>News</a></li>
        {% if current_user.is_authenticated %}
        <li class="hide-on-med-and-down{% if request.path == url_for('main.dashboard') %} active{% endif %}"><a href="{{ url_for('main.dashboard') }}"><i class="material-icons left">dashboard</i>Dashboard</a></li>
        <li class="hide-on-med-and-down"><a class="dropdown-trigger no-autoinit" data-target="nav-more-dropdown" href="#!" id="nav-more-dropdown-trigger"><i class="material-icons">more_vert</i></a></li>
        {% else %}
        <li{% if request.path == url_for('auth.register') %} class="active"{% endif %}><a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a></li>
        <li{% if request.path == url_for('auth.login') %} class="active"{% endif %}><a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a></li>
        {% endif %}
      </ul>
    </div>
    <div class="nav-content secondary-color">
      {% block nav_content %}
      {% if current_user.is_authenticated %}
      <ul class="tabs tabs-transparent">
        <li class="tab disabled"><a><i class="material-icons left">explore</i>Roadmap</a></li>
        <li class="tab"><a{%if request.path == url_for('services.service', service='file-setup') %} class="active"{% endif %} href="{{ url_for('services.service', service='file-setup') }}" target="_self">File setup</a></li>
        <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
        <li class="tab"><a{%if request.path == url_for('services.service', service='ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='ocr') }}" target="_self">OCR</a></li>
        <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
        <li class="tab"><a{%if request.path == url_for('services.service', service='nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='nlp') }}" target="_self">NLP</a></li>
        <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
        <li class="tab"><a{%if request.path == url_for('corpora.add_corpus') %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus') }}" target="_self">Add corpus</a></li>
        <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
        {% if corpus %}
        <li class="tab"><a{%if request.path == url_for('corpora.add_corpus_file', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" target="_self">Add corpus file(s)</a></li>
        {% else %}
        <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Add corpus file(s)</a></li>
        {% endif %}
        <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
        {% if corpus %}
        {% if corpus.files.all() %}
        <li class="tab"><a{%if request.path == url_for('corpora.analyse_corpus', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" target="_self">Corpus analysis</a></li>
        {% else %}
        <li class="tab disabled tooltipped" data-tooltip="Add at least one corpus file first"><a>Corpus analysis</a></li>
        {% endif %}
        {% else %}
        <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Corpus analysis</a></li>
        {% endif %}
      </ul>
      {% endif %}
      {% endblock nav_content %}
    </div>
  </nav>
</div>

{% if current_user.is_authenticated %}
<ul class="dropdown-content" id="nav-more-dropdown">
  <li><a href="{{ url_for('settings.index') }}"><i class="material-icons left">settings</i>Settings</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="{{ url_for('auth.logout') }}">Log out</a></li>
</ul>
{% endif %}
{% endblock navbar %}

{% block sidenav %}
<ul class="sidenav sidenav-fixed{% if not current_user.is_authenticated %} hide{% endif %}">
  {% if current_user.is_authenticated %}
  <li>
    <div class="user-view">
      <div class="background primary-color"></div>
      <span class="white-text name">{{ current_user.username }}</span>
      <span class="white-text email">{{ current_user.email }}</span>
    </div>
  </li>
  <li><a href="{{ url_for('main.index') }}">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 & Services</a></li>
  <li style="background-color: {{ colors.file_setup }}; border-left: 10px solid {{ colors.file_setup_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
  <li style="background-color: {{ colors.ocr }}; border-left: 10px solid {{ colors.ocr_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
  <li style="background-color: {{ colors.nlp }}; border-left: 10px solid {{ colors.nlp_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
  <li style="background-color: {{ colors.corpus_analysis }}; border-left: 10px solid {{ colors.corpus_analysis_darken }}; margin-top: 5px;"><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>
  <li><a href="{{ url_for('settings.index') }}"><i class="material-icons">settings</i>Settings</a></li>
  <li><a href="{{ url_for('auth.logout') }}">Log out</a></li>
  {% else %}
  <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">assignment</i>Register</a></li>
  <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">login</i>Log in</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.users') }}"><i class="material-icons">build</i>Administration tools</a></li>
  {% endif %}
</ul>
{% endblock sidenav %}

{% block main %}
  {% block page_content %}{% endblock page_content %}
{% endblock main %}

{% block footer_attribs %} class="page-footer footer-color"{% endblock footer_attribs %}

{% block 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">Legal Notice</h5>
      <ul>
        <li><a class="grey-text text-lighten-3" href="https://www.uni-bielefeld.de/(en)/impressum/">Legal Notice</a></li>
        <li><a class="grey-text text-lighten-3" href="{{ url_for('main.privacy_policy') }}">Privacy statement (GDPR)</a></li>
        <li><a class="grey-text text-lighten-3" href="{{ url_for('main.terms_of_use') }}">Terms of use</a></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>
<div class="footer-copyright primary-color">
  <div class="container">
    <div class="row" style="margin-bottom: 0;">
      <div class="col s12 m3">
        <span>© 2020 Bielefeld University</span>
      </div>
      <div class="col s12 m9 right-align">
        <a class="btn-small blue waves-effect waves-light" href="{{ url_for('main.about_and_faq') }}"><i class="left material-icons">info_outline</i>About and faq</a>
        {% if config.CONTACT_EMAIL_ADRESS %}
        <a class="btn-small pink waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?subject=[nopaque] Contact"><i class="left material-icons">rate_review</i>Contact</a>
        <a class="btn-small green waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?subject=[nopaque] Feedback"><i class="left material-icons">feedback</i>Feedback</a>
        {% endif %}
        <a class="btn-small orange waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque"><i class="left material-icons">code</i>GitLab</a>
      </div>
    </div>
  </div>
</div>
{% endblock footer %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/darkreader.js') }}"></script>
<script src="{{ url_for('static', filename='js/jsonpatch.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/list.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/socket.io.slim.js') }}"></script>
<script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
<script>
  {% if current_user.setting_dark_mode %}
  DarkReader.enable({brightness: 150, contrast: 100, sepia: 0});
  {% endif %}
  // Disable all option elements with no value
  for (let optionElement of document.querySelectorAll('option[value=""]')) {
    optionElement.disabled = true;
  }
  M.AutoInit();
  M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="email"], input[data-length][type="password"], input[data-length][type="text"], textarea[data-length]'));
  M.Dropdown.init(document.querySelectorAll('#nav-more-dropdown-trigger'), {alignment: 'right', constrainWidth: false, coverTrigger: false});
  nopaque.Forms.init();
  {% if current_user.is_authenticated %}
  nopaque.socket.emit('user_data_stream_init');
  {% endif %}
  for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {
    nopaque.flash(flashedMessage[1], flashedMessage[0]);
  }
</script>
{% endblock scripts %}