{% extends 'main/base.html' %}
{% load i18n static %}

{% block title %}Language Setting{% endblock %}

{% block top_icon %}
    <a href="/personal/" class="top-icon-btn">👤</a>
{% endblock %}

{% block content %}
<div class="content-card section-inner" style="max-width:520px; margin:0 auto; position:relative;">
    {% include 'main/_subheader.html' with title=_("Language Setting") back="/personal/" %}
    <ul id="language-list" style="list-style:none; padding:0; margin:0; display:grid; gap:0.5rem;">
        <li data-lang="en" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="{% static 'flags/us.png' %}" alt="English" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">English</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="de" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="{% static 'flags/de.png' %}" alt="Deutsch" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">Deutsch</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="fr" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="{% static 'flags/fr.png' %}" alt="Français" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">Français</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="it" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="{% static 'flags/it.png' %}" alt="Italiano" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">Italiano</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="nl" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="{% static 'flags/nl.png' %}" alt="Nederlands" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">Nederlands</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="cs" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/cz.png" alt="Čeština" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">Čeština</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="pl" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/pl.png" alt="Polski" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">Polski</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="sk" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/sk.png" alt="Slovenčina" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">Slovenčina</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="es" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/es.png" alt="Español" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">Español</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="zh-hans" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/cn.png" alt="中文" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">中文</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="hi" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/in.png" alt="हिन्दी" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">हिन्दी</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="ja" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/jp.png" alt="日本語" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">日本語</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="ko" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/kr.png" alt="한국어" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">한국어</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
        <li data-lang="ar" class="lang-item" style="display:flex; align-items:center; justify-content:space-between; padding:1rem; background:rgba(255,255,255,0.02); border-radius:12px;">
            <div style="display:flex; gap:0.75rem; align-items:center;"><img src="https://flagcdn.com/48x36/ae.png" alt="العربية" style="width:36px; height:24px; border-radius:4px; object-fit:cover;">العربية</div>
            <div class="radio" aria-hidden="true" style="width:24px; height:24px; border-radius:999px; background:rgba(255,255,255,0.04);"></div>
        </li>
    </ul>
</div>

<script>
(function(){
    function getCookie(name) {
        const v = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
        return v ? v.pop() : '';
    }
    const csrftoken = getCookie('csrftoken');
    const current = '{{ current_language }}';
    const items = document.querySelectorAll('.lang-item');
    function mark(lang){
        items.forEach(function(el){
            const radio = el.querySelector('.radio');
            if(el.dataset.lang === lang){
                radio.style.background = '#ffffff';
                radio.style.boxShadow = '0 0 0 2px rgba(255,255,255,0.25)';
            } else {
                radio.style.background = 'rgba(255,255,255,0.12)';
                radio.style.boxShadow = 'none';
            }
        });
    }
    mark(current);
    items.forEach(function(el){
        el.addEventListener('click', function(){
            const lang = el.dataset.lang;
            // optimistic UI
            mark(lang);
            fetch('/api/set-language/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrftoken,
                },
                body: JSON.stringify({language: lang}),
                credentials: 'same-origin'
            }).then(function(res){
                if(!res.ok) throw new Error('Network error');
                return res.json();
            }).then(function(data){
                // show selected state then reload so server-side translations apply
                mark(data.language);
                window.location.reload();
            }).catch(function(err){
                // revert on error
                mark(current);
                alert('Unable to save language selection.');
            });
        });
    });
})();
</script>

{% endblock %}