{% load static %}

<div class="top-navigation bg-app-layer-one d-flex justify-content-between align-items-center px-3 border-bottom flex-shrink-0" style="height: 64px;">
    {% block top_navigation_content %}
        <div class="d-flex align-items-center">
            {% block top_navigation_mobile_menu %}
                {% include 'django_spire/navigation/mobile_navigation.html' %}
            {% endblock %}

            {% block top_navigation_title %}
            {% endblock %}

            {% block top_navigation_breadcrumb %}
                {% include 'django_spire/element/breadcrumb_element.html' %}
            {% endblock %}
        </div>

        <div class="d-flex align-items-center gap-1">
            {% block top_navigation_icons %}
                {% if AuthController.help_desk.can_view %}
                    {% block help_desk_icon %}
                        {% url 'django_spire:help_desk:page:list' as help_desk_url %}
                        {% include 'django_spire/icon/responsive_icon.html' with icon_href=help_desk_url icon='bi bi-headset' font_size='ds-fs-3' icon_class='mx-1' %}
                    {% endblock %}
                {% endif %}

                {% block theme_selector %}
                    <div>
                        {% include 'django_spire/theme/element/theme_selector.html' with icon_size='ds-fs-3' %}
                    </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 ds-fs-3 mx-1 cursor-pointer text-app-default-text-color text-app-primary-hover"
                            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 %}
            {% endblock %}
        </div>
    {% endblock %}
</div>