{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2025 Teclib' and contributors.
 # @licence   https://www.gnu.org/licenses/gpl-3.0.html
 #
 # ---------------------------------------------------------------------
 #
 # LICENSE
 #
 # This file is part of GLPI.
 #
 # This program 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.
 #
 # This program 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 this program.  If not, see <https://www.gnu.org/licenses/>.
 #
 # ---------------------------------------------------------------------
 #}

{% import 'components/form/fields_macros.html.twig' as fields %}

{% set rand = random() %}

<div
    data-glpi-itildestination-field-config-display-condition="{{ CONFIG_SPECIFIC_VALUES }}"
    data-glpi-associated-items-specific-values-extra-field="{{ rand }}"
    class="form-field col-12 d-none"
>
    {% set remove_button %}
        <button type="button" class="btn btn-icon btn-outline rounded-0" data-glpi-remove-associated-item-button aria-label="{{ __('Remove item') }}">
            <i class="ti ti-x"></i>
        </button>
    {% endset %}

    <section data-glpi-associated-items-specific-values-extra-field-container>
        {% for itemtype, items_ids in specific_values_extra_field.associated_items %}
            {% for items_id in items_ids %}
                {{ fields.dropdownItemsFromItemtypes(
                    specific_values_extra_field.input_name,
                    '',
                    {
                        'init'               : true,
                        'itemtypes'          : specific_values_extra_field.itemtypes,
                        'no_label'           : true,
                        'display_emptychoice': false,
                        'itemtype_name'      : specific_values_extra_field.input_name ~ '[itemtype][]',
                        'items_id_name'      : specific_values_extra_field.input_name ~ '[items_id][]',
                        'default_itemtype'   : itemtype,
                        'default_items_id'   : items_id,
                        'width'              : '30%',
                        'add_field_class'    : 'd-flex input-group flex-nowrap',
                        'mb'                 : '',
                        'add_field_html'     : remove_button,
                        'add_field_attribs'  : {
                            'data-glpi-associated-items-specific-values-extra-field-item': ''
                        },
                        'aria_label'         : specific_values_extra_field.itemtype_aria_label,
                        'specific_tags_items_id_dropdown': {
                            'aria-label': specific_values_extra_field.items_id_aria_label,
                            'data-glpi-associated-items-items-id-dropdown': ''
                        }
                    }
                ) }}
            {% endfor %}
        {% endfor %}

        {{ fields.dropdownItemsFromItemtypes(
            specific_values_extra_field.input_name,
            '',
            {
                'init'               : true,
                'itemtypes'          : specific_values_extra_field.itemtypes,
                'no_label'           : true,
                'display_emptychoice': true,
                'emptylabel'         : specific_values_extra_field.empty_label,
                'itemtype_name'      : specific_values_extra_field.input_name ~ '[itemtype][]',
                'items_id_name'      : specific_values_extra_field.input_name ~ '[items_id][]',
                'width'              : '30%',
                'add_field_class'    : 'd-flex input-group flex-nowrap',
                'mb'                 : '',
                'add_field_html'     : remove_button,
                'add_field_attribs'  : {
                    'data-glpi-associated-items-specific-values-extra-field-item': ''
                },
                'aria_label'         : specific_values_extra_field.itemtype_aria_label,
                'specific_tags_items_id_dropdown': {
                    'aria-label': specific_values_extra_field.items_id_aria_label,
                    'data-glpi-associated-items-items-id-dropdown': ''
                }
            }
        ) }}
    </section>

    <template class="d-none" data-glpi-associated-items-specific-values-extra-field-template>
        {{ fields.dropdownItemsFromItemtypes(
            specific_values_extra_field.input_name,
            '',
            {
                'init'               : false,
                'itemtypes'          : specific_values_extra_field.itemtypes,
                'no_label'           : true,
                'display_emptychoice': true,
                'emptylabel'         : specific_values_extra_field.empty_label,
                'itemtype_name'      : specific_values_extra_field.input_name ~ '[itemtype][]',
                'items_id_name'      : specific_values_extra_field.input_name ~ '[items_id][]',
                'width'              : '30%',
                'add_field_class'    : 'd-flex input-group flex-nowrap',
                'mb'                 : '',
                'add_field_html'     : remove_button,
                'add_field_attribs'  : {
                    'data-glpi-associated-items-specific-values-extra-field-item': ''
                },
                'aria_label'         : specific_values_extra_field.itemtype_aria_label,
                'specific_tags_items_id_dropdown': {
                    'aria-label': specific_values_extra_field.items_id_aria_label,
                    'data-glpi-associated-items-items-id-dropdown': ''
                },
                'disabled'                       : true
            }
        ) }}
    </template>
</div>

<div
    class="d-none"
    data-glpi-itildestination-field-config-display-condition="{{ CONFIG_SPECIFIC_ANSWERS }}"
>
	{{ fields.dropdownArrayField(
        specific_answer_extra_field.input_name,
        '',
        specific_answer_extra_field.possible_values,
        "",
        options|merge({
            field_class: '',
            no_label: true,
            display_emptychoice: true,
            values: specific_answer_extra_field.values ?? [],
            multiple: true,
            aria_label: specific_answer_extra_field.aria_label,
            mb: ''
        })
    ) }}
</div>

<script>
    import("/js/modules/Forms/FieldDestinationAssociatedItem.js").then((m) => {
        new m.GlpiFormFieldDestinationAssociatedItem(
            $('[data-glpi-associated-items-specific-values-extra-field="{{ rand }}"]'),
            '{{ specific_values_extra_field.input_name ~ "[itemtype][]" }}',
            '{{ specific_values_extra_field.input_name ~ "[items_id][]" }}'
        );
    });
</script>