<!doctype html>
<html data-theme="envipath">
  {% load static %}
  <head>
    <title>{{ title }}</title>
    <meta name="csrf-token" content="{{ csrf_token }}" />
    {# Favicon #}
    <link
      rel="shortcut icon"
      type="image/png"
      href="{% static 'images/favicon.ico' %}"
    />

    {# Tailwind CSS disabled for legacy Bootstrap framework #}
    {# Pages using this framework will be migrated to framework_modern.html incrementally #}
    {# <link href="{% static 'css/output.css' %}" rel="stylesheet" type="text/css"/> #}

    {# Legacy Bootstrap 3.3.7 - scoped to .legacy-bootstrap #}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
    <link
      href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
    <script src="https://community.envipath.org/javascripts/embed-topics.js"></script>
    <!-- CDN END -->

    {# Bootstrap compatibility styles #}
    <style>
      /* Ensure proper viewport behavior */
      html,
      body {
        height: 100%; /* ensure body fills viewport */
        overflow-x: hidden; /* prevent horizontal scroll */
      }
    </style>

    <script>
      const csrftoken = document.querySelector("[name=csrf-token]").content;

      // Setup CSRF header for all jQuery AJAX requests
      $.ajaxSetup({
        beforeSend: function (xhr, settings) {
          if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
          }
        },
      });
    </script>

    <!--    {# C3 CSS #}-->
    <!--    <link id="css-c3" href="{% static 'css/c3.css' %}" rel="stylesheet" type="text/css"/>-->
    <!--    {# EP CSS #}-->
    <!--    <link id="css-pps_white_general" href="{% static 'css/epp.css' %}" rel="stylesheet" type="text/css"/>-->

    {# General EP JS #}
    <script src="{% static 'js/pps.js' %}"></script>
    {# Modal Steps for Stepwise Modal Wizards #}
    <script src="{% static 'js/jquery-bootstrap-modal-steps.js' %}"></script>

    {% if not debug %}
      <!-- Matomo -->
      <script>
        var _paq = (window._paq = window._paq || []);
        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
        _paq.push(["trackPageView"]);
        _paq.push(["enableLinkTracking"]);
        (function () {
          var u = "//matomo.envipath.com/";
          _paq.push(["setTrackerUrl", u + "matomo.php"]);
          _paq.push(["setSiteId", "{{ meta.site_id }}"]);
          var d = document,
            g = d.createElement("script"),
            s = d.getElementsByTagName("script")[0];
          g.async = true;
          g.src = u + "matomo.js";
          s.parentNode.insertBefore(g, s);
        })();
      </script>
      <!-- End Matomo Code -->
    {% endif %}
  </head>
  <body>
    <!-- Legacy Bootstrap navbar - isolated from Tailwind -->
    <div class="legacy-bootstrap">
      <nav
        class="navbar navbar-default navbar-inverse"
        style="border-radius:0px;"
        role="navigation"
      >
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header navbar-header-framework">
            <!--            <button type="button" class="navbar-toggle navbar-toggle-framework" data-toggle="collapse"-->
            <!--                    data-target="#navbarCollapse">-->
            <!--                <span class="sr-only">Toggle navigation</span>-->
            <!--                <span class="icon-bar"></span>-->
            <!--                <span class="icon-bar"></span>-->
            <!--                <span class="icon-bar"></span>-->
            <!--            </button>-->
            <a
              id="pictureLink"
              href="{{ meta.server_url }}"
              class="navbar-brand"
            >
              <img
                id="image-logo-short-white.svg"
                src="{% static "/images/logo-short-white.svg" %}"
                width="100"
                alt="enviPath"
              />
            </a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div
            class="navbar-collapse collapse-framework navbar-collapse-framework collapse"
            id="navbarCollapse"
          >
            <ul class="nav navbar-nav navbar-nav-framework">
              <li>
                <a href="{{ meta.server_url }}/predict"> Predict Pathway </a>
              </li>
              {#                <li class="dropdown">#}
              {#                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Predict Pathway<b class="caret"></b></a>#}
              {#                    <ul role="menu" class="dropdown-menu">#}
              {#                        <li>#}
              {#                            <a class="button" data-toggle="modal" data-target="#predict_modal">#}
              {#                                <i class="	glyphicon glyphicon-tag"></i> Predict Pathway#}
              {#                            </a>#}
              {#                        </li>#}
              {#                        <li>#}
              {#                            <a class="button" data-toggle="modal" data-target="#batch_predict_modal">#}
              {#                                <i class="	glyphicon glyphicon-tags"></i> Batch Prediction#}
              {#                            </a>#}
              {#                        </li>#}
              {#                    </ul>#}
              {#                </li>#}
              <li>
                <a href="{{ meta.server_url }}/package" id="packageLink"
                  >Package</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/model" id="modelLink"
                  >Modelling</a
                >
              </li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#"
                  >Browse Data<b class="caret"></b
                ></a>
                <ul role="menu" class="dropdown-menu">
                  <li>
                    <a href="{{ meta.server_url }}/pathway" id="pathwayLink"
                      >Pathway</a
                    >
                  </li>
                  <li>
                    <a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a>
                  </li>
                  <li>
                    <a href="{{ meta.server_url }}/compound" id="compoundLink"
                      >Compound</a
                    >
                  </li>
                  <li>
                    <a href="{{ meta.server_url }}/reaction" id="reactionLink"
                      >Reaction</a
                    >
                  </li>
                  <li>
                    <a
                      href="{{ meta.server_url }}/model"
                      id="relative-reasoningLink"
                      >Model</a
                    >
                  </li>
                  <li>
                    <a href="{{ meta.server_url }}/scenario" id="scenarioLink"
                      >Scenario</a
                    >
                  </li>
                  {#                        <li><a href="{{ meta.server_url }}/setting" id="settingLink">Setting</a></li>#}
                  {#                        <li><a href="{{ meta.server_url }}/user" id="userLink">User</a></li>#}
                  {#                        <li><a href="{{ meta.server_url }}/group" id="groupLink">Group</a></li>#}
                </ul>
              </li>
            </ul>

            <ul
              class="nav navbar-nav navbar-right navbar-nav-framework navbar-right-framework"
            >
              <li>
                <a href="https://community.envipath.org/" id="communityLink"
                  >Community</a
                >
              </li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#"
                  >Info <b class="caret"></b
                ></a>
                <ul role="menu" class="dropdown-menu">
                  <!--<li><a href="{{ meta.server_url }}/funding" id="fundingLink">Funding</a></li>-->
                  <li>
                    <a
                      href="https://community.envipath.org/t/envipath-license/109"
                      id="licenceLink"
                      >Licences</a
                    >
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a
                      target="_blank"
                      href="https://wiki.envipath.org/"
                      id="wikiLink"
                      >Documentation Wiki</a
                    >
                  </li>

                  <li class="divider"></li>
                  <li><a>Version: {{ meta.version }}</a></li>
                </ul>
              </li>
              {% if meta.user.username == 'anonymous' %}
                <li>
                  <a
                    href="{% url 'login' %}"
                    id="loginButton"
                    style="margin-right:10px"
                    >Login</a
                  >
                </li>
              {% else %}
                <li class="dropdown">
                  <a
                    data-toggle="dropdown"
                    id="loggedInButton"
                    class="dropdown-toggle"
                    id="logedInButton"
                    href="#"
                  >
                    <div id="username">
                      {{ user.username }}<b class="caret"></b>
                    </div>
                  </a>
                  <ul role="menu" class="dropdown-menu">
                    <li>
                      <a href="{{ meta.user.url }}" id="accountbutton"
                        >My Account</a
                      >
                    </li>
                    <li class="divider"></li>
                    <form
                      class="navbar-form navbar-left navbar-left-framework"
                      role="logout"
                      action="{% url 'logout' %}"
                      method="post"
                    >
                      {% csrf_token %}
                      <div class="form-group">
                        <input type="hidden" name="logout" value="true" />
                      </div>
                      <button type="submit" class="btn btn-default">
                        Logout
                      </button>
                    </form>
                  </ul>
                </li>
              {% endif %}
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <!-- End legacy Bootstrap navbar -->

    <div id="docContent" class="content container">
      {% if breadcrumbs %}
        <div id="bread">
          <ol class="breadcrumb">
            {% for elem in breadcrumbs %}
              {% for name, url in elem.items %}
                {% if forloop.parentloop.last %}
                  <li class="active">{{ name }}</li>
                {% else %}
                  <li>
                    <a href="{{ url }}">{{ name }}</a>
                  </li>
                {% endif %}
              {% endfor %}
            {% endfor %}
          </ol>
        </div>
      {% endif %}
      {% if message %}
        <div id="message">{{ message }}</div>
      {% endif %}
      {% block content %}
      {% endblock content %}
      {% if meta.url_contains_package and meta.current_package.license %}
        <p></p>
        <div class="panel-group" id="license_accordion">
          <div
            class="panel panel-default list-group-item"
            style="background-color:#f5f5f5"
          >
            <div class="panel-title">
              <a
                data-toggle="collapse"
                data-parent="#licence_accordion"
                href="#license"
                >License</a
              >
            </div>
          </div>
          <div id="license" class="panel-collapse in collapse">
            <div class="panel-body list-group-item">
              <a target="_blank" href="{{ meta.current_package.license.link }}">
                <img src="{{ meta.current_package.license.image_link }}" />
              </a>
            </div>
          </div>
        </div>
      {% endif %}
    </div>

    <!-- FOOTER - Legacy Bootstrap -->
    <div class="legacy-bootstrap">
      <div class="container text-center">
        <hr />
        <div class="row">
          <div class="col-lg-12">
            <ul class="nav nav-pills nav-justified">
              <li>
                <a href="http://ml.auckland.ac.nz" target="_blank">
                  <img
                    id="image-uoalogo"
                    height="60"
                    src="{% static "/images/UoA-Logo-Primary-RGB-Small.png" %}"
                    alt="The Univserity of Auckland"
                  />
                </a>
              </li>
              <li>
                <a href="https://eawag.ch" target="_blank">
                  <img
                    id="image-ealogo"
                    height="60"
                    src="{% static "/images/ealogo.gif" %}"
                    alt="Eawag"
                  />
                </a>
              </li>
              <li>
                <a href="https://www.uzh.ch/" target="_blank">
                  <img
                    id="image-ufzlogo"
                    height="60"
                    src="{% static "/images/uzh-logo.svg" %}"
                    alt="University of Zurich"
                  />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <ul class="nav nav-pills nav-justified">
            <!--            <li><a href="https://envipath.com/imprint/" target="_blank">Impressum/Imprint</a></li>-->
            <li>
              <a href="mailto:admin@envipath.org" target="_blank">Contact</a>
            </li>
            <!--            <li><a href="http://envipath.com" target="_blank"> enviPath UG (haftungsbeschr&auml;nkt) &amp; Co. KG &copy;-->
            <!--                {{ YEAR }}</a></li>-->
          </ul>
        </div>
      </div>
    </div>
    <!-- End legacy Bootstrap footer -->

    <script>
      $(function () {
        // Hide actionsbutton if theres no action defined
        if ($("#actionsButton ul").children().length > 0) {
          $("#actionsButton").show();
        }
      });
    </script>
  </body>
</html>
