{% comment %}
Renders each selected item in the TomSelect input.
{% endcomment %}
{% load i18n %}
item: function(data, escape) {
    {% if 'data_custom_rendering' in widget.attrs.keys and widget.attrs.data_custom_rendering %}
        return new Function('data', 'escape', 'return `' + {{ widget.attrs.data_template_item|safe }} + '`')(data, escape);
    {% else %}
        let item = ''
        item += '<div role="option">' + data.{{ widget.label_field }};

        {% if "show_detail" in widget.keys and widget.show_detail %}
            if (data.detail_url) {
                item += `
                <a href="${escape(data.detail_url)}"
                   class="update"
                   title="{% translate 'Detail' %}"
                   tabindex="-1"
                   aria-label="{% translate 'View Detail' %}"
                   onclick="event.stopPropagation(); return true;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-info" role="img" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
                </a>`;
            }
        {% endif %}

        {% if "show_delete" in widget.keys and widget.show_delete %}
            if (data.delete_url) {
                item += `
                <a href="${escape(data.delete_url)}"
                   class="update"
                   title="{% translate 'Delete' %}"
                   tabindex="-1"
                   aria-label="{% translate 'Delete item' %}"
                   onclick="event.stopPropagation(); return true;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-danger" role="img" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                </a>`;
            }
        {% endif %}

        {% if "show_update" in widget.keys and widget.show_update %}
            if (data.update_url) {
                item += `
                <a href="${escape(data.update_url)}"
                   class="update"
                   title="{% translate 'Update' %}"
                   target="_blank"
                   tabindex="-1"
                   aria-label="{% translate 'Update item' %}"
                   onclick="event.stopPropagation(); return true;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-success" role="img" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
                </a>`;
            }
        {% endif %}

        item += '</div>';
        return item;
    {% endif %}
},
