
<div class="container-fluid position-relative z-index-2 px-0 py-2 bg-gradient-light">
    <div class="container">
        <div class="row align-items-center">
            {% if current_user.is_authenticated %}
                {% if current_user.has_roles('Super User', 'Partner Admin') %}
                    <!-- Partner information (links) - alleen voor Super User en Partner Admin -->
                    <div class="col-md-4 d-flex align-items-center">
                        <span class="material-symbols-outlined me-2" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;">
                            partner_exchange
                        </span>
                        <div class="session-default-item" data-url="{{ prefixed_url_for('partner_bp.partners') }}">
                            <small>
                                {% if 'partner' in session and session['partner'] %}
                                    {{ session['partner'].get('id', 'Not selected') }}: {{ session['partner'].get('name', 'None') }}
                                {% else %}
                                    No partner selected
                                {% endif %}
                            </small>
                        </div>
                    </div>

                    <!-- Tenant information (centraal) - voor Super User en Partner Admin -->
                    <div class="col-md-4 d-flex align-items-center justify-content-center">
                        <span class="material-symbols-outlined me-2" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;">
                            source_environment
                        </span>
                        <div class="session-default-item" data-url="{{ prefixed_url_for('user_bp.tenants') }}">
                            <small>
                                {% if 'tenant' in session and session['tenant'] %}
                                    {{ session['tenant'].get('id', 'Not selected') }}: {{ session['tenant'].get('name', 'None') }}
                                {% else %}
                                    No tenant selected
                                {% endif %}
                            </small>
                        </div>
                    </div>

                {% else %}
                    <!-- Tenant information (links) - voor andere gebruikers -->
                    <div class="col-md-6 d-flex align-items-center">
                        <span class="material-symbols-outlined me-2" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;">
                            source_environment
                        </span>
                        <div class="session-default-item" data-url="{{ prefixed_url_for('user_bp.tenants') }}">
                            <small>
                                {% if 'tenant' in session and session['tenant'] %}
                                    {{ session['tenant'].get('id', 'Not selected') }}: {{ session['tenant'].get('name', 'None') }}
                                {% else %}
                                    No tenant selected
                                {% endif %}
                            </small>
                        </div>
                    </div>
                {% endif %}

                <!-- Catalog information (rechts) -->
                <div class="{% if current_user.has_roles('Super User', 'Partner Admin') %}col-md-4{% else %}col-md-6{% endif %} d-flex align-items-center justify-content-end">
                    <span class="material-symbols-outlined me-2" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;">
                        note_stack
                    </span>
                    <div class="session-default-item" data-url="{{ prefixed_url_for('document_bp.catalogs') }}">
                        <small>
                            {% if 'catalog_id' in session and session['catalog_id'] %}
                                {{ session.get('catalog_id', 'Not selected') }}: {{ session.get('catalog_name', 'None') }}
                            {% else %}
                                No catalog selected
                            {% endif %}
                        </small>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
.session-default-item {
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
}

.session-default-item:hover {
    background-color: rgba(49, 13, 94, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.session-default-item:hover::after {
    content: "Klik om te wijzigen";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(49, 13, 94, 0.1);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 1000;
}

.session-default-item:active {
    transform: translateY(0);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sessionItems = document.querySelectorAll('.session-default-item');

    sessionItems.forEach(item => {
        item.addEventListener('click', function() {
            const targetUrl = this.getAttribute('data-url');
            if (targetUrl) {
                window.location.href = targetUrl;
            }
        });
    });
});
</script>