{% load static %}

<div class="top-navigation row justify-content-between align-items-center p-1 p-md-2 mb-3 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-none 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 %}
                {% block theme_selector %}
                    <div>
                        {% include 'django_spire/theme/element/theme_selector.html' with icon_size='fs-2' %}
                    </div>
                {% endblock %}

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

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