{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2024 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 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-language me-1"></i>{{ __("Language") }}</th>
                    <th># {{ __("Translations") }}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            {% for language, plurals in translations %}
                <tr lang="{{ language }}" data-language="{{ language }}" data-plurals="{{ plurals|json_encode }}">
                    <td>{{ config('languages')[language][0] }}</td>
                    <td>
                        {% include "pages/admin/customobjects/plurals.html.twig" with {
                            'plurals': plurals,
                        } only %}
                    </td>
                    <td>
                        <span title="{{ __("Edit translation") }}" data-bs-toggle="tooltip" data-bs-placement="top">
                            <button type="button" class="btn btn-icon btn-ghost-secondary edit-translation" data-bs-toggle="modal">
                                <i class="ti ti-pencil"></i>
                            </button>
                        </span>
                        <span title="{{ __("Delete translation") }}" 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="language" value="{{ language }}" />
                                <button type="submit" name="update" class="btn btn-icon btn-ghost-danger">
                                    <i class="ti ti-trash-x"></i>
                                </button>
                            </form>
                        </span>
                    </td>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}
</div>

<script>
    $(document).ready(function() {
        $('.add-translation').click(function() {
            // 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').click(function() {
            var language = $(this).closest('tr').data('language');
            var plurals = $(this).closest('tr').data('plurals');

            $('#dropdown_language{{ rand }}').val(language);
            setModalLanguagePlural(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 = function(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="language"]').val(language).trigger('change');
        avoid_language_recursion = false;

        $.get("{{ path('ajax/getPlurals.php') }}", {
            language: language
        }, function(data) {
            // Append new input for each plural in data
            data.forEach(function(pluralForm) {
                let helper = pluralForm.examples;
                if (pluralForm.formula) {
                    helper = pluralForm.formula + ' (' + pluralForm.examples + ')';
                }

                const plural_value = plurals_values[pluralForm.id] || '';
                var 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);

            });
        });
    };
</script>