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

<div class="modal fade" id="TranslationModal{{ rand }}" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="POST" action="{{ get_class(item)|itemtype_form_path }}">
                <input type="hidden" name="id" value="{{ item.fields['id'] }}">
                <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}" />
                <input type="hidden" name="_save_translation" value="1" />

                <div class="modal-header">
                    <h4 class="modal-title">{{ __("Add translation") }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                </div>
                <div class="modal-body">
                    <div id="field_dropdown_container" class="mb-3">
                        <label class="form-label" for="dropdown_field{{ rand }}">{{ __('Asset name / Field') }}</label>
                        {{ fields_dropdown|raw }}
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="dropdown_language{{ rand }}">{{ __('Language') }}</label>
                        {{ languages_dropdown|raw }}
                    </div>

                    <div class="mb-3" id="translations_panel{{ rand }}">
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" name="update">
                        <i id="translation-modal-button-icon{{ rand }}"></i>
                        <span id="translation-modal-button-text{{ rand }}"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="d-flex">
    <button type="button" class="btn btn-primary add-translation" data-bs-toggle="modal" data-bs-target="#TranslationModal{{ rand }}">
        <i class="ti ti-plus"></i>
        <span>{{ __("New translation") }}</span>
    </button>
</div>

<div class="table-responsive mt-3">
    {% if translations|length == 0 %}
        <span class="text-muted">{{ __("No translation has been added yet") }}</span>
    {% else %}
        <table class="table">
            <thead>
            <tr>
                <th><i class="ti ti-forms me-1"></i>{{ __('Asset name / Field') }}</th>
                <th><i class="ti ti-language me-1"></i>{{ __("Language") }}</th>
                <th># {{ __("Translations") }}</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
                {% for trans_data in translations %}
                    <tr data-field="{{ trans_data['id'] }}" data-language="{{ trans_data['language'] }}" data-translation="{{ trans_data['translation']|json_encode }}">
                        <td>{{ trans_data['name'] }}</td>
                        <td lang="{{ trans_data['language'] }}">{{ config('languages')[trans_data['language']][0] }}</td>
                        <td lang="{{ trans_data['language'] }}">
                            {% include "pages/admin/customobjects/plurals.html.twig" with {
                                'plurals': trans_data['translation'],
                            } only %}
                        </td>
                        <td>
                            <div title="{{ __("Edit translation") }}" class="d-inline" data-bs-toggle="tooltip" data-bs-placement="top">
                                <button type="button" class="btn btn-sm btn-icon btn-ghost-secondary edit-translation" data-bs-toggle="modal">
                                    <i class="ti ti-pencil"></i>
                                </button>
                            </div>
                            <div title="{{ __("Delete translation") }}" class="d-inline" data-bs-toggle="tooltip" data-bs-placement="top">
                                <form method="POST" action="{{ get_class(item)|itemtype_form_path }}" class="d-inline">
                                    <input type="hidden" name="id" value="{{ item.fields['id'] }}">
                                    <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}" />
                                    <input type="hidden" name="_delete_translation" value="1" />
                                    <input type="hidden" name="field" value="{{ trans_data['id'] }}" />
                                    <input type="hidden" name="language" value="{{ trans_data['language'] }}" />
                                    <button type="submit" name="update" class="btn btn-sm btn-icon btn-ghost-danger">
                                        <i class="ti ti-trash-x"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}
</div>

<script>
    $(() => {
        $('#TranslationModal{{ rand }} select[name="language"]').on('change', function() {
            const field_selection = $('#TranslationModal{{ rand }} select[name="field"]').val();
            setModalLanguagePlural(field_selection, $(this).val());
        });
        $('#TranslationModal{{ rand }} select[name="field"]').on('change', function() {
            const lang_selection = $('#TranslationModal{{ rand }} select[name="language"]').val();
            setModalLanguagePlural($(this).val(), lang_selection);
        });
        $('.add-translation').on('click', () => {
            // empty the old plural inputs
            $('#translations_panel{{ rand }}').html("");

            // reset the language dropdown
            $('#TranslationModal{{ rand }} select[name=language]').val('').trigger('change');

            $('#translation-modal-button-icon{{ rand }}').attr('class', '').addClass('ti ti-plus');
            $('#translation-modal-button-text{{ rand }}').text("{{ __("Add") }}");
        });

        $('.edit-translation').on('click', (e) => {
            const target_row = $(e.target).closest('tr');
            const language = target_row.data('language');
            const plurals = target_row.data('translation');
            const field = target_row.data('field') ?? 0;

            $('#dropdown_language{{ rand }}').val(language);
            setModalLanguagePlural(field, language, plurals);

            $('#translation-modal-button-icon{{ rand }}').attr('class', '').addClass('ti ti-device-floppy');
            $('#translation-modal-button-text{{ rand }}').text("{{ __("Save") }}");

            $('#TranslationModal{{ rand }}').modal('show');
        });

        let avoid_language_recursion = false;
        const setModalLanguagePlural = (field, language, plurals_values) => {
            if (avoid_language_recursion) {
                return;
            }

            plurals_values = plurals_values || {};

            // empty the old plural inputs
            $('#translations_panel{{ rand }}').html("");

            // Set the language dropdown value (we redo it for edit case)
            avoid_language_recursion = true;
            $('#TranslationModal{{ rand }} select[name="field"]').val(field).trigger('change');
            $('#TranslationModal{{ rand }} select[name="language"]').val(language).trigger('change');
            avoid_language_recursion = false;

            const plurals_promise = (field === null || parseInt(field) === 0) ?
                $.ajax({url: "{{ path('ajax/getPlurals.php') }}", data: {language: language}})
                : Promise.resolve([
                    {id: 'one', formula: 'n = 1', examples: '1'},
                ]);

            plurals_promise.then((data) => {
                // Append new input for each plural in data
                data.forEach((pluralForm) => {
                    let helper = pluralForm.examples;
                    if (pluralForm.formula) {
                        helper = pluralForm.formula + ' (' + pluralForm.examples + ')';
                    }

                    const plural_value = plurals_values[pluralForm.id] || '';
                    const plural_html = `
                    <div class="mb-2">
                        <label class="form-label" for="plural_${pluralForm.id}{{ rand }}">
                            ${pluralForm.id}
                            <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true"
                                  data-bs-content="${helper}">
                                <i class="ti ti-help"></i>
                            </span>
                        </label>
                        <input type="text" class="form-control" id="plural_${pluralForm.id}{{ rand }}" name="plurals[${pluralForm.id}]" value="${plural_value}">
                    </div>
                `;
                    $('#translations_panel{{ rand }}').append(plural_html);
                });
                window.initTooltips($('#translations_panel{{ rand }}').get(0));
            });
        };
    });
</script>