<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{% block head_title %}{% block head_page_title %}{% endblock %} ({% block head_site_title %}Spectator{% endblock %}){% endblock %}</title>

    {% load static %}

    {% block bootstrap_css %}
      <link rel="stylesheet" href="{% static "spectator-core/css/bootstrap.min.css" %}">
    {% endblock %}

    {% block head_extra %}
      {# Use this if you need to more to the <head> of every page. #}
    {% endblock %}
  </head>
  <body>
    {% load spectator_core %}
    {% get_enabled_apps as enabled_apps %}

    {% block navbar %}
      <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <div class="container">
          <a class="navbar-brand" href="{% url 'spectator:core:home' %}">
            {% block navbar_title %}
              Spectator
            {% endblock %}
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbar-content">
            <ul class="navbar-nav mr-auto">
              {% block navbar_list_start %}
              {% endblock %}

              {% if 'reading' in enabled_apps %}
                <li class="nav-item {% block reading_nav_active %}{% endblock %}">
                  <a class="nav-link" href="{% url 'spectator:reading:home' %}">
                    Reading
                  </a>
                </li>
              {% endif %}

              {% if 'events' in enabled_apps %}
                <li class="nav-item {% block events_nav_active %}{% endblock %}">
                  <a class="nav-link" href="{% url 'spectator:events:home' %}">
                    Events
                  </a>
                </li>
              {% endif %}

              {% block navbar_list_end %}
              {% endblock %}
            </ul>
          </div> <!-- .collapse -->
        </div> <!-- .container -->
      </nav>
    {% endblock navbar %}

    <div class="container">

      <ol class="breadcrumb">
        {% block breadcrumbs %}
          <li class="breadcrumb-item">
            <a href="{% url 'spectator:core:home' %}">Home</a>
          </li>
        {% endblock %}
      </ol>

      {% block content_heading %}
        <h1 class="my-4">
          {% block content_title %}
          {% endblock %}
        </h1>
      {% endblock %}

      {% block content_main %}
        <div class="row">
          <div class="col-md-9">
            {% block content %}
            {% endblock %}
          </div>
          <div class="col-md-3">
            {% block sidebar %}
              {% block sidebar_nav %}
                {% if 'reading' in enabled_apps %}
                  {% include 'spectator_reading/includes/card_nav.html' %}
                {% endif %}
                {% if 'events' in enabled_apps %}
                  {% include 'spectator_events/includes/card_nav.html' %}
                {% endif %}
                {% include 'spectator_core/includes/card_nav.html' %}
              {% endblock sidebar_nav %}

              {% block sidebar_content %}
              {% endblock sidebar_content %}
            {% endblock sidebar %}
          </div>
        </div>
      {% endblock content_main %}
    </div>

  {% block footer %}
    {# Use this if you need to add a visible footer to every page. #}
  {% endblock %}

  {% block foot_extra %}
    {# Use this if you need to add JS etc to the foot of the page. #}
  {% endblock %}
  </body>
</html>
