{% load static %}

{% load i18n %}
{% load dj_translation %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}


<div class="djt"
     data-toggle="dj-translation"
     data-djt-name="{{ name }}"
     data-djt-languages='{% languages_data %}'>

    <input type="hidden" name="{{ name }}" id="id_{{ name }}"
           value='{{ value|value_to_json }}' {% include "django/forms/widgets/attrs.html" %}>

    <div class="djt-container" data-djt-group="input-tab" data-djt-name="{{ name }}">
        <div class="djt-buttons" data-djt-group="input">
            {% for language in languages %}

                <button class="djt-button"
                        type="button"
                        data-djt-toggle="input-tab"
                        data-djt-name="{{ name }}"
                        data-djt-key="{{ language.code }}"
                        data-djt-bidi="{{ language.bidi|yesno:"true,false" }}">{{ language.name_local }}</button>
            {% endfor %}

            <button type="button" class="djt-button djt-button--display-toggle">
                <span class="djt-svg-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24"
                         fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.3"
                              d="M2 9.09998V3C2 2.4 2.4 2 3 2H9.10001L2 9.09998ZM22 9.09998V3C22 2.4 21.6 2 21 2H14.9L22 9.09998ZM2 14.9V21C2 21.6 2.4 22 3 22H9.10001L2 14.9ZM14.9 22H21C21.6 22 22 21.6 22 21V14.9L14.9 22Z"
                              fill="currentColor"></path>
                        <path d="M19.2 17.8L13.4 12L19.2 6.20001L17.8 4.79999L12 10.6L6.2 4.79999L4.8 6.20001L10.6 12L4.8 17.8L6.2 19.2L12 13.4L17.8 19.2L19.2 17.8Z"
                              fill="currentColor"></path>
                    </svg>
                </span>
            </button>
        </div>


        <textarea class="djt-input djt-input--textarea"
                  data-djt-toggle="input"
                  data-djt-name="{{ name }}"
                  data-djt-richtext="{{ attrs.rich_text|yesno:"true,false" }}"
                {% if attrs.rich_text %}
                  data-djt-richtext-config='{{ attrs.ckeditor_config }}'
                {% endif %}
                  id="{{ name }}-language-input"></textarea>
    </div>
    <div class="djt-container" data-djt-group="display-tab" data-djt-name="{{ name }}">
        <div class="djt-buttons djt-buttons--end" data-djt-group="display">
            {% for language in languages %}
                <button class="djt-button"
                        type="button"
                        data-djt-toggle="display-tab"
                        data-djt-name="{{ name }}"
                        data-djt-key="{{ language.code }}"
                        data-djt-bidi="{{ language.bidi|yesno:"true,false" }}">{{ language.name_local }}</button>
            {% endfor %}
        </div>

        <div class="djt-input djt-input--display"
             id="{{ name }}-language-display"
             data-djt-toggle="display"
             data-djt-name="{{ name }}">
        </div>
    </div>
</div>