{% load static %}
{% load i18n %}
{% load navactive %}
{% load auth_notifications %}
{% load theme_tags %}
<!DOCTYPE html>
<html lang="en" {% theme_html_tags %}>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- End Required meta tags -->

        <!-- Meta tags -->
        <!-- TODO Bundle all the site specific stuff up into its own template for easy override -->
        <meta name="description" content="">
        <meta name="author" content="">
        {% include 'allianceauth/icons.html' %}
        <!-- Meta tags -->
        <title>{% block title %}{% block page_title %}{% endblock page_title %} - {{ SITE_NAME }}{% endblock title %}</title>

        {% theme_css %}

        {% include 'bundles/fontawesome.html' %}
        {% include 'bundles/auth-framework-css.html' %}

        <style>
            .navbar-toggler.collapsed{
                transform: rotate(180deg);
            }

            {% if user.is_authenticated %}
                .nav-padding {
                    padding-top: {% header_padding_size %} !important;
                }
            {% endif %}

            .auth-logo {
                background-position: bottom;
                background-repeat: no-repeat;
                background-image: url("{% static 'allianceauth/images/auth-logo.png' %}") ;
            }
        </style>
        {% block extra_css %}{% endblock extra_css %}
    </head>

    <body>
        {% if user.is_authenticated %}
            <!-- Top Menu, Blocks don't work in "include" tagged views -->
            <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-primary">
                <div class="container-fluid justify-content-start">
                    {% if user.is_authenticated %}
                        <a class="navbar-brand" data-bs-toggle="collapse" data-bs-target="#sidebar" role="button">
                            <i class="fas fa-solid fa-bars ms-2 me-2"></i>
                        </a>
                    {% endif %}

                    <div class="navbar-brand">{% block header_nav_brand %}{{ SITE_NAME }}{% endblock %}</div>

                        <div class="collapse navbar-collapse" id="navbarexpand">
                            <div class="m-2"></div>

                            <ul id="nav-left" class="navbar-nav nav me-auto">
                                {% block header_nav_collapse_left %}
                                {% endblock %}
                            </ul>

                            <ul id="nav-right" class="navbar-nav">
                                {% block header_nav_collapse_right %} <!-- Default to add char and swap main -->
                                    {% include 'allianceauth/top-menu-rh-default.html' %}
                                {% endblock %}
                                {% include 'menu/menu-notification-block.html' %}
                            </ul>
                        </div>

                        <a class="navbar-toggler navbar-brand border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#navbarexpand" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="margin-left: auto;">
                            <i class="fas fa-solid fa-chevron-up"></i>
                        </a>
                </div>
            </nav>
        {% endif %}
        <!-- End Top Menu -->

        <!-- Body -->
        <main class="row flex-nowrap m-0">
            {% include 'menu/sortable-side-menu.html' %}

            <div class="nav-padding col flex-nowrap vh-100 overflow-auto">
                <div class="my-4">
                    {% include 'allianceauth/messages-bs5.html' %}

                    {% block content %}
                    {% endblock content %}
                </div>
            </div>
        </main>
        <!-- End Body -->

        <script>
            (() => {
                // TODO Extend this to the groups in the sidebar too.
                // TODO Move to own JS file
                const sidebar = document.getElementById('sidebar');

                sidebar.addEventListener("shown.bs.collapse", () => {
                    localStorage.removeItem("sidebar_" + sidebar.id);
                });

                sidebar.addEventListener("hidden.bs.collapse", () => {
                    localStorage.setItem("sidebar_" + sidebar.id, true);
                });

                if (localStorage.getItem("sidebar_" + sidebar.id) === "true") {
                    sidebar.classList.remove("show")
                } else {
                    sidebar.classList.add("show")
                }
            })();
        </script>

        {% include 'bundles/jquery-js.html' %}
        {% theme_js %}

        {% if user.is_authenticated %}
            <script>
                const notificationUpdateSettings = {
                    refreshTime: "{% notifications_refresh_time %}",
                    userNotificationsCountViewUrl: "{% url 'notifications:user_notifications_count' request.user.pk %}"
                };
            </script>

            {% include 'bundles/refresh-notification-icon-js.html' %}
        {% endif %}

        {% block extra_javascript %}
        {% endblock extra_javascript %}
        <script>
            {% block extra_script %}
            {% endblock extra_script %}
        </script>
    </body>
</html>
