{% load static %}
{% load i18n %}
{% load theming_tags %}
{% load custom_tags %}

<html>
<head>
    <title>{% block title %}
    {% endblock %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/favicon.svg' %}">
    <link rel="shortcut icon" href="{% static 'assets/favicon.svg' %}">
    <link rel="icon" type="image/png" href="{% static 'assets/favicon.svg' %}" sizes="32x32">
    <link rel="icon" type="image/png" href="{% static 'assets/favicon.svg' %}" sizes="96x96">
    <link rel="apple-touch-icon" href="{% static 'assets/favicon.svg' %}">  
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'assets/favicon.svg' %}">
    <link rel="apple-touch-icon" sizes="152x152" href="{% static 'assets/favicon.svg' %}">
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'assets/favicon.svg' %}">
    <link rel="apple-touch-icon" sizes="167x167" href="{% static 'assets/favicon.svg' %}">

    <link rel="manifest" href="{% url 'web_manifest' %}">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png">

    <!-- Bootstrap 4 -->
    <link id="id_main_css" href="{% theme_url request %}" rel="stylesheet">
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>

    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

    <!-- Select2 for use with django autocomplete light -->
    <link href="{% static 'css/select2.min.css' %}" rel="stylesheet"/>
    <script src="{% static 'js/select2.min.js' %}"></script>

    <!-- Bootstrap theme for select2 -->
    <link rel="stylesheet" href="{% static 'css/select2-bootstrap.css' %}"/>

    <link rel="stylesheet" href="{% static 'themes/select2-bootstrap-theme.css' %}"/>

    <script type="text/javascript">
        $.fn.select2.defaults.set("theme", "bootstrap");
    </script>

    <!-- Fontawesome icons -->
    <link rel="stylesheet" href="{% static "fontawesome/fontawesome_all.min.css" %}">

    {% block extra_head %} <!-- block for templates to put stuff into header -->
    {% endblock %}

</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-{% nav_color request %}" id="id_main_nav"
     style="{% sticky_nav request %}">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item {% if request.resolver_match.url_name in 'view_search,edit_recipe,edit_internal_recipe,edit_external_recipe,view_recipe,data_import_url' %}active{% endif %}">
                <a class="nav-link" href="{% url 'view_search' %}"><i
                        class="fas fa-book"></i> {% trans 'Cookbook' %}<span
                        class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item dropdown {% if request.resolver_match.url_name in 'view_books,view_plan,view_shopping,list_food,view_plan_entry' %}active{% endif %}">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-mortar-pestle"></i> {% trans 'Utensils' %}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="{% url 'view_books' %}"><i
                            class="fas fa-bookmark fa-fw"></i> {% trans 'Books' %}
                    </a>
                    <a class="dropdown-item" href="{% url 'view_plan' %}"><i
                            class="fas fa-calendar fa-fw"></i> {% trans 'Meal-Plan' %}
                    </a>
                    <a class="dropdown-item" href="{% url 'list_shopping_list' %}"><i
                            class="fas fa-shopping-cart fa-fw"></i> {% trans 'Shopping' %}
                    </a>
                    <a class="dropdown-item" href="{% url 'list_food' %}"><i
                            class="fas fa-leaf fa-fw"></i> {% trans 'Ingredients' %}
                    </a>
                </div>
            </li>
            <li class="nav-item dropdown {% if request.resolver_match.url_name in 'list_keyword,data_batch_edit' %}active{% endif %}">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-tags"></i> {% trans 'Keywords' %}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="{% url 'list_keyword' %}"><i
                            class="fas fa-tags fa-fw"></i> {% trans 'Keyword' %}</a>
                    <a class="dropdown-item" href="{% url 'data_batch_edit' %}"><i
                            class="fas fa-edit fa-fw"></i> {% trans 'Batch Edit' %}</a>
                </div>
            </li>
            <li class="nav-item dropdown {% if request.resolver_match.url_name in 'list_storage,data_sync,list_recipe_import,list_sync_log,data_stats,edit_food,edit_storage' %}active{% endif %}">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false"><i class="fas fa-database"></i> {% trans 'Storage Data' %}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="{% url 'list_storage' %}"><i
                            class="fas fa-database fa-fw"></i> {% trans 'Storage Backends' %}</a>
                    <a class="dropdown-item" href="{% url 'data_sync' %}"><i
                            class="fas fa-sync-alt fa-fw"></i> {% trans 'Configure Sync' %}</a>
                    <a class="dropdown-item" href="{% url 'list_recipe_import' %}"><i
                            class="far fa-file-alt fa-fw"></i> {% trans 'Discovered Recipes' %}</a>
                    <a class="dropdown-item" href="{% url 'list_sync_log' %}"><i
                            class="fas fa-history fa-fw"></i> {% trans 'Discovery Log' %}</a>
                    <a class="dropdown-item" href="{% url 'data_stats' %}"><i
                            class="fas fa-chart-line fa-fw"></i> {% trans 'Statistics' %}</a>
                    <a class="dropdown-item" href="{% url 'edit_food' %}"><i
                            class="fas fa-balance-scale fa-fw"></i> {% trans 'Units & Ingredients' %}</a>
                    <a class="dropdown-item" href="{% url 'view_import' %}"><i
                            class="fas fa-file-import"></i> {% trans 'Import Recipe' %}</a>

                </div>
            </li>
        </ul>

        <ul class="navbar-nav ml-auto">
            {% if user.is_authenticated %}
                {% page_help request.resolver_match.url_name as help_button %}
                {% if help_button %}{{ help_button|safe }}{% endif %}

                <li class="nav-item dropdown {% if request.resolver_match.url_name in 'view_settings,view_history,view_system,docs_markdown' %}active{% endif %}">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false"><i
                            class="fas fa-user-alt"></i> {{ user.get_user_name }}
                    </a>

                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="{% url 'view_settings' %}"><i
                                class="fas fa-user-cog fa-fw"></i> {% trans 'Settings' %}</a>
                        <a class="dropdown-item" href="{% url 'view_history' %}"><i
                                class="fas fa-history"></i> {% trans 'History' %}</a>
                        {% if user.is_superuser %}
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{% url 'view_system' %}"><i
                                    class="fas fa-server fa-fw"></i> {% trans 'System' %}</a>
                            <a class="dropdown-item" href="{% url 'admin:index' %}"><i
                                    class="fas fa-user-shield fa-fw"></i> {% trans 'Admin' %}</a>
                        {% endif %}
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'docs_markdown' %}"><i
                                class="fab fa-markdown fa-fw"></i> {% trans 'Markdown Guide' %}</a>
                        <a class="dropdown-item" href="https://github.com/vabene1111/recipes"><i
                                class="fab fa-github fa-fw"></i> {% trans 'GitHub' %}</a>
                        <a class="dropdown-item" href="{% url 'docs_api' %}"><i
                                class="fas fa-passport fa-fw"></i> {% trans 'API Documentation' %}</a>
                        <a class="dropdown-item" href="{% url 'api:api-root' %}"><i
                                class="fas fa-file-code fa-fw"></i> {% trans 'API Browser' %}</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="{% url 'account_logout' %}"><i
                                class="fas fa-sign-out-alt fa-fw"></i> {% trans 'Logout' %}</a>
                    </div>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'account_logout' %}">{% trans 'Login' %} <i class="fas fa-sign-in-alt"></i></a>
                </li>
            {% endif %}
        </ul>
    </div>
</nav>

{% message_of_the_day as message_of_the_day %}
{% if message_of_the_day %}
    <div class="bg-warning" style=" width: 100%; text-align: center!important; color: #ffffff; padding: 8px">
        {{ message_of_the_day }}
    </div>
{% endif %}

<br/>
<br/>

<div class="container-fluid" id="id_base_container">
    <div class="row">
        <div class="col-xl-2 d-none d-xl-block">
            {% block content_xl_left %}

            {% endblock %}
        </div>
        <div class="col-xl-8 col-12">
            {% for message in messages %}
                <div class="row">
                    <div class="col col-md-12">
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                </div>
            {% endfor %}

            {% block content %}

            {% endblock %}
        </div>
        <div class="col-xl-2 d-none d-xl-block">
            {% block content_xl_right %}

            {% endblock %}
        </div>
    </div>

    {% block content_fluid %}
    {% endblock %}

</div>

{% block script %}
{% endblock script %}

<script type="application/javascript">
    window.addEventListener("load", () => {
        if ("serviceWorker" in navigator) {
            navigator.serviceWorker.register("{% url 'service_worker' %}", { scope: '/' }).then(function (reg) {

            }).catch(function (err) {
                console.warn('Error whilst registering service worker', err);
            });
        } else {
            console.warn('service worker not in navigator');
        }
    });
</script>

</body>
</html>
