{% load i18n %}
{% load tree_filters %}
{% if node.depth != 1 %}
    <tr data-drop-id="{{ node.id }}"
        data-drop-position="left"
        class="drop drop-between h-3 -m-3 hidden level-{{ node.depth }}">
        <td colspan="9">
            <div>
                {# djlint:off H020 #}
                <span></span>
                {# djlint:on #}
            </div>
        </td>
    </tr>
{% endif %}
<tr data-drop-id="{{ node.id }}"
    data-drop-position="last-child"
    class="drop drop-on hover:bg-gray-100{% if node.depth > 1 %} level-{{ node.depth }}{% endif %}">
    <td class="pl-4">
        <input type="checkbox"
               name="selected_ids[]"
               value="{{ node.id }}"
               class="bulk-select-item" />
    </td>
    <td class="hierarchy single_icon">
        <span data-drag-id="{{ node.id }}"
              data-node-descendants="{{ node|get_descendant_ids }}"
              class="drag text-gray-800 block py-1.5 px-2 cursor-move"
              draggable="true">
            <i icon-name="move" class="text-gray-800"></i>
        </span>
    </td>
    <td>
        <a href="{% url 'edit_languagetreenode' pk=node.pk region_slug=request.region.slug %}"
           class="block py-1.5 px-2 text-gray-800">
            {{ node.translated_name }}
        </a>
    </td>
    <td>
        {{ node.slug }}
    </td>
    <td>
        {{ node.language.bcp47_tag }}
    </td>
    <td>
        {{ node.language.get_text_direction_display }}
    </td>
    <td>
        <span class="fp fp-{{ node.language.primary_country_code }} fp-rounded "
              title="{{ node.language.get_primary_country_code_display }}"></span>
        <span class="fp fp-{{ node.language.secondary_country_code }} fp-rounded "
              title="{{ node.language.get_secondary_country_code_display }}"></span>
    </td>
    <td>
        <span class="fp fp-{{ node.language.language_color }} w-5 h-5 rounded-full"
              title="{{ node.language.get_language_color_display }}"
              style="background-color: {{ node.language.language_color }}"></span>
    </td>
    <td>
        <div class="flex justify-center">
            {% if node.active %}
                <i icon-name="check" class="text-green-500"></i>
            {% else %}
                <i icon-name="x" class="text-red-500"></i>
            {% endif %}
        </div>
    </td>
    <td>
        <div class="flex justify-center">
            {% if node.visible %}
                <i icon-name="check" class="text-green-500"></i>
            {% else %}
                <i icon-name="x" class="text-red-500"></i>
            {% endif %}
        </div>
    </td>
    <td class="pl-2 pr-4 py-1.5 text-right">
        {% if perms.cms.delete_languagetreenode %}
            <button title="{% if not node.is_leaf %}{% translate "You cannot delete a node which has children." %}{% else %}{% translate "Delete entire language node" %}{% endif %}"
                    class="btn-icon confirmation-button"
                    {% if not node.is_leaf %}disabled{% endif %}
                    data-confirmation-title="{{ delete_dialog_title }}"
                    data-confirmation-text="{{ delete_dialog_text }}"
                    data-confirmation-subject="{{ node.translated_name }}"
                    data-action="{% url 'delete_languagetreenode' region_slug=request.region.slug pk=node.pk %}">
                <i icon-name="trash-2"
                   class="{% if not node.is_leaf %}text-gray-400{% else %}text-gray-800{% endif %}"></i>
            </button>
        {% endif %}
    </td>
</tr>
