{% comment %}Inline block to edit playlists{% endcomment %}
{% load aircox aircox_admin static i18n %}

{% with inline_admin_formset as admin_formset %}
{% with admin_formset.formset as formset %}

<div id="inline-tracks" class="box mb-5">
    {{ admin_formset.non_form_errors }}

    <a-playlist-editor
            :labels="{% track_inline_labels %}"
            :init-data="{% track_inline_data formset=formset %}"
            settings-url="{% url "api:user-settings" %}"
            data-prefix="{{ formset.prefix }}-">
        <template #title>
            <h5 class="title is-4">{% trans "Playlist" %}</h5>
        </template>
        <template v-slot:top="{items}">
            <input type="hidden" name="{{ formset.prefix }}-TOTAL_FORMS"
                :value="items.length || 0"/>
            <input type="hidden" name="{{ formset.prefix }}-INITIAL_FORMS"
                value="{{ formset.initial_form_count }}"/>
            <input type="hidden" name="{{ formset.prefix }}-MIN_NUM_FORMS"
                value="{{ formset.min_num }}"/>
            <input type="hidden" name="{{ formset.prefix }}-MAX_NUM_FORMS"
                value="{{ formset.max_num }}"/>
        </template>
        <template #rows-header-head>
            <th style="max-width:2em" title="{% trans "Track Position" %}"
                    aria-description="{% trans "Track Position" %}">
                <span class="icon">
                    <i class="fa fa-arrow-down-1-9"></i>
                </span>
            </th>
        </template>
        <template v-slot:row-head="{item,row}">
            <td>
                [[ row+1 ]]
                <input type="hidden"
                    :name="'{{ formset.prefix }}-' + row + '-position'"
                    :value="row"/>
                <input t-if="item.data.id" type="hidden"
                    :name="'{{ formset.prefix }}-' + row + '-id'"
                    :value="item.data.id || item.id"/>

                {% for field in admin_formset.fields %}
                {% if field.name != 'position' and field.widget.is_hidden %}
                <input type="hidden"
                    :name="'{{ formset.prefix }}-' + row + '-{{ field.name }}'"
                    v-model="item.data[attr]"/>
                {% endif %}
                {% endfor %}
            </td>
        </template>
        {% for field in admin_formset.fields %}
        {% if not field.widget.is_hidden and not field.is_readonly %}
        <template v-slot:row-{{ field.name }}="{item,cell,value,attr,emit}">
            <div class="field">
                {% if field.name in 'artist,title,album' %}
                <a-autocomplete
                        :input-class="['input', item.error(attr) ? 'is-danger' : 'half-field']"
                        url="{% url 'api:track-autocomplete' %}?{{ field.name }}=${query}&field={{ field.name }}"
                {% else %}
                <div class="control">
                    <input type="{{ widget.type }}"
                        :class="['input', item.error(attr) ? 'is-danger' : 'half-field']"
                {% endif %}
                        :name="'{{ formset.prefix }}-' + cell.row + '-{{ field.name }}'"
                        v-model="item.data[attr]"
                        title="{{ field.help }}"
                        @change="emit('change', col)"/>
                {% if field.name not in 'artist,title,album' %}
                </div>
                {% endif %}
                <p v-for="error in item.error(attr)" class="help is-danger">
                    [[ error ]] !
                </p>
            </div>
        </template>
        {% endif %}
        {% endfor %}
    </a-playlist-editor>
</div>
{% endwith %}
{% endwith %}
