{#
 # ---------------------------------------------------------------------
 #
 # 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/>.
 #
 # ---------------------------------------------------------------------
 #}

{# @var form                   Glpi\Form #}
{# @var section                Glpi\Form\Section|null #}
{# @var section_index          int #}
{# @var question_types_manager QuestionTypesManager #}
{# @var can_update             bool #}
{# @var show_section_form      bool #}
{# @var number_of_sections     int #}

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

{# Common params for any fields #}
{% set base_field_options = {
    'is_horizontal': false,
    'full_width'   : true,
    'no_label'     : true,
} %}
{% set section_index = section_index|default(1) %}

<section
    data-glpi-form-editor-section
    data-glpi-form-editor-condition-type="{{ enum('Glpi\\Form\\Condition\\Type').SECTION.value }}"
    class="mt-4"
    aria-label="{{ __("Form section") }}"
>
    <div
        class="bg-primary p-1 rounded-top {{ show_section_form ? "" : "d-none" }}"
        style="width: fit-content; max-width: 50%;"
        data-glpi-form-editor-section-details
    >
        {# Section's name #}
        <input
            title="{{ __("Section name") }}"
            type="text"
            class="form-control content-editable-h2 mb-0"
            style="max-width: 100%;"
            name="name"
            value="{{ section is not null ? section.fields.name : '' }}"
            placeholder="{{ __("New section") }}"
            data-glpi-form-editor-section-details-name
            data-glpi-form-editor-dynamic-input
            maxlength="255"
        />
    </div>

    <div class="d-flex align-items-end">
        <section
            aria-label="{{ __("Section details") }}"
            data-glpi-form-editor-section-details
            data-glpi-form-editor-on-click="set-active"
            class="flex-grow-1 {{ show_section_form ? "" : "d-none" }}"
        >
            <div
                class="card"
                style="border-top-left-radius:0;"
            >
                <div
                    class="card-status-start bg-primary"
                    data-glpi-form-editor-active-section-status-indicator
                ></div>
                <div class="card-body">
                    {# Header #}
                    <div class="d-flex">
                        {# Section's description #}
                        <div
                            class="content-editable-tinymce me-auto flex-grow-1"
                            data-glpi-form-editor-section-description
                        >
                            {{ fields.textareaField(
                                "description",
                                section is not null ? section.fields.description : '',
                                __('Header'),
                                base_field_options|merge({
                                    'enable_richtext': true,
                                    'placeholder': __('Add a description to this section'),
                                    'aria_label': __('Section description'),
                                    'add_body_classes': ['content-editable-tinymce-editor', 'text-muted'],
                                    'editor_height': "0",
                                    'rows' : 1,
                                    'toolbar_location': 'bottom',
                                    'init': false,
                                    'init_on_demand': section is not null ? true : false,
                                    'mb': 'mb-0',
                                })
                            ) }}
                        </div>
                        <div class="d-flex align-items-start flex-grow-1">
                            {# Question count #}
                            <span
                                class="badge bg-secondary-lt"
                                data-glpi-form-editor-section-block-badge
                            >
                                {% set count_blocks = (section ? section.getBlocks()|length : 1) %}
                                {{ _n('%d element', '%d elements', count_blocks)|format(count_blocks) }}
                            </span>

                            <div class="ms-auto"></div>

                            {# Visibility dropdown #}
                            {{ include('pages/admin/form/conditional_visibility_dropdown.html.twig', {
                                'item': section,
                                'type': "Glpi\\Form\\Section",
                            }, with_context = false) }}

                            {# Collapse section #}
                            <i
                                role="button"
                                class="ti ti-selector ms-3 cursor-pointer"
                                data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                title="{{ __("Collapse section") }}"
                                data-glpi-form-editor-on-click="collapse-section"
                            ></i>

                            {# Extra actions #}
                            <div class="dropdown ms-3 cursor-pointer d-flex align-items-center">
                                <i
                                    class="ti ti-dots-vertical show"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false"
                                    role="button"
                                    title="{{ __('More actions') }}"
                                    data-glpi-form-editor-state-action
                                ></i>
                                <ul class="dropdown-menu" data-bs-popper="none">
                                    <li>
                                        <button
                                            type="button"
                                            class="dropdown-item"
                                            data-glpi-form-editor-on-click="duplicate-section"
                                        >
                                            <i class="ti ti-copy me-2"></i>
                                            <span>{{ __("Duplicate section") }}</span>
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            type="button"
                                            class="dropdown-item"
                                            data-bs-toggle="modal"
                                            data-bs-target="[data-glpi-form-editor-move-section-modal]"
                                            data-glpi-form-editor-on-click="build-move-section-modal-content"
                                        >
                                            <i class="ti ti-arrows-move-vertical me-2"></i>
                                            <span>{{ __("Move section") }}</span>
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            type="button"
                                            class="dropdown-item {{ section_index == 1 ? "d-none" : "" }}"
                                            aria-label="{{ __('Merge with previous section') }}"
                                            data-glpi-form-editor-on-click="merge-with-previous-section"
                                        >
                                            <i class="ti ti-arrow-merge me-2"></i>
                                            <span>{{ __("Merge with previous section") }}</span>
                                        </button>
                                    </li>

                                    <li>
                                        <button
                                            type="button"
                                            class="dropdown-item"
                                            data-glpi-form-editor-on-click="delete-section"
                                        >
                                            <i class="ti ti-trash me-2"></i>
                                            <span>{{ __("Delete section") }}</span>
                                        </button>
                                    </li>

                                    <li>
                                        <button
                                            type="button"
                                            class="dropdown-item"
                                            data-glpi-form-editor-on-click="show-visibility-dropdown"
                                        >
                                            <i class="ti ti-eye-cog me-2"></i>
                                            <span>{{ __("Configure visibility") }}</span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <input
                        type="hidden"
                        name="uuid"
                        value="{{ section is not null ? section.fields.uuid : '' }}"
                    />
                    <input
                        type="hidden"
                        name="forms_forms_id"
                        value="{{ form.fields.id }}"
                    />
                    <input
                        type="hidden"
                        name="rank"
                        value="{{ section is not null ? section.fields.rank : 0 }}"
                    />
                </div>
            </div>
        </section>

        <div class="mb-2" data-glpi-form-editor-section-extra-details>
            {{ include('pages/admin/form/form_toolbar.html.twig', {
                'can_update'     : can_update,
                'form'           : form,
                'vertical_layout': true,
            }, with_context = false) }}
        </div>
    </div>

    <div data-glpi-form-editor-section-blocks class="mt-3">
    {% if section %}
        {% for form_group_blocks in section.getBlocks() %}
            {% if form_group_blocks is iterable %}
                {{ include('pages/admin/form/form_horizontal_block.html.twig', {
                    'blocks'                      : form_group_blocks,
                    'can_update'                  : can_update,
                    'form'                        : form,
                    'allow_unauthenticated_access': allow_unauthenticated_access,
                }, with_context = false) }}
            {% else %}
                {% set form_block = form_group_blocks %}
                {{ form_block.displayBlockForEditor(can_update, allow_unauthenticated_access) }}
            {% endif %}
        {% endfor %}
    {% endif %}
    </div>

</section>