{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2024 Teclib' and contributors.
 # @copyright 2003-2014 by the INDEPNET Development Team.
 # @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 string                                        controller_url #}
{# @var \Glpi\Form\Desination\AbstractFormDestination 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>
        {{ __("Items to create") }}
    </h2>

    {% if destinations|length == 0 %}
        <p class="empty-subtitle text-muted">
            {{ __("No items will be created for this form.") }}
        </p>
    {% else %}
        <div class="accordion mt-4">
            {% for destination in destinations %}
                {% set concrete_destination = destination.getConcreteDestinationItem() %}
                <div
                    id="glpi-destinations-accordion"
                    class="accordion-item"
                >
                    <h3 class="accordion-header">
                        <button
                            class="accordion-button {{ active_destination == destination.getID() ? '' : 'collapsed' }}"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#glpi-destinations-accordion-collapse-{{ loop.index }}"
                            aria-expanded="{{ active_destination == destination.getID() ? 'true' : 'false' }}"
                        >
                            <i class="{{ concrete_destination.getTargetItemtype()|itemtype_icon }} me-2"></i>
                            <input
                                aria-label="{{ __("Form destination name") }}"
                                type="text"
                                name="name"
                                form="form-destination-{{ destination.getID() }}"
                                value="{{ destination.getName() }}"
                                class="form-control form-control-flush"
                                style="font-weight: inherit;"
                                data-bs-toggle="collapse"
                                data-bs-target=""
                                data-glpi-form-destination-dynamic-input
                            />
                        </button>
                    </h3>
                    <div
                        id="glpi-destinations-accordion-collapse-{{ loop.index }}"
                        class="accordion-collapse collapse {{ active_destination == destination.getID() ? 'show' : '' }}"
                        data-bs-parent="#glpi-destinations-accordion"
                    >
                        <div class="accordion-body pt-0">
                            <form id="form-destination-{{ destination.getID() }}" method="POST" action="{{ controller_url }}">
                                <div>
                                    {{ concrete_destination.renderConfigForm(
                                        form,
                                        destination.getConfig()
                                    )|raw }}
                                </div>

                                {# Submit button to delete the destination #}
                                {% if can_update %}
                                    <div class="d-flex flex-row-reverse mt-3">
                                        <button class="btn btn-primary ms-2" name="update" type="submit">
                                            <i class="ti ti-device-floppy me-2"></i>
                                            {{ __("Update item") }}
                                        </button>
                                        <button class="btn btn-ghost-danger" name="purge" type="submit">
                                            <i class="ti ti-trash me-2"></i>
                                            {{ __("Delete") }}
                                        </button>
                                    </div>
                                {% endif %}

                                {# Hidden values #}
                                <input type="hidden" name="id" value="{{ destination.getID() }}"/>
                                <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}"/>
                            </form>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <script>
            $(document).ready(function() {
                // Handle the dynamic input for the destination name
                $('[data-glpi-form-destination-dynamic-input]').on('input', function() {
                    $(this).css("width", getRealInputWidth(this, "1.2rem"));
                }).trigger('input');
            });
        </script>
    {% endif %}

    <div class="d-flex mt-4">
        {% for type, label in available_destinations_types %}
            <form method="POST" action="{{ controller_url }}">
                {# Submit button to create a new destination #}
                <button class="btn btn-ligh-secondary ms-2" name="add" type="submit">
                    <i class="ti ti-plus me-2"></i> {{ __("Add %s"|format(label|lower)) }}
                </button>

                {# Hidden values #}
                <input type="hidden" name="itemtype" value="{{ type }}"/>
                <input type="hidden" name="{{ form.getForeignKeyField() }}" value="{{ form.getID() }}"/>
                <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}"/>
            </form>
        {% endfor %}
    </div>
</div>

<script>
    import("{{ js_path('js/modules/Forms/DestinationAutoConfigController.js') }}").then((m) => {
        new m.GlpiFormDestinationAutoConfigController();
    });
    import("{{ js_path('js/modules/DynamicDropdownController.js') }}").then((m) => {
        new m.DynamicDropdownController();
    });
</script>


<style>
    /* Should be handled by tabler but it doesn't seem to be active */
    .accordion-header {
        color: var(--tblr-dark);
    }
    .accordion-item {
        color: var(--tblr-dark);
    }
</style>