{% extends "_base.html" %}
{% load i18n %}
{% load base_filters %}
{% load static %}
{% load widget_tweaks %}
{% block content %}
    <form method="post" data-unsaved-warning>
        {% csrf_token %}
        <div class="flex flex-wrap mb-4 gap-4 justify-between">
            <h1 class="heading overflow-hidden text-ellipsis">
                {% if form.instance.id %}
                    {% with form.instance.translated_name as translated_language_name %}
                        {% blocktranslate trimmed %}
                            Edit language tree node "{{ translated_language_name }}"
                        {% endblocktranslate %}
                    {% endwith %}
                {% else %}
                    {% translate "Add language to this region" %}
                {% endif %}
            </h1>
            {% if perms.cms.change_languagetreenode %}
                <div class="flex flex-wrap gap-2">
                    <a href="{% url 'languagetreenodes' region_slug=request.region.slug %}"
                       class="btn btn-ghost">{% translate "Cancel" %}</a>
                    {% if form.instance.id %}
                        <button class="btn ml-auto mr-0">
                            {% translate "Update" %}
                        </button>
                    {% else %}
                        <button class="btn ml-auto mr-0">
                            {% translate "Create" %}
                        </button>
                        <button name="submit_add_new" class="btn ml-auto mr-0">
                            {% translate "Create and add more" %}
                        </button>
                    {% endif %}
                </div>
            {% endif %}
        </div>
        <div class="mb-4 rounded border border-blue-500 shadow-2xl bg-white">
            <div class="p-4 rounded bg-water-500">
                <h3 class="heading font-bold text-black">
                    {% if form.instance.id %}
                        <span class="fp fp-rounded fp-{{ form.instance.language.primary_country_code }} text-[24px] align-bottom"></span>
                        {% if form.instance.language.secondary_country_code and form.instance.language.language_color %}
                            <span class="fp fp-rounded fp-{{ form.instance.language.secondary_country_code }} text-[24px] align-bottom"></span>
                        {% endif %}
                        <span class="fp rounded-full fp-{{ form.instance.language.language_color }} w-6 h-6 align-top"
                              style="background-color: {{ form.instance.language.language_color }}"></span>
                    {% else %}
                        <i icon-name="flag"></i>
                    {% endif %}
                    <span class="ml-2">{% translate "Language tree node" %}</span>
                    {% if form.instance.id %}
                        "{{ form.instance.translated_name }}"
                    {% endif %}
                </h3>
            </div>
            <div class="px-4 pb-4 divide-y divide-gray-200 space-y-4">
                {% if not form.instance.id %}
                    <div>
                        <label for="{{ form.language.id_for_label }}">
                            {{ form.language.label }}
                        </label>
                        {% render_field form.language|add_error_class:"border-red-500" %}
                    </div>
                {% endif %}
                <div>
                    <label for="{{ form.parent.id_for_label }}">
                        {{ form.parent.label }}
                    </label>
                    {% render_field form|get_private_member:"ref_node_id" %}
                    {% render_field form|get_private_member:"position" %}
                    {% render_field form.parent|add_error_class:"border-red-500" %}
                </div>
                <div>
                    {% render_field form.visible|add_error_class:"border-red-500" %}
                    <label for="{{ form.visible.id_for_label }}">
                        {{ form.visible.label }}
                    </label>
                    <div id="visible-warning"
                         class="hidden bg-yellow-100 border-l-4 border-yellow-500 text-orange-700 px-4 py-3 mb-5">
                        <p>
                            {% translate "An inactive language tree node cannot be visible." %}
                        </p>
                    </div>
                    <div class="help-text">
                        {{ form.visible.help_text }}
                    </div>
                </div>
                <div>
                    {% render_field form.active|add_error_class:"border-red-500" %}
                    <label for="{{ form.active.id_for_label }}">
                        {{ form.active.label }}
                    </label>
                    <div class="help-text">
                        {{ form.active.help_text }}
                    </div>
                </div>
                <div>
                    {% render_field form.machine_translation_enabled|add_error_class:"border-red-500" %}
                    <label for="{{ form.machine_translation_enabled.id_for_label }}">
                        {{ form.machine_translation_enabled.label }}
                    </label>
                    <div class="help-text">
                        {{ form.machine_translation_enabled.help_text }}
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock content %}