<!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 "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 %}
                            {% include 'spectator_core/includes/card_nav.html' %}
                            {% 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 %}
                        {% endblock %}
                    </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>
