{% load static %}
<div
    class="titlebar shadow-sm no-print"
    data-title-align="{{ titlebar.title_align|default:'start' }}"
    data-title-size="{{ titlebar.title_size|default:'md' }}"
    data-titlebar-height="{{ titlebar.height|default:'balanced' }}"
    data-titlebar-surface="{{ titlebar.surface|default:'default' }}"
    data-titlebar-home-shape="{{ titlebar.home_shape|default:'circle' }}"
    data-titlebar-show-title="{% if titlebar.show_title %}true{% else %}false{% endif %}"
    data-titlebar-show-logo="{% if titlebar.show_logo %}true{% else %}false{% endif %}"
    data-titlebar-show-home="{% if titlebar.show_home_button %}true{% else %}false{% endif %}"
    data-titlebar-scope-name="{% if user.scope %}{{ user.scope.name }}{% endif %}"
    data-sidebar-collapse-mode="{{ sidebar.collapse_mode|default:'icons' }}"
>
    <div class="titlebar__side titlebar__side--start">
        {% if request.user.is_authenticated %}
        <button id="sidebarToggle" class="sidebar-toggle ms-2 flex-shrink-0" type="button" aria-label="{{ MS_TRANS.tut_sidebar_title|default:'Sidebar' }}">
            <i class="bi bi-list"></i>
        </button>
        {% endif %}
    </div>
    <div class="titlebar__center">
        <div class="titlebar__brand">
            <img src="{{ APP_CONFIG.logo_url|default:'/static/img/base_logo.webp' }}" alt="Logo" class="titlebar__logo flex-shrink-0" data-titlebar-logo>
            <div class="titlebar__heading">
                <p class="ms-1 mb-0 align-items-center d-flex text-truncate titlebar__title" data-titlebar-title>
                    <span class="text-truncate" data-titlebar-title-text>{{ APP_CONFIG.identity.display_name|default:"microSYS" }}{% if user.scope %} - {{ user.scope.name }}{% endif %}</span>
                </p>
                <div class="titlebar__header-slot">{% block header %}{% endblock %}</div>
            </div>
        </div>
    </div>
    <div class="titlebar__side titlebar__side--end pe-2">
        {% if user.is_authenticated %}
            <a
                href="{{ APP_CONFIG.home_url }}"
                class="ms-titlebar-home ms-2"
                title="{{ MS_TRANS.btn_home }}"
                aria-label="{{ MS_TRANS.btn_home }}"
                data-titlebar-home
            >
                <i class="bi bi-house-fill"></i>
            </a>
            <div id="ms-user-dropdown-trigger" class="ms-user-trigger no-print ms-2">
                {% if user.profile.profile_pic %}
                    <img src="{{ user.profile.profile_pic.url }}" class="ms-trigger-avatar" alt="{{ user.username }}">
                {% else %}
                    <div class="ms-trigger-avatar d-flex align-items-center justify-content-center bg-light text-secondary border">
                        <i class="bi bi-person-fill"></i>
                    </div>
                {% endif %}
                <span class="ms-trigger-name">{{ user.username }}</span>
            </div>
        {% else %}
            {% if request.resolver_match.url_name != 'login' %}
            <a href="{% url 'login' %}" class="ms-login-round" title="{{ MS_TRANS.login }}">
                <i class="bi bi-person-lock"></i>
            </a>
            {% endif %}
        {% endif %}
    </div>
</div>