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

<div class="manage-reviewing-questions">
    <div class="toolbar space-after hide-if-locked">
        <button class="i-button arrow icon-plus highlight" 
                data-toggle="dropdown">
            {%- trans %}Add new question{% endtrans -%}
        </button>
        <ul class="i-dropdown">
            {% for name, field_type in field_types.items() -%}
                <li>
                    <a class="js-action-button"
                       data-href="{{ url_for(endpoints.create, event, field_type=name, **common_url_args) }}"
                       data-title="{% trans %}Add custom reviewing question{% endtrans %}"
                       data-ajax-dialog>
                        {{ field_type.friendly_name }}
                    </a>
                </li>
            {%- endfor %}
        </ul>
    </div>

    {% if reviewing_questions -%}
        {% call(reviewing_question) sortable_list(reviewing_questions, id="reviewing-questions-list", classes='tiles disable-if-locked') %}
            <a class="icon-edit js-action-button hide-if-locked"
               data-href="{{ url_for(endpoints.edit, reviewing_question) }}"
               data-title
               title="{% trans %}Edit the reviewing question{% endtrans %}"
               data-ajax-dialog>
            </a>
            <a class="js-delete-reviewing-question icon-remove hide-if-locked"
               data-method="DELETE"
               data-title="{% trans %}Confirm deletion{% endtrans %}"
               title="{% trans %}Delete the reviewing question{% endtrans %}"
               data-href="{{ url_for(endpoints.delete, reviewing_question) }}"
               data-confirm="{% trans %}Are you sure you want to delete the reviewing question?{% endtrans %}"
               data-ajax-dialog>
            </a>
        {% endcall %}
    {%- else -%}
        {%- call message_box('info') %}
            {%- trans %}There are no reviewing questions yet.{% endtrans %}
        {%- endcall %}
    {%- endif %}

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

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

        var $container = $('.manage-reviewing-questions');

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

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

        $container.on('indico:confirmed', '.js-delete-reviewing-question', 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() {
                    $container.trigger('ajaxDialog:reload');
                }
            });
        });

        var $questionsList = $('#reviewing-questions-list');
        setupSortableList($questionsList);
        $questionsList.on('sortupdate', function(evt, ui) {
            var ids = $questionsList.find('li').map(function(index, item) {
                return $(item).data('item-id');
            }).get();

            $.ajax({
                url: {{ url_for(endpoints.sort, event, **common_url_args)|tojson }},
                method: 'POST',
                data: {
                    field_ids: ids
                },
                error: handleAjaxError,
                success: function() {
                    $container.trigger('ajaxDialog:reload');
                }
            });
        });
    })();
</script>
