<!DOCTYPE html>
{% load static ditto_core %}
<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 title %}{% endblock %} ({% block head_site_title %}Ditto{% endblock %}){% endblock %}</title>

        {% 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>

        {% block navbar %}
            <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
                <div class="container">
                    <a class="navbar-brand" href="{% url 'ditto:home' %}">
                        {% block navbar_title %}
                            Ditto
                        {% 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">
                            {% block navbar_list_start %}
                            {% endblock %}

                            {% get_enabled_apps as enabled_apps %}

                            {% if enabled_apps|length > 0 %}
                                {% for app in enabled_apps %}
                                    {% if app == 'flickr' %}
                                        <li class="nav-item {% block flickr_nav_active %}{% endblock %}">
                                            <a class="nav-link" href="{% url 'flickr:home' %}">
                                                Flickr
                                            </a>
                                        </li>
                                    {% elif app == 'lastfm' %}
                                        <li class="nav-item {% block lastfm_nav_active %}{% endblock %}">
                                            <a class="nav-link" href="{% url 'lastfm:home' %}">
                                               Last.fm
                                            </a>
                                        </li>
                                    {% elif app == 'pinboard' %}
                                        <li class="nav-item {% block pinboard_nav_active %}{% endblock %}">
                                            <a class="nav-link" href="{% url 'pinboard:home' %}">
                                                Pinboard
                                            </a>
                                        </li>
                                    {% elif app == 'twitter' %}
                                        <li class="nav-item {% block twitter_nav_active %}{% endblock %}">
                                            <a class="nav-link" href="{% url 'twitter:home' %}">
                                                Twitter
                                            </a>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}

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

        <div class="container">

            <ol class="breadcrumb">
                {% block breadcrumbs %}{% endblock %}
            </ol>

            {% block content %}
            {% endblock content %}

        </div>

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

    {% block jquery_js %}
        <script src="{% static "js/jquery-3.2.1.slim.min.js" %}"></script>
    {% endblock %}

    {% block bootstrap_js %}
        <script src="{% static "js/popper.min.js" %}"></script>
        <script src="{% static "js/bootstrap/util.js" %}"></script>
        <script src="{% static "js/bootstrap/collapse.js" %}"></script>
    {% endblock %}

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