{% comment %}
Base template for list editor based on formsets (tracklist_editor, playlist_editor).

Context:
- tag_id: id of parent component
- tag: vue component tag (a-playlist-editor, etc.)
- related_field: field name that target object
- object: related object
- formset: formset used to render the list editor
- formset_data: formset data
{% endcomment %}

{% load aircox aircox_admin static i18n %}

{% with formset.form.base_fields as fields %}
{% block outer %}
<div id="{{ tag_id }}">
    {{ formset.non_form_errors }}
    <!-- formset.management_form -->

    <{{ tag }}
            {% block tag-attrs %}
            :form-data="{{ formset_data|json }}"
            :labels="window.aircox.labels"
            :init-data="{% formset_inline_data formset=formset %}"
            :columns="[{% for n, f in fields.items %}{% if not f.widget.is_hidden %}'{{ n }}',{% endif %}{% endfor %} ]"
            settings-url="{% url "api:user-settings" %}"
            data-prefix="{{ formset.prefix }}-"
            {% endblock %}>
    {% block inner %}
        <template #rows-header-head>
            {% block rows-header-head %}
            <th style="max-width:2em" title="{{ fields.position.help_text }}"
                    aria-description="{{ fields.position.help_text }}">
                <span class="icon">
                    <i class="fa fa-arrow-down-1-9"></i>
                </span>
            </th>
            {% endblock %}
        </template>
        {% for name, field in fields.items %}
        {% if not field.widget.is_hidden and not field.is_readonly %}
        <template v-slot:control-{{ name }}="{item,cell,value,attr,emit,inputName}">
            {% block row-control %}
            {% include "./v_form_field.html" with value="item.data."|add:name name="inputName" %}
            {% endblock %}
        </template>
        {% endif %}
        {% endfor %}
    {% endblock %}
    </{{ tag }}>
</div>
{% endblock %}
{% endwith %}
