{% load i18n i18n_helpers agency_navigation %}
<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-header-cta {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    margin-left: 0.5rem;
  }
</style>
<div class="header-right">
    <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.path|untranslated_url }}">
        <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>

    {% agency_page 'contact' as contact_page %}
    {% if contact_page %}
    <a href="{{ contact_page.url }}" class="btn btn-primary ms-header-cta">{% agency_primary_cta %}</a>
    {% endif %}
</div>

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