{#
 # ---------------------------------------------------------------------
 #
 # 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 item   Glpi\Form\Form #}
{# @var params array #}
{# @var question_types_manager Glpi\Form\QuestionType\QuestionTypesManager #}
{# @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,
} %}

<form
    id="main-form"
    data-glpi-form-editor-container
    class="
        form-editor-container
        d-flex
        flex-column
        {# Negative margins to cancel parent padding, this is needed as we use a
        different background color than the parent item #}
        mt-n2
        mb-n2
    "
    method="POST"
    action="{{ item.getFormURL() }}"
    data-ajax-submit {# Form will be submitted using AJAX #}
    data-ajax-submit-itemtype="Glpi\Form\Form" {# Target itemtype #}
    data-track-changes="true"
>
    {{ call_plugin_hook(constant('Glpi\\Plugin\\Hooks::PRE_ITEM_FORM'), {'item': item, 'options': params}) }}

    {# Form editor page #}
    {# UX and items placement are a work in progress #}
    {# Need more elements (questions, sections) before finalizing the design #}
    <div data-glpi-form-editor class="form-editor row flex-reverse">

        <div class="designer col-12 px-4 py-3">
            <div class="row">

                {# We expect to use the right side to display some extra info later so keep some available space for now #}
                <div
                    class="col-7"
                    data-glpi-form-editor-form
                    data-glpi-form-editor-active-form
                >
                    <section
                        data-glpi-form-editor-form-details
                        data-glpi-form-editor-on-click="set-active"
                        aria-label="{{ __("Form details") }}"
                    >
                        {# Card containing the main form data: title, header and status #}
                        <div class="card form-details mb-3">
                            <div
                                class="card-status-start bg-primary"
                                data-glpi-form-editor-active-form-status-indicator
                            ></div>
                            <div class="card-body">

                                {# Header #}
                                <div class="d-flex">
                                    {# Form's name #}
                                    <input
                                        title="{{ __("Form name") }}"
                                        type="text"
                                        class="form-control content-editable-h1"
                                        name="name"
                                        value="{{ item.fields.name }}"
                                        data-glpi-form-editor-form-details-name
                                    >

                                    {# Form's status #}
                                    <label class="form-check form-switch ms-3" style="margin-top: 2px">
                                        <input type="hidden" value="0" name="is_active">
                                        <input
                                            class="form-check-input"
                                            name="is_active"
                                            type="checkbox"
                                            value="1"
                                            {% if item.fields.is_active %} checked {% endif %}
                                        >
                                        <span class="form-check-label">{{ __("Active") }}</span>
                                    </label>
                                </div>

                                {# Form's hader #}
                                <div class="content-editable-tinymce" data-glpi-form-editor-header-description>
                                    {{ fields.textareaField(
                                        'header',
                                        item.fields.header,
                                        __('Header'),
                                        base_field_options|merge({
                                            'enable_richtext': true,
                                            'add_body_classes': ['content-editable-tinymce-editor', 'text-muted'],
                                            'editor_height': "0",
                                            'rows' : 1,
                                            'toolbar_location': 'bottom',
                                            'mb': 'mb-0',
                                            'aria_label': __("Form description"),
                                            'placeholder': __("Add a description to your form..."),
                                        })
                                    ) }}
                                </div>
                            </div>
                        </div>
                    </section>

                    {# Display all questions here #}
                    <div data-glpi-form-editor-blocks>
                        {% set number_of_sections = item.getSections()|length %}
                        {% for section in item.getSections() %}
                            {{ include('pages/admin/form/form_section.html.twig', {
                                'form'                  : item,
                                'section'               : section,
                                'question_types_manager': question_types_manager,
                                'section_index'         : loop.index,
                                'can_update'            : item.canUpdate(),
                                'show_section_form'     : number_of_sections > 1,
                                'number_of_sections'    : number_of_sections,
                            }, with_context = false) }}
                        {% endfor %}
                    </div>

                    <div data-glpi-form-editor-form-extra-details>
                        {{ include('pages/admin/form/form_toolbar.html.twig', {
                            'can_update': item.canUpdate(),
                            'form'      : item,
                        }, with_context = false) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="
        editor-footer
        justify-content-end
        d-flex
        py-2
        px-3
        {# Negative margins to cancel parent padding, this is needed as we want
        our footer to use the full width of its parent #}
        ms-n2
        me-n2
    ">
        {# Preview form action #}
        {# Mostly useful to test forms ATM. Final UI/UX are not really thought out #}
        {# TODO: UI/UX #}
        <div class="me-auto" data-glpi-form-editor-preview-actions>
            <a
                href="{{ path('/Form/Render/' ~ item.fields.id) }}"
                target="_blank"
                class="btn btn-secondary"
                type="button"
                name="preview"
                form="main-form"
                title="{{ __("Preview") }}"
                data-glpi-form-editor-preview-action
            >
                <i class="ti ti-eye me-1"></i>
                <span class="d-none d-xl-block">{{ __("Preview") }}</span>
            </a>
            <button
                class="btn btn-secondary d-none"
                type="submit"
                name="update"
                form="main-form"
                title="{{ __("Save and preview") }}"
                data-glpi-form-editor-save-and-preview-action
                data-glpi-form-editor-preview-url="{{ path('/Form/Render/' ~ item.fields.id) }}"
            >
                <i class="ti ti-eye me-1"></i>
                <span class="d-none d-xl-block">{{ __("Save and preview") }}</span>
            </button>
        </div>

        {# Move to trashbin form action #}
        {% if item.canDelete() %}
            {# Hidden if the item is still in draft mode #}
            <button
                class="
                    btn
                    btn-ghost-warning
                    me-2
                    {{ item.fields.is_deleted ? "d-none" : "" }}
                    {{ item.fields.is_draft ? "d-none" : "" }}
                "
                type="submit"
                name="delete"
                form="main-form"
            >
                <i class="ti ti-trash me-1"></i>{{ __("Put in trashbin") }}
            </button>
        {% endif %}

        {# Purge action #}
        {% if item.canPurge() %}
            <button
                class="btn btn-ghost-danger me-2 {{ not item.fields.is_deleted ? "d-none" : "" }}"
                type="submit"
                name="purge"
                form="main-form"
            >
                <i class="ti ti-trash me-1"></i>{{ __("Delete permanently") }}
            </button>
        {% endif %}

        {# Restore action #}
        {% if item.canDelete() %}
            <button
                class="
                    btn
                    btn-ghost-secondary
                    me-2
                    {{ not item.fields.is_deleted ? "d-none" : "" }}
                "
                type="submit"
                name="restore"
                form="main-form"
            >
                <i class="ti ti-trash-off me-1"></i>{{ __("Restore") }}
            </button>
        {% endif %}

        {% if item.fields.is_draft %}
            {# Add action (which is an update form as we just change the is_draft field's value) #}
            <button
                class="btn btn-primary"
                type="submit"
                name="update"
                form="main-form"
                title="{{ __("Add") }}"
            >
                <i class="ti ti-plus me-1"></i>
                <span class="d-block add-label">{{ __("Add") }}</span>
            </button>
        {% elseif item.canUpdate() %}
            {# Update action #}
            <button
                class="btn btn-primary"
                type="submit"
                name="update"
                form="main-form"
                title="{{ __("Save") }}"
            >
                <i class="ti ti-device-floppy me-1"></i>
                <span class="d-block save-label">{{ __("Save") }}</span>
            </button>
        {% endif %}
        </button>
    </div>

    {# Form id #}
    <input type="hidden" name="id" value="{{ item.fields.id }}">

    {# Special inputs to indicate that missing sections and question must be deleted #}
    <input type="hidden" name="_delete_missing_questions" value="1">
    <input type="hidden" name="_delete_missing_sections" value="1">
    <input type="hidden" name="_delete_missing_comments" value="1">

    {# Set as non draft once saved #}
    {% if item.fields.is_draft %}
        <input type="hidden" name="is_draft" value="0">
    {% endif %}

    {# TODO: add bootstrap tooltips on each buttons #}

    {{ call_plugin_hook(constant('Glpi\\Plugin\\Hooks::POST_ITEM_FORM'), {'item': item, 'options': params}) }}

    {# Move section modal #}
    {{ include('pages/admin/form/move_section_modal.html.twig') }}
</form>

{% if item.canUpdate() %}
    {# Templates, must be outside the main form to avoid submitting their inputs #}
    <div data-glpi-form-editor-templates class="d-none">

        {# Load all possible questions types as hidden DOM content that is ready to be copied for a new question #}
        {% for key, question_type in question_types_manager.getQuestionTypes() %}
            <div data-glpi-form-editor-question-template="{{ key }}">
                {# Render admin template for the given question type #}
                {{ include('pages/admin/form/form_question.html.twig', {
                    'form'                        : item,
                    'question_types_manager'      : question_types_manager,
                    'question_type'               : question_type,
                    'question'                    : null,
                    'section'                     : null,
                    'can_update'                  : true,
                    'allow_unauthenticated_access': allow_unauthenticated_access,
                }, with_context = false) }}
            </div>
        {% endfor %}

        {# Load new title and description template #}
        <div data-glpi-form-editor-comment-template>
            {{ include('pages/admin/form/form_comment.html.twig', {
                'form'                   : item,
                'question_types_manager' : question_types_manager,
                'question_type'          : question_type,
                'question'               : null,
                'section'                : null,
                'can_update'             : true,
            }, with_context = false) }}
        </div>

        {# Load new section template #}
        <div data-glpi-form-editor-section-template>
            {{ include('pages/admin/form/form_section.html.twig', {
                'form'               : item,
                'section'            : null,
                'can_update'         : true,
                'show_section_form'  : true,
                'number_of_sections' : 0,
            }, with_context = false) }}
        </div>

        {# Load all possible question types values #}
        <select data-glpi-form-editor-question-types-values>
            {% for key, question_type in question_types_manager.getQuestionTypes() %}
                <option
                    data-glpi-form-editor-question-type="{{ question_type.getCategory().value }}"
                    value="{{ key }}"
                >
                    {{ question_type.getName() }}
                </option>
            {% endfor %}
        </select>

    </div>
{% endif %}

<script defer type="module">
(async () => {
    const modules = await Promise.all([
        import("{{ js_path('js/modules/Forms/EditorController.js') }}"),
        import("{{ js_path('js/modules/Forms/EditorConvertedExtractedDefaultValue.js') }}")
    ]);
    const GlpiFormEditorController = modules[0].GlpiFormEditorController;
    const EditorConvertedExtractedDefaultValue = modules[1].GlpiFormEditorConvertedExtractedDefaultValue;

    const container_selector = "[data-glpi-form-editor-container]";
    const controller = new GlpiFormEditorController(
        container_selector,
        {{ item.fields.is_draft ? "true" : "false" }},
        "{{ question_types_manager.getDefaultTypeClass()|escape('js') }}",
        "[data-glpi-form-editor-templates]"
    );

    // Temporary solution, would be better to import it directly where it is needed but the current
    // design doesn't allow it.
    $(container_selector).data('EditorConvertedExtractedDefaultValue', EditorConvertedExtractedDefaultValue);

    {% for question_type in question_types_manager.getQuestionTypes() %}
        controller.registerQuestionTypeOptions(
            '{{ get_class(question_type)|e('js') }}',
            {{ question_type.getFormEditorJsOptions()|raw }}
        );
    {% endfor %}

    $(container_selector).data('controller', controller);
    $(container_selector).addClass("initialized");
    $(container_selector).trigger("initialized");
})();
</script>

<style>
    /* Fix a weird scrolling issue, can't find a better solution at this time */
    /* Must be inline style to make sure it is only applied to this page */
    html {
        overflow: hidden;
    }
</style>