{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.translations_management'|trans }}{% endblock %}

{% block body %}
    <div class="container mt-5">
        <h2 class="mb-4">{{ 'admin.translations_management'|trans }}</h2>
        <p>{{ 'admin.manage_translations_description'|trans|raw }}</p>

        <a href="{{ path('admin_translation_create') }}" class="btn btn-success mb-3">
            <i class="bi bi-plus-circle"></i> {{ 'admin.create_translation'|trans }}
        </a>

        <form method="get" class="mb-3 d-flex" style="gap:1rem">
            <input type="text" name="search" class="form-control" placeholder="{{ 'admin.search_translations_placeholder'|trans }}" value="{{ search }}">
            <button type="submit" class="btn btn-primary">{{ 'admin.search'|trans }}</button>
        </form>

        <div class="table-responsive">
            <table id="redirectsTable" class="table table-striped table-bordered table-responsive">
                <thead>
                <tr>
                    <th>{{ 'admin.translations.qualifier'|trans }}</th>
                    <th>{{ 'admin.translations.text'|trans }}</th>
                    <th>{{ 'admin.translations.locale'|trans }}</th>
                    <th>{{ 'admin.actions'|trans }}</th>
                </tr>
                </thead>
                <tbody id="redirectsTableBody">
                {% for translation in translations %}
                    <tr>
                        <td>{{ translation.qualifier }}</td>
                        <td>{{ translation.text }}</td>
                        <td>{{ translation.locale }}</td>
                        <td>
                            <div class="d-flex flex-row flex-wrap justify-content-around">
                                <a href="{{ path('admin_translation_edit', {id: translation.id}) }}"
                                   class="btn btn-primary">
                                    <i class="bi bi-pencil-square"></i> {{ 'admin.edit'|trans }}
                                </a>
                                <button type="button" class="btn btn-danger" onclick="handleDeleteTranslation('{{ path('admin_translation_delete', {id: translation.id}) }}', '{{ translation.qualifier }}')">
                                    <i class="bi bi-trash"></i> {{ 'admin.delete'|trans }}
                                </button>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        {% include 'administration/pagination.html.twig' with {
            'paginationPath': 'admin_translations',
            'totalPages': totalPages,
            'currentPage': currentPage,
            'search': search
        } %}
    </div>

    <script>
        async function handleDeleteTranslation(url, itemName) {
            const confirmed = await showDeleteConfirm(`{{ 'admin.translation.delete_confirm_prefix'|trans }} "${itemName}"`);
            
            if (confirmed) {
                window.location.href = url;
            }
        }
    </script>
{% endblock %}