<div class="user-settings-button clickable" data-button>
    <div class="selected-state">
        <span class="country-flag icon-{{ selected.localeFlag }}"></span>
        <span class="currency-symbols">{{ selected.currencySymbol }}</span>
    </div>
    <span class="dropdown-triangle"></span>
</div>
<div class="user-settings {{ open ? 'open' : '' }}">
    <div class="actions">
        <button id="cancel" class="cancel">__('user_settings.actions.cancel')</button>
        <button id="save" class="save">__('user_settings.actions.save')</button>
    </div>
    <div class="tabs">
        <a href="#" class="tab hidden {{ tab == 'language' ? 'active' : '' }}" data-tab="language">
            <span class="name">__('user_settings.language')</span>
            <span class="current">{{ selected.language }}</span>
        </a>
        <a href="#" class="tab {{ tab == 'country' ? 'active' : '' }}" data-tab="country">
            <span class="name">__('user_settings.country')</span>
            <span class="current">{{ selected.country }}</span>
        </a>
        <a href="#" class="tab {{ tab == 'currency' ? 'active' : '' }}" data-tab="currency">
            <span class="name">__('user_settings.currency')</span>
            <span class="current">{{ t[selected.currency] }}</span>
        </a>
    </div>
    <div class="content">
        <div class="panel {{ tab == 'language' ? 'active' : '' }}">
            {% for column of locales %}
                <div class="column">
                    {% for locale of column %}
                        <a href="{{ locale.code != 'ru' ? '?locale=' + locale.code + '&currency=' + selected.currency : 'https://www.aviasales.ru' }}"
                           class="option {{ selected.locale == locale.code ? 'selected' : '' }}"
                           data-locale="{{ locale.code }}">
                            {{ locale.language }}
                        </a>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
        <div class="panel {{ tab == 'country' ? 'active' : '' }}">
            {% for column of hosts %}
                <div class="column">
                    {% for host of column %}
                        <a href="{{ host.code != 'RU' ? '//' + host.host + currentPathName + '?locale=' + selected.locale + '&currency=' + selected.currency + '&marker=' + marker : 'https://www.aviasales.ru' }}"
                           class="option {{ selected.host == host.code ? 'selected' : '' }}"
                           data-host="{{ host.code }}">
                            <span class="country-flag icon-{{ host.code }}"></span>
                            {{ host.country }}
                        </a>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
        <div class="panel {{ tab == 'currency' ? 'active' : '' }}">
            {% for column of currencies %}
                <div class="column">
                    {% for currency of column %}
                        <a href="?currency={{ currency.code }}"
                           class="option {{ selected.currency == currency.code ? 'selected' : '' }}"
                           data-currency="{{ currency.code }}">
                            <span class="currency-symbols">{{ currency.symbol }}</span>
                            {{ t[currency.code] }}
                        </a>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    </div>
</div>
<div class="user-settings-overflow {{ open ? 'open' : '' }}" data-overflow></div>
