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

{% macro getTranslationInput(handler, translation) %}
    {% import 'components/form/fields_macros.html.twig' as fields %}

    {% set rand = random() %}

    <input type="hidden" name="translations[{{ rand }}][itemtype]" value="{{ get_class(handler.getItem()) }}" />
    <input type="hidden" name="translations[{{ rand }}][items_id]" value="{{ handler.getItem().getID() }}" />
    <input type="hidden" name="translations[{{ rand }}][key]" value="{{ handler.getKey() }}" />

    <div class="d-flex align-items-center">
        {% if translation and translation.isPossiblyObsolete() %}
            <i
                class="ti ti-alert-circle text-warning me-1"
                aria-hidden="true"
                data-bs-toggle="tooltip"
                title="{{ __('The default value has changed since the last translation') }}"
                aria-label="{{ __('Translation may be obsolete') }}"
            ></i>
        {% endif %}

        {% set current_translation = '' %}
        {% if translation %}
            {% set current_translation = translation.getTranslation() %}
        {% endif %}
        {% if handler.isRichText() %}
            {{ fields.textareaField(
                'translations[%s][translations][one]'|format(rand),
                current_translation,
                '',
                {
                    'no_label'       : true,
                    'full_width'     : true,
                    'mb'             : '',
                    'aria_label'     : __("Enter translation"),
                    'placeholder'    : __("Enter translation"),
                    'enable_richtext': true,
                    'statusbar'      : false,
                    'editor_height'  : 0,
                    'init'           : false,
                    'init_on_demand' : true,
                }
            ) }}
        {% else %}
            <input
                type="text"
                name="translations[{{ rand }}][translations][one]"
                class="form-control"
                placeholder="{{ __('Enter translation') }}"
                value="{{ current_translation }}"
                aria-label="{{ __('Enter translation') }}"
            />
        {% endif %}
    </div>
{% endmacro %}

{% set entries = [] %}
{% for handlers in item.listTranslationsHandlers() %}
    {% set entries = entries|merge([{
        'type': '<span data-glpi-helpdesk-translations-subtitle-row>' ~ handlers|first.getCategory() ~ '</span>',
        'type_colspan': 3,
        'type_aria_label': _n('Category', 'Categories', 1)
    }]) %}
    {% for handler in handlers %}
        {% set entries = entries|merge([{
            'type': '<span class="fw-medium">' ~ handler.getName() ~ '</span>',
            'default': handler.isRichText() ? handler.getValue()|safe_html : handler.getValue()|e,
            'translation': _self.getTranslationInput(
                handler,
                helpdesk_translation.getForItemKeyAndLanguage(
                    handler.getItem(),
                    handler.getKey(),
                    helpdesk_translation.fields['language']
                )
            ),
            'type_aria_label': __('Translation name'),
            'default_aria_label': __('Default value'),
            'translation_aria_label': __('Translated value')
        }]) %}
    {% endfor %}
{% endfor %}

<button
    type="button"
    class="btn btn-link"
    data-bs-toggle="modal"
    data-bs-target="#helpdesk-translation-modal-{{ helpdesk_translation.fields['language'] }}"
    aria-label="{{ __('Edit translation') }}"
>
    <strong>{{ call('Dropdown::getLanguageName', [helpdesk_translation.fields['language']]) }}</strong>
</button>

<div class="modal fade" id="helpdesk-translation-modal-{{ helpdesk_translation.fields['language'] }}" tabindex="-1" role="dialog" aria-labelledby="helpdesk-translation-modal-title-{{ helpdesk_translation.fields['language'] }}">
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
        <form class="modal-content" method="POST">
            <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}" />
            <input type="hidden" name="helpdesk_translation_id" value="{{ helpdesk_translation.getID() }}" />

            <div class="modal-header border-bottom-0">
                <h5 class="modal-title" id="helpdesk-translation-modal-title-{{ helpdesk_translation.fields['language'] }}">
                    {{ __('Helpdesk translations: %s')|format(call('Dropdown::getLanguageName', [helpdesk_translation.fields['language']])) }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
            </div>
            <div class="modal-body p-0">
                {% include "components/datatable.html.twig" with {
                    'datatable_id': 'glpi-helpdesk-translations-languages',
                    'datatable_aria_label': _n('Helpdesk translation', 'Helpdesk translations', get_plural_number()),
                    'columns': {
                        'type': '',
                        'default': __('Default (%s)')|format(call('Dropdown::getLanguageName', [config('language')])),
                        'translation': call('Dropdown::getLanguageName', [helpdesk_translation.fields['language']]),
                    },
                    'formatters': {
                        'type': 'raw_html',
                        'default': 'raw_html',
                        'translation': 'raw_html',
                    },
                    'entries': entries,
                    'total_number': 1,
                    'nofilter': true,
                    'nosort': true,
                } only %}
            </div>
            <div class="modal-footer border-top-0">
                {% if can_update %}
                    <div class="d-flex flex-row-reverse w-100" role="group" aria-label="{{ __('Form actions') }}">
                        <button
                            class="btn btn-primary ms-2"
                            name="update"
                            type="submit"
                            formaction="{{ path('Helpdesk/Translation/' ~ helpdesk_translation.fields['language']) }}"
                            aria-label="{{ __('Save translation') }}"
                        >
                            <i class="ti ti-device-floppy me-2" aria-hidden="true"></i>
                            {{ __("Save") }}
                        </button>
                        <button
                            class="btn btn-ghost-danger"
                            name="delete"
                            type="submit"
                            formaction="{{ path('Helpdesk/Translation/' ~ helpdesk_translation.fields['language'] ~ '/Delete') }}"
                            aria-label="{{ __('Delete translation') }}"
                        >
                            <i class="ti ti-trash me-2" aria-hidden="true"></i>
                            {{ __("Delete") }}
                        </button>
                    </div>
                {% else %}
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="ti ti-x me-2" aria-hidden="true"></i>
                        {{ __("Close") }}
                    </button>
                {% endif %}
            </div>
        </form>
    </div>
</div>