{% load static %}
{% load compress %}

<html lang="en">

    <style>
        html,
        body,
        header,
        .view {
          height: 100%;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .view {
            height: 100vh;
          }
        }

        .top-nav-collapse {
          background-color: #78909c !important;
        }

        .navbar:not(.top-nav-collapse) {
          background-color: rgb(141, 172, 202) !important;
        }

        .hr-light {
          border-top: 3px solid #fff;
          width: 80px;
        }

    </style>

    {% block style %}{% endblock %}

    <head>
      <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAACMuAAAjLgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM/b2wAAO1YAi620DXaepzZpkptsXoWNlFR6gZ9RdXucUHF4iVd2fGFohIgsh56iCCxYXQD29/gAAAAAAKa7wAJ6prAfcKCqa2mapb9gk5/vVoqV/kx+if9HdYD/QG13/zpkbf85X2f9O15k6EBfZbNRbHNba4KIEENfZwB3p7KLYJqo22Kbqf1gmaf/WZGf/1SLmP9Og5D/R3qH/0V2g/9Ld4T/Q256/zRcZv8sUFj/MFFY+TZVW71FX2ZXeK297WGitP9oprj/bKW3/2egsf9kmqv/X5Wm/1iOn/9YjJ3/XY6e/1qLm/9Pf5D/RXKB/zxmdP86X2v/VGx28pXF199/us//d7XK/3y2yv9/tMj/f7LF/3quwf9xprn/b6O1/2icr/9kmq3/Y5eq/2CUp/9ekKT/b5ap/4umt+6s0+NWkMfbvIbC1/mMwtf/kcLW/46+0v+FuMz/gLLG/36ww/96q7//dai8/3eovP95qLv/fay//YexxMyivc50kMbcAKXR4Q+k0eJcmsfeuo292fSQwNf/jsDU/4i6z/+Ht8v/hrXJ/4m3yv+LuMr2k7zMzpi/zXiXvcwamsLOAAAAAADn8fYAksLbALPV5gyiyd9CocrehZ7J27KUwtXHkb7RypK+0LOXwNGDnMLSR6rJ1RT++vMB1OLlAAAAAAAAAAAAAAAAAAAAAAAAAAAAwtnfAPDx6wCqzNkFocbVDarL2A6/1t4F+PTvAN/n6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8AAP//AAD//wAA//8AAOAHAAAAAQAAAAAAAAAAAAAAAAAAAAAAAIABAADgAwAA/D8AAP//AAD//wAA//8AAA=="/>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      {% block head %} {% endblock %}
    </head>

    <title>{% block title %} {% endblock %}</title>
    <!-- Bootstrap CSS -->
    {% compress css %}
    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    {% endcompress %}

    <body style="background-color: rgb(141, 172, 202)">
          <!--Navbar-->
          <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
            <div class="container">
              <a class="navbar-brand" href="#"><strong>P.I.T. Count</strong></a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
                <ul class="navbar-nav mr-auto">
                  <li class="nav-item{% if request.path == '/' %} active{% endif %}">
                    <a class="nav-link" href="/">Home{% if request.path == '/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>

                  {% if user.is_authenticated %}
                  {% if user.is_staff %}
                  <li class="nav-item {% if request.path == '/user/' or request.path == '/observation_new/' or request.path == '/observation_ind_new/' or request.path == '/survey_new_ind/' or request.path == '/survey_new/' %}active{% endif %}">
                    <a class="nav-link" href="/user/">Forms{% if request.path == '/user/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>
                  {% endif %}
                  {% endif %}

                  {% if user.is_superuser %}
                  <li class="nav-item{% if request.path == '/dashboard/' %} active{% endif %}">
                    <a class="nav-link" href="/dashboard/">Charts{% if request.path == '/dashboard/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>
                  {% endif %}

                  <li class="nav-item {% if request.path == '/resources/' %}active{% endif %}">
                    <a class="nav-link" href="/resources">Resources{% if request.path == '/resources/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>

                  {% if user.is_authenticated %}
                  {% if user.is_superuser %}
                  <li class="nav-item {% if request.path == '/admin/' %}active{% endif %}">
                    <a class="nav-link" href="/admin/">Admin{% if request.path == '/admin/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>
                  {% endif %}
                  {% endif %}

                  {% if user.is_authenticated %}
                  <li class="nav-item {% if request.path == '/user_profile/' %}active{% endif %}">
                    <a class="nav-link" href="/user_profile/">Profile{% if request.path == '/user_profile/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>
                  {% endif %}

                {% if user.is_authenticated %}
                  <li class="nav-item {% if request.path == '/user_history/' or request.path == '/user_history_obs/' or request.path == '/user_history_surv/' %}active{% endif %}">
                    <a class="nav-link" href="/user_history">History{% if request.path == '/user_history/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>
                  {% endif %}

                  {% if user.is_authenticated == False %}
                  <li class="nav-item {% if request.path == '/login/' %}active{% endif %}">
                    <a class="nav-link" href="/login/">Login{% if request.path == '/login/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>
                  {% endif %}

                  {% if user.is_authenticated == False %}
                  <li class="nav-item {% if request.path == '/register/' %}active{% endif %}">
                    <a class="nav-link" href="/register/">Register{% if request.path == '/register/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>
                  {% endif %}

                  {% if user.is_authenticated %}
                  <li>
                     <li class="nav-item {% if request.path == '/logout/' %}active{% endif %}">
                     <a class="nav-link" href="/logout/">Logout{% if request.path == '/logout/' %} <span class="sr-only">(current)</span>{% endif %}</a>
                  </li>
                  {% endif %}
                </ul>
              </div>
            </div>
          </nav>

          {% block content %}

          {% endblock %}

      {% compress js %}
      <script src="{% static 'jquery.min.js' %}" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="{% static 'popper.min.js' %}" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="{% static 'bootstrap.min.js' %}" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
      {% endcompress %}
    </body>
</html>
