{% from 'message_box.html' import message_box %}
{% from '_sortable_list.html' import sortable_list %}

<div class="manage-contribution-fields">
    <div class="toolbar space-after hide-if-locked">
        <button class="i-button arrow icon-plus highlight" 
                data-toggle="dropdown">
            {%- trans %}Add new field{% endtrans -%}
        </button>
        <ul class="i-dropdown">
            {% for form_type in custom_field_types %}
                <li>
                    <a data-ajax-dialog class="js-action-button js-new-contribution-field"
                       data-href="{{ url_for('.create_field', event, field_type=form_type.name) }}"
                       data-title="{% trans %}Add custom field{% endtrans %}">
                        {{ form_type.friendly_name }}
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>

    {% set abstract_content_item = {'id': 'content', 'title': _("Abstracts content")} %}
    {% call(item) sortable_list([abstract_content_item], draggable=false, invisible_handle=true,
                                id='contributions-fixed-fields', classes='tiles') %}
        <a class="icon-edit js-action-button hide-if-locked" data-ajax-dialog
           data-href="{{ url_for('.manage_description_field', event) }}"
           data-title="{% trans %}Abstracts content{% endtrans %}"
           title="{% trans %}Edit abstracts content{% endtrans %}"></a>
        <a class="js-delete-contribution-field icon-remove disabled hide-if-locked"
           title="{% trans %}This field cannot be deleted{% endtrans %}"
           data-qtip-position="right"></a>
    {% endcall %}

    {% if custom_fields %}
        {% call(custom_field) sortable_list(custom_fields, id="contributions-custom-fields", classes='tiles disable-if-locked') %}
            <a class="icon-edit js-action-button js-edit-contribution-field hide-if-locked" data-ajax-dialog
               data-href="{{ url_for('.manage_field', event, custom_field) }}"
               data-title
               title="{% trans %}Edit custom field{% endtrans %}"></a>
            <a class="js-delete-contribution-field icon-remove hide-if-locked"
               data-method="POST"
               data-href="{{ url_for('.delete_field', event, custom_field) }}"
               data-confirm="{% trans %}Do you really want to delete this field? Data stored in this field will be lost.{% endtrans %}"
               data-title="{% trans %}Confirm deletion{% endtrans %}"
               title="{% trans %}Delete custom field{% endtrans %}"></a>
        {% endcall %}
    {% else %}
        {%- call message_box('info') %}
            {%- trans %}There are no custom contribution fields yet.{% endtrans %}
        {%- endcall %}
    {% endif %}

    <div class="toolbar f-j-end">
        <button class="i-button big" data-button-back>{% trans %}Close{% endtrans %}</button>
    </div>
</div>

<script>
    (function() {
        'use strict';

        // Set the customData to true indicating that whatever is using this dialog may need to be refreshed
        function dialogModified() {
            $dialog.trigger('ajaxDialog:setData', [true]);
        }

        var $dialog = $('.manage-contribution-fields');

        $dialog.find('.toolbar').dropdown();

        $dialog.on('ajaxDialog:closed', '.js-new-contribution-field, .js-edit-contribution-field', function(evt, data) {
            dialogModified();
        });

        $dialog.on('indico:confirmed', '.js-delete-contribution-field', function(evt) {
            evt.preventDefault();
            var $this = $(this);
            $.ajax({
                url: $this.data('href'),
                method: $this.data('method'),
                complete: IndicoUI.Dialogs.Util.progress(),
                error: handleAjaxError,
                success: function() {
                    $dialog.trigger('ajaxDialog:reload');
                    dialogModified();
                }
            });
        });

        $dialog.on('ajaxDialog:closed', '.js-action-button', function(evt, data) {
            if (data) {
                $dialog.trigger('ajaxDialog:reload');
            }
        });

        var $fieldList = $('#contributions-custom-fields');
        setupSortableList($fieldList);
        $fieldList.on('sortupdate', function(evt, ui) {
            var ids = $fieldList.find('li').map(function(index, item) {
                return $(item).data('item-id');
            });
            ids = $.makeArray(ids);
            $.ajax({
                url: {{ url_for('.sort_fields', event)|tojson }},
                method: 'POST',
                data: {
                    field_ids: ids
                },
                error: handleAjaxError
            });
            dialogModified();
        });
    })();
</script>
