<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="static/styling.css">

    <script src="static/helper.js"></script>

    <base href="/">
<!--     <base href="/SiteContext/"> -->
    {% block head %}

    {% endblock %}
  </head>
  <body style="padding-bottom: 80px">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">


        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="">SiteContext Home<span class="sr-only">(current)</span></a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="about">About<span class="sr-only">(current)</span></a>
          </li>

        <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle"
               href="#" id="navbarDropdownMenuLink"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false">
              Use SiteContext
                </a>

                  <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="run-single-SiteContext">Compare a Pair of Molecules</a></li>
                      <li><a class="dropdown-item" href="run-batch-SiteContext">Compare a Batch of Molecules</a></li>
                  </ul>



          </li>



          <li class="nav-item">
            <a class="nav-link" href="results">Download Results</a>
          </li>
{#          <li class="nav-item" style="position: absolute; margin-left: 70%">#}
           <li class="nav-item mr-auto">
            <a class="nav-link" href="tutorial">Tutorial</a>
          </li>
          <li class="nav-item mr-auto">
            <a class="nav-link" href="run-demo-SiteContext">Interactive Demo</a>
          </li>



          <li class="nav-item">
            <a class="nav-link" href="funding">Funding<span class="sr-only">(current)</span></a>
          </li>

        </ul>

<!-- Right-aligned Singh Lab link -->
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="https://tintin.cs.uiowa.edu/">Singh Lab<span class="sr-only">(current)</span></a>
            </li>
          </ul>


      </div>
    </nav>


    <script>
        $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
          if (!$(this).next().hasClass('show')) {
            $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
          }
          var $subMenu = $(this).next(".dropdown-menu");
          $subMenu.toggleClass('show');


          $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
            $('.dropdown-submenu .show').removeClass("show");
          });


          return false;
        });
    </script>
    <div style="text-align: center; padding: 10px 0; background-color: #525357;">
      <div style="max-width: 824px; margin: 0 auto;">
        <img src="static/lab.jpg" style="width: 100%; height: auto;" alt="Lab Image">
      </div>
    </div>

  {% block content %}
  {% endblock %}

 </body>
</html>
