{#
/**
 * Copyright © 2003-2024 The Galette Team
 *
 * This file is part of Galette (https://galette.eu).
 *
 * Galette is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Galette is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Galette. If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends 'page.html.twig' %}

{% block content %}
    <noscript>
        <div class="ui basic fitted center aligned segment">
            <div class="ui compact message">{{ _T("This feature requires javascript.") }}</div>
        </div>
    </noscript>
    <form action="{{ url_for('storeListFields', {'table': table}) }}" method="post" id="config_fields_form" class="ui form">
        <div class="ui basic fitted segment loader_selector">
            <table id="listed_fields_table" class="listing ui celled striped table">
                <thead>
                    <tr>
                        <th class="id_row">#</th>
                        <th>{{ _T("Field name") }}</th>
                        <th>{{ _T("Permissions") }}</th>
                        <th>{{ _T("Actions") }}</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td data-scope="row"></td>
                        <td class="left" data-col-label="{{ _T("Available fields") }}" colspan="2">
                            <div id="remaining_fields_dropdown" class="ui fluid search clearable selection dropdown">
                                <i class="dropdown icon"></i>
                                <div class="default text">{{ _T("Available fields") }}</div>
                                <div id="remaining_fields" class="menu sortable-items">
    {% for col, field in remaining_fields %}
        {% set fid = field.field_id %}
        {% set permission = permissions[field.visible] %}
                                    <div class="item" data-fid="{{ fid }}" data-label="{{ field.label }}" data-permission="{{ permission }}">
                                        <input type="hidden" name="rfields[]" value="{{ fid }}"/>
                                        <span class="text">{{ field.label }}</span>
                                        <span class="description">({{ permission }})</span>
                                    </div>
    {% endfor %}
                                </div>
                        </td>
                        <td class="collapsing actions_row">
                            <input type="hidden" name="new" value="1" />
                            <a href="#" id="addfield" class="ui labeled icon button">
                                <i class="plus green icon" aria-hidden="true"></i>
                                {{ _T("Add") }}
                            </a>
                        </td>
                    </tr>
                </tfoot>
                <tbody id="listed_fields" class="sortable-items">
    {% for col, field in listed_fields %}
        {% set fid = field.field_id %}
        {% set permission = permissions[field.visible] %}
                    <tr data-fid="{{ fid }}" data-label="{{ field.label }}" data-permission="{{ permission }}">
                        <td data-scope="row" class="collapsing">
                            <i class="arrows alternate icon" aria-hidden="true"></i>
                        </td>
                        <td class="left" data-col-label="{{ _T("Field name") }}">
                            <input type="hidden" name="fields[]" value="{{ fid }}"/>
                            {{ field.label }}
                        </td>
                        <td class="left" data-col-label="{{ _T("Permissions") }}">
                            {{ permission }}
                        </td>
                        <td class="center actions_row">
                            <a href="#" class="delete">
                                <i class="ui trash red icon tooltip" aria-hidden="true"></i>
                                <span class="ui special popup">{{ _T("Delete '%s' field")|replace({'%s': field.label}) }}</span>
                            </a>
                        </td>
                    </tr>
    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="ui basic center aligned segment">
            <button type="submit" class="ui labeled icon primary button action">
                <i class="save icon" aria-hidden="true"></i> {{ _T("Save") }}
            </button>
        </div>
        {% include "components/forms/csrf.html.twig" %}
    </form>
{% endblock %}

{% block javascripts %}
    <script type="module">
        function _initSortable() {
            var _listed = document.getElementById('listed_fields');

            new Sortable(_listed, {
                group: 'lists',
                animation: 150,
                ghostClass: 'yellow',
                filter: '.delete',
                onUpdate: function (evt) {
                    var _item = evt.item;
                    _item.classList.add('yellow');
                },
                onFilter: function (evt) {
                    var _item = evt.item;
                    var _table = document.getElementById('listed_fields_table');
                    var _remaining_fields = document.getElementById('remaining_fields');
                    var _field_id = _item.dataset.fid;
                    var _field_label = _item.dataset.label;
                    var _field_permission = _item.dataset.permission;
                    var _dropdown_item = '<div class="item" data-fid="' + _field_id + '" data-label="' + _field_label + '" data-permission="' + _field_permission + '">';
                        _dropdown_item +='<input type="hidden" name="rfields[]" value="' + _field_id + '"/>';
                        _dropdown_item +='<span class="text">' + _field_label + '</span>';
                        _dropdown_item +='<span class="description">(' + _field_permission + ')</span>';
                        _dropdown_item +='</div>';
                    if (_item.parentNode.children.length > 1) {
                        _item.parentNode.removeChild(_item);
                        _table.classList.add('red');
                        _remaining_fields.innerHTML += _dropdown_item;
                    } else {
                        $('.ui.toast').toast('close');
                        $('body').toast({
                            displayTime: 'auto',
                            minDisplayTime: 5000,
                            wordsPerMinute: 80,
                            showProgress: 'bottom',
                            closeIcon: true,
                            position: 'top attached',
                            message: '{{ _T("Deleting the last field is not possible. There must be at least one field in the list.")|e('js') }}',
                            showIcon: 'info',
                            class: 'info'
                        });
                    }
                }
            });
        }

        function _handleAddToList(evt) {
            evt.preventDefault();

            var _listed_fields = document.getElementById('listed_fields');
            var _remaining_fields = document.getElementById('remaining_fields');
            var _selected_field = _remaining_fields.getElementsByClassName('selected');

            if (_selected_field.length > 0) {
                for (let i = 0; i < _selected_field.length; i++) {
                    var _field_id = _selected_field[i].dataset.fid;
                    var _field_label = _selected_field[i].dataset.label;
                    var _field_permission = _selected_field[i].dataset.permission;
                    var _table_item = '<tr class="yellow" data-fid="' + _field_id + '" data-label="' + _field_label + '" data-permission="' + _field_permission + '">';
                        _table_item +='<td data-scope="row" class="collapsing"><i class="arrows alternate icon" aria-hidden="true"></i></td>';
                        _table_item +='<td class="left" data-col-label="{{ _T("Field name") }}">';
                        _table_item +='<input type="hidden" name="fields[]" value="' + _field_id + '"/>' + _field_label;
                        _table_item +='</td>';
                        _table_item +='<td class="left" data-col-label="{{ _T("Permissions") }}">' + _field_permission + '</td>';
                        _table_item +='<td class="center actions_row"><a href="#" class="delete">';
                        _table_item +='<i class="ui trash red icon tooltip" aria-hidden="true"></i>';
                        _table_item +='<span class="ui special popup">{{ _T("Delete '%s' field")|replace({"%s": ' + _field_label + '})|e('js') }}</span>';
                        _table_item +='</a></td>';
                        _table_item +='</tr>';

                    _selected_field[i].remove();
                }

                $('#remaining_fields_dropdown').dropdown('clear');
                _listed_fields.innerHTML += _table_item;
            }
        }

        function _addToList() {
            var _add = document.getElementById('addfield');
            _add.addEventListener('click', _handleAddToList, false);
        }

        $(function() {
            _initSortable();
            _addToList();
        });
    </script>
{% endblock %}
