{% include 'header.html' %}
{% if error %}
<div class="error">{{ _(error) }}</div>
{% endif %}
{% if request.args.get('error') %}
<div class="error">{{ _(request.args.get('error')) }}</div>
{% endif %}
{% if message %}
<div class="message">{{ _(message) }}</div>
{% endif %}
<h1 class="centered">{{ _('settings') }}</h1>
<form method="post" action="/admin/settings" enctype="multipart/form-data">
<h2>Logo</h2>
<img src="{{ settings['logo'] }}" style="max-width: 400px" id="logo">
<h3>Update logo</h3><input type="file" class="file_input" name="logo"><br><br>
<h2>Homepage text (HTML)</h2>
<div class="bloginfo">
<div style="display: flex; flex-direction: row; gap: 5px; align-items: center;">
{% for text in hometext %}
{% if text.language == "en" %}
<a class="small btn empty active" href="#" id="{{ text.language }}" data-action="{{ text.language }}">{{ text.language }}</a>
{% endif %}
{% endfor %}
{% for text in hometext %}
{% if text.language != "en" %}
<a class="small btn empty" href="#" id="{{ text.language }}" data-action="{{ text.language }}">{{ text.language }}</a>
{% endif %}
{% endfor %}
<a class="small btn empty" href="#" id="new_lang">+</a>
</div>
<span id="areas">
{% for text in hometext %}
{% if text.language == "en" %}
<textarea style="width: 100%;" id="en" class="post_content" name="hometext_en" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">{{ text.content }}</textarea>
{% endif %}
{% endfor %}

{% for text in hometext %}
{% if text.language != "en" %}
<textarea id="{{ text.language }}" class="post_content" style="width: 100%; display: none;" name="hometext_{{ text.language }}" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">{{ text.content }}</textarea>
{% endif %}
{% endfor %}
</span>
<input type="submit" class="btn purple" value="Save">
</form>

<script>

function refresh_listeners() {
    document.querySelectorAll('[data-action]').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const action = this.getAttribute('data-action');
            document.querySelectorAll('textarea:not(#' + action + ')').forEach(area => {
                area.style.display = "none";
            });

            document.querySelector('textarea#' + action).style.display = "block";

            document.querySelectorAll('[data-action]').forEach(btn2 => {
                btn2.classList.remove("active");
            });

            btn.classList.add("active");       
            
        });
    });
}

function add_key(key) {
    document.getElementById("new_lang").innerHTML = key;
    document.getElementById("new_lang").setAttribute("data-action", key);
    document.getElementById("new_lang").removeEventListener("click", new_lang_click);
    document.getElementById("new_lang").id = key;
    document.getElementById("areas").innerHTML += '<textarea id="' + key + '" class="post_content" style="width: 100%; display: none;" name="hometext_' + key + '" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false"></textarea>';
    refresh_listeners();
}

const new_lang_click = function(e) {    
    e.preventDefault();
    this.innerHTML = '<input id="new_lang_key" placeholder="Key, ex. en, pl, es" type="text">';
    document.getElementById("new_lang_key").focus();
    document.getElementById("new_lang_key").addEventListener("focusout", function() {
        var new_key = this.value;
        add_key(new_key);
    });

    document.getElementById("new_lang_key").addEventListener("keydown", function(e) {
        if (e.key == "Enter") {
            var new_key = this.value;
            add_key(new_key);
        }
    });
}

document.getElementById("new_lang").addEventListener("click", new_lang_click);

refresh_listeners();

</script>

{% include 'footer.html' %}