{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2026 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/>.
 #
 # ---------------------------------------------------------------------
 #}

{# @var string                                         icon #}
{# @var \Glpi\Form\Desination\FormDestinationInterface default_destination_object #}
{# @var \Glpi\Form\Form                                form #}
{# @var \Glpi\Form\Desination\FormDestination          destinations #}
{# @var int|null                                       active_destination #}
{# @var boolean                                        can_update #}

<div class="py-2 px-3">
    <h2 class="d-flex">
        <i class="{{ icon }} me-2"></i>
        {{ _n("Destination", "Destinations", get_plural_number()) }}
    </h2>

    {% for warning in warnings %}
        <div class="alert alert-warning d-flex align-items-center mb-3" role="alert">
            <i class="ti ti-alert-triangle me-2"></i>
            {{ warning }}
        </div>
    {% endfor %}

    <div class="d-flex">
        {# Add Form #}
        {% for type, label in available_destinations_types %}
            <form
                id="add_destination_{{ type }}"
                method="POST"
                action="{{ path('/Form/%d/Destination/Add'|format(form.getID())) }}"
            >
                <input type="hidden" name="name" value="{{ label }}"/>
                <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}"/>
                <input type="hidden" name="add" value=""/>
            </form>
        {% endfor %}

        <div class="btn-group me-2">
            {% for type, label in available_destinations_types %}
                <button
                    form="add_destination_{{ type }}"
                    class="btn"
                    name="itemtype"
                    type="submit"
                    value="{{ type }}"
                >
                    <i class="ti ti-plus me-1"></i> {{ __("Add %s")|format(label) }}
                </button>
            {% endfor %}
        </div>
    </div>

    {% if destinations|length == 0 %}
        <p class="empty-subtitle text-muted mt-3 ms-1">
            {{ __("No items will be created for this form.") }}
        </p>
    {% else %}
        <section class="accordion mt-4" id="glpi-destinations-accordion" aria-label="{{ __("Form destinations") }}">
            {% for destination in destinations %}
                {% set is_expanded = active_destination == destination.getID() %}
                {% set concrete_destination = destination.getConcreteDestinationItem() %}
                {% set rand = random() %}
                <section
                    class="accordion-item destination-{{ destination.getID() }}"
                    aria-label="{{ destination.getName() }}"
                >
                    <div class="accordion-header {{ not concrete_destination ? 'bg-danger' : '' }}">
                        <div
                            class="accordion-button {{ is_expanded ? '' : 'collapsed' }}"
                            role="button"
                            tabindex="0"
                            data-bs-toggle="collapse"
                            data-bs-target="#glpi-destinations-accordion-collapse-{{ rand }}-{{ loop.index }}"
                            aria-expanded="{{ is_expanded ? 'true' : 'false' }}"
                            data-glpi-destination-click-on-space {# Simulate how space would behave in a button instead of a div #}
                        >
                            <i class="{{ concrete_destination ? concrete_destination.getIcon() : 'ti ti-unlink text-white' }}"></i>
                            <span
                                class="m-0 lh-base fw-normal glpi-form-destination-name {{ not concrete_destination ? 'text-white' : '' }}"
                            >
                                {{ destination.getName() }}
                            </span>
                            <div data-glpi-editor-destination-badges-container>
                                {% set selected_strategy = destination.getConfiguredCreationStrategy() %}
                                {% for strategy in enum_cases('Glpi\\Form\\Condition\\CreationStrategy') %}
                                    {% set is_visible = selected_strategy == strategy %}
                                    {% set display_class = is_visible ? 'd-flex' : 'd-none' %}
                                    <span
                                        class="{{ display_class }} badge bg-secondary-lt d-flex align-items-center ms-2"
                                        data-glpi-editor-condition-badge="{{ strategy.value }}"
                                    >
                                        <i class="{{ strategy.getIcon() }} me-1 {{ not concrete_destination ? 'text-white' : '' }}"></i>
                                        <span class="{{ not concrete_destination ? 'text-white' : '' }}">{{ strategy.getLabel() }}</span>
                                    </span>
                                {% endfor %}
                            </div>
                            <input
                                aria-label="{{ __("Form destination name") }}"
                                type="text"
                                name="name"
                                form="form-destination-{{ destination.getID() }}"
                                value="{{ destination.getName() }}"
                                class="form-control me-4 fw-normal glpi-form-destination-name"
                                style="font-weight: inherit;"
                                {# Fake collaspe needed to avoid triggering the parent accordion when clicking inside #}
                                data-bs-toggle="collapse"
                                data-bs-target=""
                            />
                        </div>
                    </div>
                    <div
                        id="glpi-destinations-accordion-collapse-{{ rand }}-{{ loop.index }}"
                        class="accordion-collapse collapse {{ is_expanded ? 'show' : '' }}"
                        data-bs-parent="#glpi-destinations-accordion"
                        data-form="{{ form.getID() }}"
                        data-form-destination="{{ destination.getID() }}"
                    >
                        <div class="accordion-body p-0">
                            {% if is_expanded %}
                                {{ include('pages/admin/form/form_destination_form.html.twig', {
                                    destination,
                                    form,
                                    can_update,
                                    concrete_destination,
                                }) }}
                            {% endif %}
                        </div>
                    </div>
                </section>
            {% endfor %}
        </section>
    {% endif %}
</div>

<script>
    import("/js/modules/Forms/DestinationAccordionController.js").then(function (module) {
        const accordionController = new module.GlpiFormDestinationAccordionController();

        {% if active_destination %}
            accordionController.triggerWatchers();
        {% endif %}
    })
</script>
