<style>
    .dropdown {
        position: absolute;
        top: 10px;
        right: 0;
    }

    .dropdown .dropdown-toggle {
        background-color: #fff;
        border: none;
        outline: none;
        color: #858585;
        font-size: 13px;
        height: 32px;
        line-height: 1;
        transition: all 0.4s;
        font-family: 'Noto Sans', sans-serif;
        margin-right: 22px;
    }

    .dropdown .dropdown-toggle:hover {
        background-color: #e7e7e7;
    }

    .dropdown .dropdown-menu-content {
        background-color: #ffffff;
        box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.24);
        border-width: 0px;
        border-radius: 0;
        padding: 11px 0 0;
        overflow-y: scroll;
        max-height: 365px;
        margin: 0;
    }

    .dropdown .glyphicon {
        margin-left: 6px;
        top: 2px;
        transition: 0.3s all;
    }

    .dropdown li {
        height: 35px;
        text-align: left;
        padding-left: 24px;
        font-size: 13px;
        color: #4d4d4e;
        line-height: 2.85;
        font-family: 'Noto Sans', sans-serif;
    }
    .dropdown li:last-child {
        margin-bottom: 14px;
    }

    .dropdown li.active {
        font-weight: bold;
    }

    .dropdown li:focus, .dropdown li:hover {
        color: #4d4d4e;
        background-color: rgba(56, 171, 99, 0.11);
    }

    .dropdown .dropdown-menu-content > li:hover {
        cursor: pointer;
    }

    .dropdown .dropdown-menu-container {
        max-height: 365px;
        overflow: hidden;
        width: 164px;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.24);
        z-index: 5000000000;
    }

    .dropdown.open .glyphicon {
        transform: rotate(180deg);
    }
</style>


<div class="dropdown">
    <button type="button" class="dropdown-toggle" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
        <span class="dropdown-title">English</span>
        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-container">
        <ul class="dropdown-menu-content"></ul>
    </div>
</div>

<script>
    (function () {
        var items = {
            English: 'en',
            Dutch: 'nl',
            Ukrainian: 'uk',
            Arabic: 'ar',
            Italian: 'it',
            Chinese: 'zh',
            Polish: 'pl',
            Danish: 'da',
            Hungarian: 'hu',
            Russian: 'ru',
            French: 'fr',
            Spanish: 'es',
            Romanian: 'ro',
            Greek: 'el',
            Swedish: 'sv',
            Turkish: 'tr',
            Indonesian: 'id',
            Portuguese: 'pt',
            Hebrew: 'he',
            German: 'de',
            Malay: 'ms',
            Norwegian: 'no',
            Farsi: 'fa',
        };
        var currentLocale = $('html').attr('lang');

        var currentLocaleName = Object.keys(items).find(function (key) {
            return items[key] === currentLocale;
        });

        $('.dropdown-title').text(currentLocaleName);

        $('.dropdown-menu-content')
            .append(Object.keys(items).sort().map(function (item) {
                return $('<li>').text(item);
            }))
            .on("click", function (e) {
                var nextLocaleName = e.target.innerText;
                if (nextLocaleName === currentLocaleName) {
                    e.stopPropagation();
                } else {
                    document.cookie = 'locale=' + items[nextLocaleName] + ';path=/';
                    {% if webshield -%}
                    location.reload(true);
                    {%- else -%}
                    insertParam('_captcha', true);  // reload and force visible captcha
                    $('.dropdown-title').text(nextLocaleName);
                    {%- endif %}
                }

            });

        $([].find.call($('.dropdown-menu li'), function (item) {
            return item.innerText === currentLocaleName;
        })).addClass('active');

        function insertParam(key, value) {
            key = encodeURIComponent(key);
            value = encodeURIComponent(value);

            var kvp = document.location.search.substr(1).split('&');
            if (kvp == '') {
                document.location.search = '?' + key + '=' + value;
            }
            else {

                var i = kvp.length;
                var x;
                while (i--) {
                    x = kvp[i].split('=');

                    if (x[0] === key) {
                        x[1] = value;
                        kvp[i] = x.join('=');
                        break;
                    }
                }

                if (i < 0) {
                    kvp[kvp.length] = [key, value].join('=');
                }

                //this will reload the page, it's likely better to store this until finished
                document.location.search = kvp.join('&');
            }
        }
    })();
</script>