{% load static %}

<div class="top-navigation row justify-content-between align-items-center p-1 p-md-2 mb-2 border-bottom shadow-sm">
    {% block top_navigation_content %}
        <div class="col">
            <div class="row">
                <div class="col">
                    <a href="/" class="d-block mb-3">
                    <span class="fs-5 fs-md-1 fw-bold d-lg-block float-start">
                        {% block top_navigation_title %}
                            Django Spire
                        {% endblock %}
                    </span>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    {% include 'django_spire/element/breadcrumb_element.html' %}
                </div>
            </div>
        </div>

        <div class="col-auto d-flex">
            {% block top_navigation_icons %}
                {% if AuthController.help_desk.can_view %}
                    {% block help_desk_icon %}
                        {% include 'django_spire/help_desk/element/icon.html' %}
                    {% endblock %}
                {% endif %}


                {% block theme_selector %}
                    <div>
                        {% include 'django_spire/theme/element/theme_selector.html' with icon_size='fs-2' %}
                    </div>
                {% endblock %}

                {% if request.user.is_authenticated %}
                    {% block notification_icon %}
                        <div>
                            {% include 'django_spire/notification/app/element/notification_bell.html' %}
                        </div>
                    {% endblock %}
                {% endif %}

                {% if request.user.is_authenticated %}
                    <div class="dropdown">
                        <i
                            class="bi bi-person-circle fs-2 mx-2 cursor-pointer"
                            id="dropdownMenuButton1"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                        >
                        </i>
                        <ul class="dropdown-menu py-0 bg-app-layer-one" aria-labelledby="dropdownMenuButton1">
                            {% if request.user.is_superuser %}
                                <li class="py-0">
                                    <a class="dropdown-item fs--1 bg-app-layer-three-hover"
                                       href="{% url 'admin:index' %}" target="_blank">
                                        Admin Panel
                                    </a>
                                </li>
                                <li class="py-0">
                                    <a class="dropdown-item fs--1 bg-app-layer-three-hover"
                                       href="{% url 'django_spire:theme:page:dashboard' %}" target="_blank">
                                        Theme Dashboard
                                    </a>
                                </li>
                            {% endif %}
                            <li class="py-0">
                                <a href="{% url 'django_spire:auth:admin:password_change' %}"
                                   class="dropdown-item fs--1 bg-app-layer-three-hover">
                                    Change Password
                                </a>
                            </li>
                            <li class="py-0">
                                <a href="{% url 'django_spire:auth:redirect:logout' %}"
                                   class="dropdown-item fs--1 bg-app-layer-three-hover">
                                    Logout
                                </a>
                            </li>
                        </ul>
                    </div>
                {% endif %}

                <div class="col-auto d-lg-none">
                    {% include 'django_spire/navigation/mobile_navigation.html' %}
                </div>
            {% endblock %}
        </div>
    {% endblock %}
</div>