{#
 # ---------------------------------------------------------------------
 #
 # 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 question_types_manager       Glpi\Form\QuestionType\QuestionTypesManager #}
{# @var question_type                Glpi\Form\QuestionType\QuestionTypeInterface #}
{# @var question                     Glpi\Form\Question|null #}
{# @var section                      Glpi\Form\Section|null #}
{# @var can_update                   bool #}
{# @var allow_unauthenticated_access bool #}

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

{% set base_field_options = {
    'is_horizontal': false,
    'full_width'   : true,
    'no_label'     : true,
} %}

<section
    role="option"
    class="d-flex"
    data-glpi-form-editor-block
    data-glpi-form-editor-question
    data-glpi-form-editor-condition-type="{{ enum('Glpi\\Form\\Condition\\Type').QUESTION.value }}"
    data-glpi-draggable-item
    aria-label="{{ question is not null ? question.fields.name : __('New question') }}"
>
    <section
        data-glpi-form-editor-on-click="set-active"
        data-glpi-form-editor-question-details
        data-glpi-form-editor-allow-anonymous="{{ not allow_unauthenticated_access or question_type.isAllowedForUnauthenticatedAccess() ? 1 : 0 }}"
        class="card flex-grow-1"
        aria-label="{{ __("Question details") }}"
    >
        <div
            class="card-status-start bg-primary"
            data-glpi-form-editor-active-question-status-indicator
        ></div>
        <div class="card-body">
            <div class="d-flex">
                <i
                    class="glpi-form-editor-question-handle ti ti-grip-horizontal cursor-grab ms-auto me-auto mt-n3 mb-n2"
                    data-glpi-form-editor-question-handle
                    draggable="true"
                    data-glpi-form-editor-state-action
                ></i>
            </div>
            {# Display question's title #}
            <div class="d-flex mt-n1 align-items-center">
                <i
                    class="ti ti-alert-triangle text-warning me-2 {{ allow_unauthenticated_access and not question_type.isAllowedForUnauthenticatedAccess() ? '' : 'd-none' }}"
                    data-glpi-form-editor-blacklisted-question-type-warning
                    data-bs-toggle="popover"
                    data-bs-trigger="hover"
                    data-bs-placement="top"
                    data-bs-html="true"
                    data-bs-content="{{ __("The current access policy allows unauthenticated access to this form, but this question type will be hidden to unauthenticated users.") }}"
                ></i>
                <input
                    title="{{ __("Question name") }}"
                    class="form-control content-editable-h2 mb-0"
                    type="text"
                    name="name"
                    value="{{ question is not null ? question.fields.name : '' }}"
                    placeholder="{{ __("New question") }}"
                    data-glpi-form-editor-dynamic-input
                    data-glpi-form-editor-question-details-name
                    maxlength="255"
                />

                {% if question is null %}
                    {% set question_strategy = enum('Glpi\\Form\\Condition\\VisibilityStrategy').ALWAYS_VISIBLE %}
                {% else %}
                    {% set question_strategy = question.getConfiguredVisibilityStrategy() %}
                {% endif %}

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

                {# Validation dropdown #}
                {{ include('pages/admin/form/conditional_validation_dropdown.html.twig', {
                    'item': question,
                    'type': "Glpi\\Form\\Question",
                }, with_context = false) }}

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

                {# Duplicate question #}
                <i
                    role="button"
                    class="ti ti-copy ms-3 cursor-pointer"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    title="{{ __("Duplicate question") }}"
                    data-glpi-form-editor-on-click="duplicate-question"
                    data-glpi-form-editor-question-extra-details
                    data-glpi-form-editor-state-action
                ></i>

                {# Delete question #}
                <i
                    role="button"
                    class="ti ti-trash ms-3 cursor-pointer"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    title="{{ __("Delete") }}"
                    aria-label="{{ __("Delete") }}"
                    data-glpi-form-editor-on-click="delete-question"
                    data-glpi-form-editor-question-extra-details
                    data-glpi-form-editor-state-action
                ></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="show-visibility-dropdown"
                            >
                                <i class="ti ti-eye-cog me-2"></i>
                                <span>{{ __("Configure visibility") }}</span>
                            </button>
                        </li>
                        <li>
                            <button
                                type="button"
                                class="dropdown-item"
                                data-glpi-form-editor-on-click="show-validation-dropdown"
                            >
                                <i class="ti ti-checks me-2"></i>
                                <span>{{ __("Configure validation") }}</span>
                            </button>
                        </li>
                        <li>
                            <button
                                type="button"
                                class="dropdown-item"
                                data-glpi-form-editor-on-click="copy-uuid"
                            >
                                <i class="ti ti-id-badge me-2"></i>
                                <span>{{ __("Copy uuid") }}</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

            {# Display common fields #}
            <div
                class="content-editable-tinymce mt-2"
                data-glpi-form-editor-question-description
                {# Mark as secondary if empty #}
                {{ question is null or question.fields.description|length == 0 ? "data-glpi-form-editor-question-extra-details" : "" }}
            >
                {{ fields.textareaField(
                    'description',
                    question is not null ? question.fields.description : '',
                    __('Description'),
                    base_field_options|merge({
                        'placeholder': __('Add a description'),
                        'aria_label': __("Question description"),
                        'enable_richtext': true,
                        'add_body_classes': ['content-editable-tinymce-editor', 'text-muted'],
                        'editor_height': "0",
                        'rows' : 1,
                        'toolbar_location': 'bottom',
                        'init': false,
                        'init_on_demand': question is not null ? true : false,
                        'mb': 'mb-0',
                    })
                ) }}
            </div>

            {# Render the specific question type #}
            <div
                class="mt-2 ms-1"
                data-glpi-form-editor-question-type-specific
            >
                {{ question_type.renderAdministrationTemplate(question)|raw }}
            </div>

            <div
                class="d-flex flex-wrap align-items-center gap-2 mt-2 ms-1"
                data-glpi-form-editor-question-extra-details
                data-fix-dropdown-flex
            >
                {# Setup "glpi-loaded" attribute for questions, not for the template #}
                {% set base_attributes = question is null ? {} : {'glpi-loaded' : "false"} %}

                <div class="question-type-dropdown-group">
                    {{ fields.dropdownArrayField(
                        '_type_category',
                        question_types_manager.getCategoryKey(question_type.getCategory()),
                        question_types_manager.getCategoriesDropdownValues(),
                        '',
                        {
                            'init'                 : false,
                            'no_label'             : true,
                            'mb'                   : '',
                            'field_class'          : '',
                            'class'                : 'form-select form-select-sm',
                            'width'                : 'auto',
                            'dropdownCssClass'     : 'question-type-dropdown-group-dropdown-select',
                            'aria_label'           : __('Question type'),
                            'add_data_attributes'  : {
                                'glpi-form-editor-on-change': 'change-question-type-category',
                            }|merge(base_attributes),
                            'templateSelection'    : question_types_manager.getTemplateSelectionForCategories(),
                            'templateResult'       : question_types_manager.getTemplateResultForCategories(),
                        }
                    ) }}

                    {% set types = question_types_manager.getQuestionTypesDropdownValuesForCategory(question_type.getCategory()) %}

                    {{ fields.dropdownArrayField(
                        'type',
                        get_class(question_type),
                        types,
                        question_type.getName(),
                        {
                            'init'                 : false,
                            'no_label'             : true,
                            'mb'                   : '',
                            'field_class'          : types|length == 1 ? ' d-none' : '',
                            'class'                : 'form-select form-select-sm',
                            'width'                : 'auto',
                            'aria_label'           : __('Question sub type'),
                            'add_data_attributes'  : {
                                'glpi-form-editor-on-change'             : 'change-question-type',
                                'glpi-form-editor-question-type-selector': '',

                            }|merge(base_attributes),
                            'templateSelection'    : question_types_manager.getTemplateSelectionForQuestionTypes(),
                            'templateResult'       : question_types_manager.getTemplateResultForQuestionTypes(),
                        }
                    ) }}

                    {% set sub_types = question_type.getSubTypes() %}
                    {{ fields.dropdownArrayField(
                        question_type.getSubTypeFieldName(),
                        question_type.getSubTypeDefaultValue(question),
                        question_type.getSubTypes(),
                        '',
                        {
                            'init'                 : false,
                            'no_label'             : true,
                            'mb'                   : '',
                            'field_class'          : sub_types is empty ? ' d-none' : '',
                            'class'                : 'form-select form-select-sm',
                            'width'                : 'auto',
                            'disabled'             : sub_types is empty,
                            'aria_label'           : question_type.getSubTypeFieldAriaLabel(),
                            'add_data_attributes'  : {
                                'glpi-form-editor-on-change'                   : 'change-question-sub-type',
                                'glpi-form-editor-question-sub-type-selector'  : '',
                                'glpi-form-editor-specific-question-extra-data': '',
                            }|merge(base_attributes),
                        }
                    ) }}
                </div>

                {# Render the specific question options #}
                <div class="ms-auto" data-glpi-form-editor-specific-question-options data-glpi-form-editor-question-extra-details>
                    {{ question_type.renderAdministrationOptionsTemplate(question)|raw }}
                </div>

                <label class="form-check form-switch ms-2 mb-0 cursor-pointer">
                    <input type="hidden" value="0" name="is_mandatory">
                    <input
                        class="form-check-input"
                        name="is_mandatory"
                        type="checkbox"
                        value="1"
                        {{ question is not null and question.fields.is_mandatory ? 'checked' : '' }}
                    >
                    <span class="form-check-label">{{ __("Mandatory") }}</span>
                </label>
            </div>
        </div>

        {# Common hidden data #}
        <input
            type="hidden"
            name="uuid"
            value="{{ question is not null ? question.fields.uuid : '' }}"
        />
        <input
            type="hidden"
            name="forms_sections_uuid"
            value="{{ section is not null ? section.fields.uuid : '' }}"
        />
        <input
            type="hidden"
            name="vertical_rank"
            value="{{ question is not null ? question.fields.vertical_rank : 0 }}"
        />
        <input
            type="hidden"
            name="horizontal_rank"
            value="{{ question is not null ? question.fields.horizontal_rank : -1 }}"
        />
        <input
            type="hidden"
            name="category"
            value="{{ question_types_manager.getCategoryKey(question_type.getCategory()) }}"
        />
        <input
            type="hidden"
            name="type"
            value="{{ constant('class', question_type) }}"
        />
    </section>

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