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

{% extends "generic_show_form.html.twig" %}
{% import 'components/form/fields_macros.html.twig' as fields %}
{% import 'components/alerts_macros.html.twig' as alerts %}
{% set params  = params ?? [] %}

{% set customobj_ns = item.getCustomObjectNamespace() %}
{% set customobj_suffix = item.getCustomObjectClassSuffix() %}

{% block form_fields %}
    {% if not item.isNewItem() and item.isActive() and not has_rights_enabled %}
        {{ alerts.alert_warning(__('There is currently no profile with access to items with current definition.')) }}
    {% endif %}

    {% set helper %}
        {{ __('The system name field corresponds to what will be used when development is involved. Examples: API calls, webhooks, etc.') }}
        {{ __('It can be personalized, but some words are reserved such as classes from GLPI like Computer, Monitor, etc.') }}
        {{ __('Items linked to the system name "%s" will have the class "%s".')|format('Example', customobj_ns ~ '\\Example' ~ customobj_suffix) }}
    {% endset %}
    {{ fields.textField('label', item.fields['label'], __('Label')) }}
    {{ fields.textField(
        'system_name',
        item.fields['system_name'],
        __('System name'),
        {
            disabled: not item.isNewItem(),
            'helper': helper
        }
    ) }}
    {% if not item.isNewItem() %}
        {% set helper_html %}
            <em class="text-muted">
                {{ __('The class of items related to current definition is "%s".')|format(customobj_ns ~ '\\%s'|format(item.fields['system_name'])) }}
            </em>
        {% endset %}
    {% endif %}

    {% if not item.isNewItem() %}
        <div class="modal fade" id="deletionWarningModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <a type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _x('button', 'Close') }}"></a>
                    <div class="modal-status bg-danger"></div>
                    <div class="modal-body text-center py-4">
                        {# SVG Icon corresponding to the ti-alert-triangle icon #}
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>

                        <h3>{{ _x('button', 'Are you sure?') }}</h3>
                        <div class="text-muted">
                            {% if item_count > 0 %}
                                {{ __('This item definition is used by %d items.')|format(item_count) }}
                                <br>
                                {{ __('All items that are using this definition will be deleted.') }}
                            {% else %}
                                {{ __('This item definition is not used by any items.') }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="w-100">
                            <div class="row">
                                <div class="col">
                                    <a class="btn w-100" data-bs-dismiss="modal">
                                        {{ _x('button', 'Cancel') }}
                                    </a>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-danger w-100" name="save">
                                        {{ _x('button', 'Yes, delete it!') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script defer>
            $('#mainformtable button[name="purge"]').on('click', { is_from_modal: false }, (event, data) => {
                data = data || event.data;

                if (data.is_from_modal !== true) {
                    event.preventDefault();
                    $('#deletionWarningModal').modal('show');
                }
            });

            $('#deletionWarningModal button[name="save"]').on('click', () => {
                $('#deletionWarningModal').modal('hide');
                $('#mainformtable button[name="purge"]').trigger(
                    'click',
                    {
                        'is_from_modal': true,
                    }
                );
            });
        </script>
    {% endif %}
    <script type="module">
        $('#mainformtable input[name="system_name"]').on('change', () => {
            if ($('input[name="system_name"]').val() === '') {
                $('input[name="system_name"]').data('manually_changed', false);
            } else {
                $('input[name="system_name"]').data('manually_changed', true);
            }
        });
        $('#mainformtable input[name="system_name"]').on('input', () => {
            const reserved_system_names_pattern = {{ reserved_system_names_pattern|raw }};
            const existing_names = {{ existing_system_names|json_encode()|raw }};
            const system_name = $('#mainformtable input[name="system_name"]').val();
            const system_name_pattern = /^{{ constant('Glpi\\CustomObject\\AbstractDefinition::SYSTEM_NAME_PATTERN')|raw }}$/;

            if (reserved_system_names_pattern.test(system_name) === true) {
                $('#mainformtable input[name="system_name"]').get(0).setCustomValidity(__('The system name is a reserved name. Please enter a different label or manually change the system name.'));
            } else if (existing_names.map((n) => n.toLowerCase()).includes(system_name.toLowerCase())) {
                $('#mainformtable input[name="system_name"]').get(0).setCustomValidity(__('The system name is already in use. Please enter a different label or manually change the system name.'));
            } else if (system_name_pattern.test(system_name) === false) {
                {# See pattern used in \Glpi\CustomObject\AbstractDefinition::prepareInput() #}
                $('#mainformtable input[name="system_name"]').get(0).setCustomValidity(__('The system name is invalid. It must start with a letter and contain only alphanumeric chars.'));
            } else {
                $('#mainformtable input[name="system_name"]').get(0).setCustomValidity('');
            }
        });
        function autoUpdateNameField() {
            if ({{ not item.isNewItem() ? 'true' : 'false' }} || $('#mainformtable input[name="system_name"]').data('manually_changed')) {
                return;
            }

            $('#mainformtable input[name="system_name"]').val(
                $('#mainformtable input[name="label"]').val().normalize('NFD').replace(/[^a-z0-9_]/gi, '')
            );
            $('#mainformtable input[name="system_name"]').trigger('input');
        };
        $('#mainformtable input[name="label"]').on('input', () => {
            autoUpdateNameField();
        });
    </script>
    {{ parent() }}
{% endblock %}

{% block more_fields %}
    {{ fields.dropdownWebIcons(
        'icon',
        item.fields['icon'],
        __('Icon'),
    ) }}

    {% if item.isField('picture') %}
        {% if item.fields['picture'] is not empty %}
            {{ fields.imageField('picture', item.fields['picture']|picture_url, field['label'], {
                'clearable': (not item.isNewItem() and item.canUpdateItem())
            }) }}
        {% else %}
            {{ fields.fileField('picture', null, _n('Picture', 'Pictures', 1), {
                'onlyimages': true
            }) }}
        {% endif %}
    {% endif %}
{% endblock %}