{% extends "admin/base.html" %}
{% load i18n traduction_tags %}

{% block extrastyle %}
{{ block.super }}
<style>
    #custom-lang-dropdown .dropdown-menu {
        min-width: 150px;
    }
    #custom-lang-dropdown .dropdown-item.active {
        background-color: #667eea;
    }
    #custom-lang-dropdown .dropdown-item:hover:not(.active) {
        background-color: rgba(102, 126, 234, 0.1);
    }
</style>
{% endblock %}

{% block extrajs %}
{{ block.super }}
{% get_languages as db_languages %}
{% current_language_code as current_lang_code %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Find the navbar-nav ml-auto (right side of navbar)
    var navbarRight = document.querySelector('.navbar-nav.ml-auto');
    if (!navbarRight) return;

    // Create language dropdown
    var langDropdown = document.createElement('li');
    langDropdown.className = 'nav-item dropdown';
    langDropdown.id = 'custom-lang-dropdown';

    var currentLang = '{{ current_lang_code|default:"fr" }}'.toUpperCase();

    langDropdown.innerHTML = `
        <a class="nav-link btn" data-toggle="dropdown" href="#" title="Langue d'affichage">
            <i class="fas fa-globe" aria-hidden="true"></i>
            <span class="d-none d-md-inline ml-1">${currentLang}</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-left">
            <span class="dropdown-header">Langue d'affichage</span>
            <div class="dropdown-divider"></div>
            {% for lang in db_languages %}
            <a class="dropdown-item {% if lang.code == current_lang_code %}active{% endif %}"
               href="?lang={{ lang.code }}">
                {% if lang.flag_code %}<span class="mr-2">{{ lang.flag_code }}</span>{% endif %}
                {{ lang.name }}
                {% if lang.is_default %}<small class="text-muted ml-1">(defaut)</small>{% endif %}
            </a>
            {% endfor %}
        </div>
    `;

    // Insert at the beginning of the right navbar (before all other items)
    var firstItem = navbarRight.firstElementChild;
    if (firstItem) {
        navbarRight.insertBefore(langDropdown, firstItem);
    } else {
        navbarRight.appendChild(langDropdown);
    }
});
</script>
{% endblock %}