{% load wagtailcore_tags i18n %}

<style>
.horizontal-dropdown{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100px;
    z-index: 1000
}

.horizontal-dropdown-wrapper{
    width: 100% !important;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 15px;
}

.dropdown-menu-horizontal{
    height: 100% !important;
    margin: 0 !important;
    display: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px 10px;
}

.horizontal-dropdown:hover .dropdown-menu-horizontal {
    display: flex;
}

.horizontal-dropdown .dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}
.horizontal-dropdown .dropdown-toggle::after{
    display: none;
}

.horizontal-dropdown .dropdown-menu-horizontal li{
    padding: 0;
    border-radius: 5px !important;
    list-style-type: none;
}

.horizontal-dropdown .dropdown-menu-horizontal li .dropdown-item:hover{
    background-color: #444 !important;
    border-radius: 5px !important;
}
</style>

{% if page and page.get_translations.live %}
<div class="horizontal-dropdown">

    <div class="horizontal-dropdown-wrapper">
        <ul class="dropdown-menu-horizontal">
            {% for translation in page.get_translations.live %}
            {% get_language_info for translation.locale.language_code as lang %}
                <li class="bg-dark">
                    <a class="dropdown-item text-white" href="{% pageurl translation %}" rel="alternate" hreflang="{{ language_code }}">
                    {{ lang.name_local }}
                    </a>
                </li>
            {% endfor %}
        </ul>
        <button class="btn btn-sm bg-dark text-white fw-bold dropdown-toggle" type="button">
            {% get_language_info for page.locale.language_code as lang %}
            {{ lang.name_local }}
        </button>
    </div>

</div>
{% endif %}