<!DOCTYPE html>
<html>
  {% load static %}
  {% load turkle_tags %}
  <head>
    <title>{{turkle_site_name}}</title>

    {% block meta %}
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      {% for tag in turkle_meta_tags %}{{ tag|meta_tag }}{% endfor %}
    {% endblock %}

    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">

    {% block css %}
      <link href="{% static 'turkle/css/turkle.css' %}" rel="stylesheet" type="text/css"/>
      <link href="{% static 'turkle/bootstrap-4.1.3/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
      <link href="{% static 'turkle/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css' %}" rel="stylesheet" type="text/css"/>
      {{ block.super }}
    {% endblock %}

    {# remove in Turkle 4.0 as replaced by extra_head #}
    {% block head %}{% endblock %}
    {% block extra_head %}{% endblock %}
  </head>
  <body>
    <div class="container-fluid header custom-bg-light">
      <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="{% url 'index' %}" title="Home">{{turkle_site_name}}</a>
        <ul class="navbar-nav mr-auto">
          {% if user.is_staff %}
          <li class="nav-item active">
            <a class="nav-link" href="{% url 'admin:index' %}" title="Administration">Admin</a>
          </li>
          {% endif %}
          {% if user.is_authenticated %}
          <li class="nav-item active">
            <a class="nav-link" href="{% url 'stats' %}" title="Your Progress">Stats</a>
          </li>
          {% endif %}
          <li class="nav-item active">
            <a class="nav-link" href="{% url 'help' %}">Help</a>
          </li>
        </ul>
        <div class="navbar-text">
          {% if user.is_authenticated %}
          Logged in as <b>{{ user.username }}</b> -
          <a href="{% url 'password_change' %}">Change Password</a> -
          <form id="logout-form" method="post" action="{% url 'logout' %}">
            {% csrf_token %}
            <button type="submit">Logout</button>
          </form>
          {% else %}
          <a href="{% url 'login' %}">Login</a>
          {% endif %}
        </div>
      </nav>
      {% block subheader %}
      {% endblock %}

      <div id="messages_container">
      {% if messages %}
        {% for message in messages %}
        <div class="alert alert-{{ message.level_tag }}" role="alert">
          {{ message }}
        </div>
        {% endfor %}
      {% endif %}
      </div>
    </div><!-- /container-fluid -->

    {% block body %}{% endblock %}

    {% block footer %}{% endblock %}

    {% block js %}{% endblock %}
  </body>
</html>
