{% load static %}
<div class="titlebar shadow-sm d-flex justify-content-between align-items-center no-print">
    <div class="d-flex align-items-center flex-grow-1" style="min-width: 0;">
        {% 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 class="align-items-center d-flex text-decoration-none text-inherit w-100 ps-2" style="min-width: 0;">
            <img src="{{ APP_CONFIG.logo_url|default:'/static/img/base_logo.webp' }}" alt="Logo" class="flex-shrink-0">
            <!-- Responsive Title with Smart Truncation -->
            <p class="ms-1 mb-0 align-items-center d-flex text-truncate" style="flex-shrink: 1; min-width: 0;">
                <span class="text-truncate">{{ APP_CONFIG.name|default:"microSYS" }}{% if user.scope %} - {{ user.scope.name }}{% endif %}</span>
                &nbsp;&nbsp;{% block header %}{% endblock %}
            </p>
        </div>
    </div>
    <div class="pe-2 d-flex align-items-center">
        <!-- Extra Titlebar Controls (Dynamically injected by autofill.js) -->
        
        {% 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 }}"
            >
                <i class="bi bi-house-fill"></i>
            </a>
            <!-- Modern User Dropdown Trigger -->
            <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>
            
            <!-- <div class="m-0 signout-wrapper ms-2">
                <button id="start-tour" type="button" class="btn btn-sm btn-outline-primary d-flex align-items-center px-2 login-title-btn titlebar-signout" title="{{ MS_TRANS.tour_title }}" aria-label="{{ MS_TRANS.help }}">
                    <i class="bi bi-question-circle-fill signout-icon"></i>
                    <span class="signout-name">{{ MS_TRANS.help }}</span>
                    <span class="visually-hidden">{{ MS_TRANS.help }}</span>
                </button>
            </div>

            <form method="POST" action="{% url 'logout' %}" class="m-0 signout-wrapper ms-2">
                {% csrf_token %}
                <button type="submit" class="btn btn-sm btn-outline-primary d-flex align-items-center px-2 login-title-btn titlebar-signout" title="{{ MS_TRANS.logout }}" aria-label="{{ MS_TRANS.logout }} {{ user.username }}" style="--signout-name-ch: {{ user.username|length }};">
                    <i class="bi bi-box-arrow-left signout-icon"></i>
                    <span class="signout-name">{{ user.username }}</span>
                    <span class="visually-hidden">{{ MS_TRANS.logout }}</span>
                </button>
            </form> -->

        {% else %}
            <!-- Login Button for Unauthenticated Users (circular icon) -->
            {% 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>
</div>