<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>
  {% block title %}
  CARA | COVID Airborne Risk Assessment
  {% endblock title %}
  </title>
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="/static/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap" rel="stylesheet">
  

  {% block extra_headers %}
  {% endblock extra_headers %}
</head>

<body>

  <nav class="navbar navbar-dark navbar-expand-lg">
    <div class="container">

      <a href="/" class="navbar-brand"><img src="/static/images/cara_logo_white_text.png" alt="Logo" title="Logo"></a>
      
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-link"><a href="/" class="{{ "header-navbar nav-link active" if "home/" == active_page else "header-navbar nav-link" }}">Home</a></li>
          <div id="apps_dropdown">
            <li class="nav-item dropdown p-2">
              <a class="nav-link dropdown-toggle {{ "header-navbar nav-link active" if "calculator/" in active_page else "header-navbar nav-link" }}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Apps
              </a>
              <ul class="dropdown-menu dropwown-navbar-colors text-right" style="min-width: 12rem;" aria-labelledby="navbarDropdown">
                <li><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">CARA Calculator</a></li>
                <li><a href="{{ calculator_prefix }}/user-guide" style="margin-left: 2rem" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">User Guide</a></li>
                <li><a href="/expert-app" class="{{ "header-navbar nav-link active" if "/expert-app" == active_page else "header-navbar nav-link" }}">Expert app (beta)</a></li>
              </ul>
            </li>
          </div>
          <div id="mobile_calculator_option">
            <li class="nav-link"><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">CARA Calculator</a></li>
            <li class="nav-link"><a href="{{ calculator_prefix }}/user-guide" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">User Guide</a></li>
          </div>
          {% block covid_information%}
          {% endblock covid_information%}
          <li class="nav-link"><a href="/about" class="{{ "header-navbar nav-link active" if "about" == active_page else "header-navbar nav-link" }}">About</a></li>
            {% if user.is_authenticated() %}
            <li class="nav-item dropdown p-2">
              <a class="nav-link active dropdown-toggle d-inline-block" href="https://cern.ch/users-portal" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Signed in as: {{ user.username }}
              </a>
            <ul class="dropdown-menu dropwown-navbar-colors" style="min-width: 14rem;" aria-labelledby="navbarDropdown">
                <li><a href="/auth/logout" class="nav-link ml-2">Sign out</a></li>
            </ul>
            {# Sent to Piwik for statistics #}
            <script>
              var AuthUserDomain = "{{ user.domain() }}";
            </script>
            {% endif %}
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <main role="main">
    {% block main %}
    {% endblock main %}
  </main>

  <footer>
    <div class="container">
      <div class="row text-light text-center py-4 justify-content-center">

        <div class="col-sm-10 col-md-8 col-lg-6">
          <img src="/static/images/cara_logo_white_text.png" alt="Logo">
          <p><span style="font-size:10px;"><em>CERN strives to deploy its know-how and technologies to help solve
                    the challenges arising in the local and global fight against COVID-19. As a particle physics
                    research organisation, CERN is not in a position to advise on medical research, health or health
                    policy issues. Any initiative is conducted on a best effort and as-is basis, without liability or
                    warranty.</em></span></p>
          <p style="font-size:10px;">
              CARA is <a href="https://gitlab.cern.ch/cara/cara/-/blob/master/LICENSE" class="ext">Apache 2.0 licensed</a> open-source
              software developed at CERN.
              You can find the source code at <a href="https://gitlab.cern.ch/cara/cara">https://gitlab.cern.ch/cara/cara</a>,
              where we welcome contributions, feature requests and issue reports.
          </p>
        </div>

      </div>
    </div>
  </footer>

  <script src="/static/js/js_packaged_for_theme.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
  <script src="/static/js/jquery.colorbox-min.js"></script>
  <script src="/static/js/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>
  <script src="/static/js/usage-tracking.js"></script>

	<!-- Popper JS -->
	<script src="/static/js/popper.min.js"></script>
	<!-- Font Awesome -->
	<script src="/static/js/all.min.js"></script>

  {% block body_scripts %}
  {% endblock body_scripts %}

</body>
</html>
