{% extends 'Admin/admin.html.twig' %}

{% block title %}Gestion des traductions{% endblock %}

{% block body %}
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">
            Traductions – {{ currentLang|upper }}
            {% if missingByType is defined and missingByType %}
                — <font color="red">
                    Traductions manquantes :
                    {% for t in types %}
                        {% set c = missingByType[t] ?? 0 %}
                        {{ c }} {{ t }}{% if not loop.last %}, {% endif %}
                    {% endfor %}
                </font>
            {% endif %}
        </h6>

        <div>
            <div class="btn-group" role="group">
                {% for lang in langs %}
                    <a href="{{ path('admin.translation.index', {'lang': lang, 'type': currentType, 'missing': onlyMissing ? 1 : 0}) }}"
                       class="btn btn-sm {% if lang == currentLang %}btn-primary{% else %}btn-outline-primary{% endif %}">
                        {{ lang|upper }}
                    </a>
                {% endfor %}
            </div>

            {% if types is defined and types|length > 1 %}
                <div class="btn-group ms-2" role="group">
                    {% for type in types %}
                        <a href="{{ path('admin.translation.index', {'lang': currentLang, 'type': type, 'missing': onlyMissing ? 1 : 0}) }}"
                           class="btn btn-sm {% if type == currentType %}btn-success{% else %}btn-outline-success{% endif %}">
                            {{ type|capitalize }}
                        </a>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

    <div class="card-body">

        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label }} mt-2">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}

        {% if not onlyMissing %}
            {{ knp_pagination_render(translations) }}
        {% endif %}

        <div class="mb-2 d-flex gap-2">
            {% if onlyMissing %}
                <a class="btn btn-sm btn-danger"
                   href="{{ path('admin.translation.index', {'lang': currentLang, 'type': currentType}) }}">
                    Afficher toutes les traductions (pagination)
                </a>
            {% else %}
                <a class="btn btn-sm btn-outline-danger"
                   href="{{ path('admin.translation.index', {'lang': currentLang, 'type': currentType, 'missing': 1}) }}">
                    Voir uniquement les traductions manquantes (sans pagination)
                </a>
            {% endif %}

            <button type="button"
                    id="toggle-false"
                    class="btn btn-sm btn-outline-secondary"
                    data-active="0">
                Masquer les faux positifs
            </button>
        </div>

        <form method="post" action="{{ path('admin.translation.save', {'lang': currentLang, 'type': currentType}) }}">
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead class="thead-light">
                        <tr>
                            <th width="400px">GUID</th>
                            <th width="200px">Champ</th>
                            <th width="800px">Texte EN</th>
                            <th width="140px">Faux positif</th>
                            <th>Traduction {{ currentLang|upper }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in translations %}
                            {% set isFalse = (row.flag_false ?? 0) == 1 %}
                            {% set isMissing = row.original is not null
                                and row.translation is not null
                                and row.translation == row.original
                                and (not isFalse) %}

                            <tr data-missing="{{ isMissing ? '1' : '0' }}"
                                data-false="{{ isFalse ? '1' : '0' }}">
                                <td>{{ row.Guid }}</td>
                                <td>{{ row.Field }}</td>
                                <td>{{ row.original }}</td>
                                <td class="text-center">
                                    <input type="checkbox"
                                           name="false_flags[{{ row.Guid }}][{{ row.Field }}]"
                                           value="1"
                                           {% if isFalse %}checked{% endif %} />
                                </td>
                                <td>
                                    <input type="text"
                                           name="translations[{{ row.Guid }}][{{ row.Field }}]"
                                           value="{{ row.translation }}"
                                           class="form-control form-control-sm" />
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <button type="submit" class="btn btn-success mt-3">Enregistrer les modifications</button>
        </form>

        <br />

        {% if not onlyMissing %}
            {{ knp_pagination_render(translations) }}
        {% endif %}
    </div>
</div>

<script>
(function () {
    const btnFalse = document.getElementById('toggle-false');
    if (!btnFalse) return;

    function applyFalseFilter() {
        const hideFalse = btnFalse.dataset.active === '1';
        const rows = document.querySelectorAll('tbody tr[data-false]');
        rows.forEach(row => {
            const isFalse = row.dataset.false === '1';
            row.style.display = (hideFalse && isFalse) ? 'none' : '';
        });
    }

    btnFalse.addEventListener('click', function () {
        const active = this.dataset.active === '1';
        this.dataset.active = active ? '0' : '1';

        this.classList.toggle('btn-outline-secondary', active);
        this.classList.toggle('btn-secondary', !active);

        this.textContent = active
            ? 'Masquer les faux positifs'
            : 'Afficher les faux positifs';

        applyFalseFilter();
    });

    applyFalseFilter();
})();
</script>
{% endblock %}