{% load i18n %}
<style>
  .ms-lang-switcher { display: inline-flex; align-items: center; }
  .ms-lang-switcher .form-select {
    border-radius: 999px;
    border: 1px solid #c7d4e9;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.36rem 1.85rem 0.36rem 0.8rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  }
  .ms-lang-switcher .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.18);
  }
  .ms-lang-switcher-link {
    font-size: 0.74rem;
    color: #64748b;
    text-decoration: none;
    margin-right: 0.5rem;
  }
  .ms-lang-switcher-link:hover { color: #1d4ed8; }
</style>
<div class="header-right">
    <a class="ms-lang-switcher-link" href="/language-test/" title="Language test">LANG</a>
    <form action="{% url 'set_language' %}" method="post" class="ms-lang-switcher me-2" aria-label="Language switcher">
        {% csrf_token %}
        <input name="next" type="hidden" value="{{ request.get_full_path }}">
        <label for="header-language-switcher" class="visually-hidden">{% trans "Language" %}</label>
        <select id="header-language-switcher" name="language" class="form-select form-select-sm" onchange="this.form.submit()">
            {% get_current_language as LANGUAGE_CODE %}
            <option value="nl" {% if LANGUAGE_CODE == 'nl' %}selected{% endif %}>NL</option>
            <option value="en" {% if LANGUAGE_CODE == 'en' %}selected{% endif %}>EN</option>
            <option value="de" {% if LANGUAGE_CODE == 'de' %}selected{% endif %}>DE</option>
            <option value="fr" {% if LANGUAGE_CODE == 'fr' %}selected{% endif %}>FR</option>
            <option value="es" {% if LANGUAGE_CODE == 'es' %}selected{% endif %}>ES</option>
            <option value="it" {% if LANGUAGE_CODE == 'it' %}selected{% endif %}>IT</option>
            <option value="pt" {% if LANGUAGE_CODE == 'pt' %}selected{% endif %}>PT</option>
            <option value="ru" {% if LANGUAGE_CODE == 'ru' %}selected{% endif %}>RU</option>
        </select>
    </form>

    <a tabindex="0" aria-label="Open Search" role="search" class="search-toggler user-button menu-circle">
        <i class="fa fa-search"></i>
    </a>
    <a href="{% url 'customer:summary' %}" aria-label="{% trans 'Customer summary' %}" class="user-button menu-circle"><i class="fa fa-user-solid"></i></a>
    {% include 'oxyan/headers/partials/mini_basket.html' %}
</div>

<div class="alert-messages-header" aria-live="polite">
    {% include "oscar/partials/alert_messages.html" with messages=messages %}
</div>