{{define "language-switch"}}
{{if and .LangSwitchEnabled (gt (len .LanguageOptions) 1)}}
<div class="fe-lang-switch" data-i18n-page="{{.CurrentPage}}" data-current-lang="{{.LangCode}}">
    <button type="button" class="fe-lang-toggle" aria-haspopup="true" aria-expanded="false" title="{{T "lang_switch_label"}}">
        <i class='bx bx-globe fe-lang-icon'></i>
        <span class="fe-lang-current">{{range .LanguageOptions}}{{if .Active}}{{.Label}}{{end}}{{end}}</span>
        <i class='bx bx-chevron-down fe-lang-caret'></i>
    </button>
    <ul class="fe-lang-menu">
        {{range .LanguageOptions}}
        <li>
            <a href="#" class="fe-lang-option{{if .Active}} active{{end}}" data-lang="{{.Code}}">{{.Label}}</a>
        </li>
        {{end}}
    </ul>
</div>
{{end}}
{{end}}

{{define "language-switch-styles"}}
{{/* styles moved to assets/css/frontend-common.css */}}
{{end}}

{{define "language-switch-script"}}
{{if and .LangSwitchEnabled (gt (len .LanguageOptions) 1)}}
<script src="{{asset "/static/js/lang-switch.js"}}"></script>
<script>
(function($) {
    $(document).on('click', '.fe-lang-toggle', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var $root = $(this).closest('.fe-lang-switch');
        var $menu = $root.find('.fe-lang-menu');
        $('.fe-lang-switch').not($root).removeClass('open').find('.fe-lang-menu').removeClass('show');
        $root.toggleClass('open');
        $menu.toggleClass('show');
    });
    $(document).on('click', function() {
        $('.fe-lang-switch').removeClass('open');
        $('.fe-lang-menu').removeClass('show');
    });
})(jQuery);
</script>
{{end}}
{{end}}