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

{% block title %}Comparaison Wiki OSM - {{ key }}{% endblock %}

{% block body %}
    <style>
        .card:hover {
            transform: none !important;
            box-shadow: none !important;
        }

        .title-level-1 {
            font-weight: bold;
        }

        .title-level-2 {
            padding-left: 1.5rem;
        }

        .title-level-3 {
            padding-left: 2.8rem;
        }

        .title-level-4 {
            padding-left: 4rem;
        }

        .title-level-5 {
            padding-left: 5.2rem;
        }

        .title-level-6 {
            padding-left: 6.4rem;
            font-size: 0.9rem;
        }
        
        /* Style for placeholder sections */
        .list-group-item-warning.title-level-2,
        .list-group-item-warning.title-level-3,
        .list-group-item-warning.title-level-4,
        .list-group-item-warning.title-level-5,
        .list-group-item-warning.title-level-6 {
            border-left: 4px solid #ffc107;
        }
        
        /* Make placeholder text more visible */
        .text-muted.fst-italic {
            color: #dc3545 !important;
            font-weight: 500;
        }
    </style>
    <div class="container mt-4">
        {% include 'admin/_wiki_navigation.html.twig' %}

        <h1>Comparaison Wiki OpenStreetMap - {{ key }}

            <a href="https://wiki.openstreetmap.org/FR:Key:{{ key }}">fr</a>
            <a href="https://wiki.openstreetmap.org/Key:{{ key }}">en</a>
        </h1>
        <p class="lead">Comparaison détaillée des pages wiki en français et en anglais pour la clé OSM "{{ key }}".</p>

        {% if fr_page is defined and fr_page is not null %}


        {% if detailed_comparison is defined and detailed_comparison is not null and detailed_comparison.grammar_suggestions is defined and detailed_comparison.grammar_suggestions is not null and detailed_comparison.grammar_suggestions|length > 0 %}
            <div class="card mb-4">
                <div class="card-header">
                    <h2>Suggestions de corrections grammaticales</h2>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <p><i class="bi bi-info-circle"></i> Ces suggestions sont générées automatiquement par l'outil Grammalecte et peuvent contenir des erreurs.</p>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Contexte</th>
                                    <th>Message</th>
                                    <th>Suggestions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for suggestion in detailed_comparison.grammar_suggestions %}
                                    <tr>
                                        <td>
                                            {% if suggestion.context is defined %}
                                                <code>{{ suggestion.context }}</code>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if suggestion.message is defined %}
                                                {{ suggestion.message }}
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if suggestion.suggestions is defined and suggestion.suggestions is iterable and suggestion.suggestions|length > 0 %}
                                                <ul class="list-unstyled mb-0">
                                                    {% for correction in suggestion.suggestions %}
                                                        <li><code>{{ correction }}</code></li>
                                                    {% endfor %}
                                                </ul>
                                            {% else %}
                                                <span class="text-muted">Aucune suggestion</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        {% endif %}

        {% if detailed_comparison is defined and detailed_comparison is not null and detailed_comparison.section_comparison is defined and detailed_comparison.section_comparison is not null %}
            <div class="card mb-4">
                <div class="card-header">
                    <h2>Comparaison des sections</h2>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header bg-primary text-white">
                                    <h3>Sections en anglais</h3>
                                    <span class="badge bg-light text-dark">
                                                        {% if detailed_comparison.adjusted_en_section_count is defined %}
                                                            {{ detailed_comparison.adjusted_en_section_count }} sections ({{ en_page.sections|default(0) }} avec "Contents")
                                                        {% else %}
                                                            {{ en_page.sections|default(0) }} sections
                                                        {% endif %}
                                                    </span>
                                </div>
                                <div class="card-body">
                                    <h4>Sections alignées par hiérarchie</h4>
                                    <ul class="list-group mb-3">
                                        {% if detailed_comparison.aligned_sections is defined and detailed_comparison.aligned_sections is iterable %}
                                            {% for section in detailed_comparison.aligned_sections %}
                                                {% if section.en is defined and section.en is not null %}
                                                    <li class="list-group-item title-level-{{ section.en.level|default(1) }}">
                                                        <span class="badge bg-secondary">h{{ section.en.level|default(1) }}</span>
                                                        {% if section.en.title is defined and section.en.title is not empty %}
                                                            {{ section.en.title }}
                                                        {% elseif section.en.is_placeholder is defined and section.en.is_placeholder %}
                                                            <span class="text-muted fst-italic">Section uniquement en français</span>
                                                        {% else %}
                                                            <span class="text-muted">Sans titre</span>
                                                        {% endif %}
                                                        
                                                        {% if detailed_comparison.en_hierarchy_errors is defined and loop.index0 in detailed_comparison.en_hierarchy_errors %}
                                                            <span class="badge bg-danger ms-2"
                                                                title="Hiérarchie incorrecte">!</span>
                                                        {% endif %}
                                                    </li>
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header bg-info text-white">
                                    <h3>Sections en français</h3>
                                    <span class="badge bg-light text-dark">
                                                        {% if detailed_comparison.adjusted_fr_section_count is defined %}
                                                            {{ detailed_comparison.adjusted_fr_section_count }} sections ({{ fr_page.sections|default(0) }} avec "Sommaire")
                                                        {% else %}
                                                            {{ fr_page.sections|default(0) }} sections
                                                        {% endif %}
                                                    </span>
                                </div>
                                <div class="card-body">
                                    <h4>Sections alignées par hiérarchie</h4>
                                    <ul class="list-group mb-3">
                                        {% if detailed_comparison.aligned_sections is defined and detailed_comparison.aligned_sections is iterable %}
                                            {% for section in detailed_comparison.aligned_sections %}
                                                {% if section.fr is defined and section.fr is not null %}
                                                    <li class="list-group-item title-level-{{ section.fr.level|default(1) }} {% if section.fr.is_placeholder is defined and section.fr.is_placeholder %}list-group-item-warning{% endif %}">
                                                        <span class="badge bg-secondary">h{{ section.fr.level|default(1) }}</span>
                                                        {% if section.fr.title is defined and section.fr.title is not empty %}
                                                            {{ section.fr.title }}
                                                        {% elseif section.fr.is_placeholder is defined and section.fr.is_placeholder %}
                                                            <span class="text-muted fst-italic">Section manquante à traduire</span>
                                                        {% else %}
                                                            <span class="text-muted">Sans titre</span>
                                                        {% endif %}
                                                        
                                                        {% if detailed_comparison.fr_hierarchy_errors is defined and loop.index0 in detailed_comparison.fr_hierarchy_errors %}
                                                            <span class="badge bg-danger ms-2"
                                                                title="Hiérarchie incorrecte">!</span>
                                                        {% endif %}
                                                    </li>
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        {% if detailed_comparison is defined and detailed_comparison is not null and detailed_comparison.section_comparison is defined and detailed_comparison.section_comparison is not null %}
                            <button class="btn btn-outline-secondary copy-btn" data-content="different-sections">
                                <i class="bi bi-clipboard"></i> Copier les titres de sections différentes
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endif %}

        {#        {% if detailed_comparison and detailed_comparison.media_comparison %} #}
        {#            <div class="card mb-4"> #}
        {#                <div class="card-header"> #}
        {#                    <h2>Comparaison des médias</h2> #}
        {#                </div> #}
        {#                <div class="card-body"> #}
        {#                    <div class="row"> #}
        {#                        <div class="col-md-6"> #}
        {#                            <div class="card h-100"> #}
        {#                                <div class="card-header bg-primary text-white"> #}
        {#                                    <h3>Images en anglais</h3> #}
        {#                                    <span class="badge bg-light text-dark">{{ en_page.media_count|default(0) }} images</span> #}
        {#                                </div> #}
        {#                                <div class="card-body"> #}

        {#                                    <h4>Images uniquement en anglais #}
        {#                                        ({{ detailed_comparison.media_comparison.en_only|length }} uniques #}
        {#                                        sur {{ detailed_comparison.media_comparison.en_only_count }} total)</h4> #}
        {#                                    <div class="row"> #}
        {#                                        {% for media in detailed_comparison.media_comparison.en_only %} #}
        {#                                            <div class="col-12 mb-2"> #}
        {#                                                <div class="card border-warning"> #}
        {#                                                    <img src="{{ media.src }}" class="card-img-top" #}
        {#                                                         alt="{{ media.alt }}" #}
        {#                                                         style="max-height: 150px; object-fit: contain;"> #}
        {#                                                    <div class="card-body p-2"> #}
        {#                                                        <p class="card-text small">{{ media.alt }}</p> #}
        {#                                                    </div> #}
        {#                                                </div> #}
        {#                                            </div> #}
        {#                                        {% endfor %} #}
        {#                                    </div> #}
        {#                                </div> #}
        {#                            </div> #}
        {#                        </div> #}
        {#                        <div class="col-md-6"> #}
        {#                            <div class="card h-100"> #}
        {#                                <div class="card-header bg-info text-white"> #}
        {#                                    <h3>Images en français</h3> #}
        {#                                    <span class="badge bg-light text-dark">{{ fr_page.media_count|default(0) }} images</span> #}
        {#                                </div> #}
        {#                                <div class="card-body"> #}
        {#                                    <h4>Images communes ({{ detailed_comparison.media_comparison.common|length }})</h4> #}
        {#                                    <div class="row mb-3"> #}
        {#                                        {% for media in detailed_comparison.media_comparison.common %} #}
        {#                                            <div class="col-md-6 mb-2"> #}
        {#                                                <div class="card"> #}
        {#                                                    <img src="{{ media.fr.src }}" class="card-img-top" #}
        {#                                                         alt="{{ media.fr.alt }}" #}
        {#                                                         style="max-height: 150px; object-fit: contain;"> #}
        {#                                                    <div class="card-body p-2"> #}
        {#                                                        <p class="card-text small">{{ media.fr.alt }}</p> #}
        {#                                                    </div> #}
        {#                                                </div> #}
        {#                                            </div> #}
        {#                                        {% endfor %} #}
        {#                                    </div> #}

        {#                                    <h4>Images uniquement en français #}
        {#                                        ({{ detailed_comparison.media_comparison.fr_only|length }} uniques #}
        {#                                        sur {{ detailed_comparison.media_comparison.fr_only_count }} total)</h4> #}
        {#                                    <div class="row"> #}
        {#                                        {% for media in detailed_comparison.media_comparison.fr_only %} #}
        {#                                            <div class="col-12 mb-2"> #}
        {#                                                <div class="card border-info"> #}
        {#                                                    <img src="{{ media.src }}" class="card-img-top" #}
        {#                                                         alt="{{ media.alt }}" #}
        {#                                                         style="max-height: 150px; object-fit: contain;"> #}
        {#                                                    <div class="card-body p-2"> #}
        {#                                                        <p class="card-text small">{{ media.alt }}</p> #}
        {#                                                    </div> #}
        {#                                                </div> #}
        {#                                            </div> #}
        {#                                        {% endfor %} #}
        {#                                    </div> #}
        {#                                </div> #}
        {#                            </div> #}
        {#                        </div> #}
        {#                    </div> #}
        {#                </div> #}
        {#            </div> #}
        {#        {% endif %} #}

        {#            {% if detailed_comparison and detailed_comparison.link_comparison %} #}
        {#                <div class="card mb-4"> #}
        {#                    <div class="card-header"> #}
        {#                        <h2>Comparaison des liens</h2> #}
        {#                    </div> #}
        {#                    <div class="card-body"> #}
        {#                        <div class="row"> #}
        {#                            <div class="col-md-6"> #}
        {#                                <div class="card h-100"> #}
        {#                                    <div class="card-header bg-primary text-white"> #}
        {#                                        <h3>Liens en anglais</h3> #}
        {#                                        <span class="badge bg-light text-dark">{{ en_page.link_count }} liens</span> #}
        {#                                    </div> #}
        {#                                    <div class="card-body"> #}


        {#                                        <h4>Comparaison des liens côte à côte</h4> #}
        {#                                        <div class="table-responsive"> #}
        {#                                            <table class="table table-sm"> #}
        {#                                                <thead> #}
        {#                                                <tr> #}
        {#                                                    <th class="bg-primary text-white">Texte EN</th> #}
        {#                                                    <th class="bg-primary text-white">URL EN</th> #}
        {#                                                    <th class="bg-info text-white">Texte FR</th> #}
        {#                                                    <th class="bg-info text-white">URL FR</th> #}
        {#                                                </tr> #}
        {#                                                </thead> #}
        {#                                                <tbody> #}
        {#                                                {% set en_links = detailed_comparison.link_comparison.en_only %} #}
        {#                                                {% set fr_links = detailed_comparison.link_comparison.fr_only %} #}
        {#                                                {% set max_links = max(en_links|length, fr_links|length) %} #}

        {#                                                {% for i in 0..(max_links - 1) %} #}
        {#                                                    <tr> #}
        {#                                                        {% if i < en_links|length %} #}
        {#                                                            <td class="bg-light">{{ en_links[i].text }}</td> #}
        {#                                                            <td class="bg-light"><a href="{{ en_links[i].href }}" #}
        {#                                                                                    target="_blank" #}
        {#                                                                                    class="small">{{ en_links[i].href|slice(0, 30) }} #}
        {#                                                                    ...</a></td> #}
        {#                                                        {% else %} #}
        {#                                                            <td class="bg-light"></td> #}
        {#                                                            <td class="bg-light"></td> #}
        {#                                                        {% endif %} #}

        {#                                                        {% if i < fr_links|length %} #}
        {#                                                            <td>{{ fr_links[i].text }}</td> #}
        {#                                                            <td><a href="{{ fr_links[i].href }}" target="_blank" #}
        {#                                                                   class="small">{{ fr_links[i].href|slice(0, 30) }} #}
        {#                                                                    ...</a></td> #}
        {#                                                        {% else %} #}
        {#                                                            <td></td> #}
        {#                                                            <td></td> #}
        {#                                                        {% endif %} #}
        {#                                                    </tr> #}
        {#                                                {% endfor %} #}
        {#                                                </tbody> #}
        {#                                            </table> #}
        {#                                        </div> #}
        {#                                    </div> #}
        {#                                </div> #}
        {#                            </div> #}
        {#                        </div> #}
        {#                    </div> #}
        {#                </div> #}
        {#            {% endif %} #}

        {#            {% if detailed_comparison and detailed_comparison.category_comparison %} #}
        {#                <div class="card mb-4"> #}
        {#                    <div class="card-header"> #}
        {#                        <h2>Comparaison des catégories</h2> #}
        {#                    </div> #}
        {#                    <div class="card-body"> #}
        {#                        <div class="row"> #}
        {#                            <div class="col-md-6"> #}
        {#                                <div class="card h-100"> #}
        {#                                    <div class="card-header bg-primary text-white"> #}
        {#                                        <h3>Catégories en anglais</h3> #}
        {#                                        <span class="badge bg-light text-dark"> #}
        {#                                            {{ (detailed_comparison.category_comparison.en_only|length + detailed_comparison.category_comparison.common|length) }} catégories #}
        {#                                        </span> #}
        {#                                    </div> #}
        {#                                    <div class="card-body"> #}
        {#                                        <h4>Catégories communes #}
        {#                                            ({{ detailed_comparison.category_comparison.common|length }})</h4> #}
        {#                                        <ul class="list-group mb-3"> #}
        {#                                            {% for category in detailed_comparison.category_comparison.common %} #}
        {#                                                <li class="list-group-item">{{ category }}</li> #}
        {#                                            {% endfor %} #}
        {#                                        </ul> #}

        {#                                        <h4>Catégories uniquement en anglais #}
        {#                                            ({{ detailed_comparison.category_comparison.en_only|length }})</h4> #}
        {#                                        <ul class="list-group"> #}
        {#                                            {% for category in detailed_comparison.category_comparison.en_only %} #}
        {#                                                <li class="list-group-item list-group-item-warning">{{ category }}</li> #}
        {#                                            {% endfor %} #}
        {#                                        </ul> #}
        {#                                    </div> #}
        {#                                </div> #}
        {#                            </div> #}
        {#                            <div class="col-md-6"> #}
        {#                                <div class="card h-100"> #}
        {#                                    <div class="card-header bg-info text-white"> #}
        {#                                        <h3>Catégories en français</h3> #}
        {#                                        <span class="badge bg-light text-dark"> #}
        {#                                            {{ (detailed_comparison.category_comparison.fr_only|length + detailed_comparison.category_comparison.common|length) }} catégories #}
        {#                                        </span> #}
        {#                                    </div> #}
        {#                                    <div class="card-body"> #}
        {#                                        <h4>Catégories communes #}
        {#                                            ({{ detailed_comparison.category_comparison.common|length }})</h4> #}
        {#                                        <ul class="list-group mb-3"> #}
        {#                                            {% for category in detailed_comparison.category_comparison.common %} #}
        {#                                                <li class="list-group-item">{{ category }}</li> #}
        {#                                            {% endfor %} #}
        {#                                        </ul> #}

        {#                                        <h4>Catégories uniquement en français #}
        {#                                            ({{ detailed_comparison.category_comparison.fr_only|length }})</h4> #}
        {#                                        <ul class="list-group"> #}
        {#                                            {% for category in detailed_comparison.category_comparison.fr_only %} #}
        {#                                                <li class="list-group-item list-group-item-info">{{ category }}</li> #}
        {#                                            {% endfor %} #}
        {#                                        </ul> #}
        {#                                    </div> #}
        {#                                </div> #}
        {#                            </div> #}
        {#                        </div> #}
        {#                    </div> #}
        {#                </div> #}
        {#            {% endif %} #}
        {#    {% else %} #}
        {#        <div class="card mb-4"> #}
        {#            <div class="card-header bg-warning text-dark"> #}
        {#                <h2>Traduction française manquante</h2> #}
        {#            </div> #}
        {#                <div class="card-body"> #}
        {#                    <div class="alert alert-warning"> #}
        {#                        <p><i class="bi bi-exclamation-triangle"></i> <strong>La page wiki pour la clé "{{ key }}" #}
        {#                                n'existe pas en français.</strong></p> #}
        {#                        <p>Vous pouvez contribuer en créant cette page sur le wiki OpenStreetMap.</p> #}
        {#                    </div> #}

        {#                    <div class="row"> #}
        {#                        <div class="col-md-6"> #}
        {#                            <div class="card h-100"> #}
        {#                                <div class="card-header bg-primary text-white"> #}
        {#                                    <h3>Version anglaise</h3> #}
        {#                                    <p class="mb-0"> #}
        {#                                        <small>Dernière modification: {{ en_page.last_modified }}</small> #}
        {#                                    </p> #}
        {#                                </div> #}
        {#                                <div class="card-body"> #}
        {#                                    <ul class="list-group mb-3"> #}
        {#                                        <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                            Sections #}
        {#                                            <span class="badge bg-primary rounded-pill"> #}
        {#                                                {% if detailed_comparison.adjusted_en_section_count is defined %} #}
        {#                                                    {{ detailed_comparison.adjusted_en_section_count }} #}
        {#                                                {% else %} #}
        {#                                                    {{ en_page.sections }} #}
        {#                                                {% endif %} #}
        {#                                            </span> #}
        {#                                        </li> #}
        {#                                        <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                            Mots #}
        {#                                            <span class="badge bg-primary rounded-pill">{{ en_page.word_count }}</span> #}
        {#                                        </li> #}
        {#                                        <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                            Liens #}
        {#                                            <span class="badge bg-primary rounded-pill">{{ en_page.link_count }}</span> #}
        {#                                        </li> #}
        {#                                    </ul> #}
        {#                                    <div class="d-grid gap-2"> #}
        {#                                        <a href="{{ en_page.url }}" target="_blank" class="btn btn-outline-primary"> #}
        {#                                            <i class="bi bi-box-arrow-up-right"></i> Voir la page anglaise #}
        {#                                        </a> #}
        {#                                        <button class="btn btn-outline-secondary copy-btn" data-content="sections-en"> #}
        {#                                            <i class="bi bi-clipboard"></i> Copier la liste des sections #}
        {#                                        </button> #}
        {#                                        <button class="btn btn-outline-secondary copy-btn" data-content="links-en"> #}
        {#                                            <i class="bi bi-clipboard"></i> Copier la liste des liens #}
        {#                                        </button> #}
        {#                                    </div> #}
        {#                                </div> #}
        {#                            </div> #}
        {#                        </div> #}
        {#                        <div class="col-md-6"> #}
        {#                            <div class="card h-100"> #}
        {#                                <div class="card-header bg-info text-white"> #}
        {#                                    <h3>Créer la version française</h3> #}
        {#                                </div> #}
        {#                                <div class="card-body"> #}
        {#                                    <p>Vous pouvez créer la page française en suivant ces étapes :</p> #}
        {#                                    <ol> #}
        {#                                        <li>Consultez la version anglaise pour comprendre le contenu</li> #}
        {#                                        <li>Créez une nouvelle page avec le préfixe "FR:" sur le wiki OSM</li> #}
        {#                                        <li>Traduisez le contenu en respectant la structure de la page anglaise</li> #}
        {#                                        <li>Ajoutez des exemples pertinents pour le contexte français</li> #}
        {#                                    </ol> #}
        {#                                    <div class="d-grid gap-2 mt-4"> #}
        {#                                        <a href="{{ create_fr_url }}" target="_blank" class="btn btn-success"> #}
        {#                                            <i class="bi bi-plus-circle"></i> Créer la page française #}
        {#                                        </a> #}
        {#                                    </div> #}
        {#                                </div> #}
        {#                            </div> #}
        {#                        </div> #}
        {#                    </div> #}
        {#                </div> #}
        {#        </div> #}
        {#    {% endif %} #}


        {#    <div class="card mb-4"> #}
        {#        <div class="card-header"> #}
        {#            <h2>Score de décrépitude</h2> #}
        {#        </div> #}
        {#        <div class="card-body"> #}
        {#            <p>Le score de décrépitude est calculé en prenant en compte plusieurs facteurs, avec une pondération #}
        {#                plus importante pour la différence de nombre de mots :</p> #}

        {#            <div class="table-responsive"> #}
        {#                <table class="table table-striped"> #}
        {#                    <thead> #}
        {#                    <tr> #}
        {#                        <th>Facteur</th> #}
        {#                        <th>Valeur</th> #}
        {#                        <th>Poids</th> #}
        {#                        <th>Contribution</th> #}
        {#                    </tr> #}
        {#                    </thead> #}
        {#                    <tbody> #}
        {#                    {% for key, component in score_components %} #}
        {#                        <tr> #}
        {#                            <td>{{ component.description }}</td> #}
        {#                            <td>{{ component.value }}</td> #}
        {#                            <td>{{ component.weight * 100 }}%</td> #}
        {#                            <td>{{ component.component|round(2) }}</td> #}
        {#                        </tr> #}
        {#                    {% endfor %} #}
        {#                    <tr class="table-dark"> #}
        {#                        <td colspan="3"><strong>Score total</strong></td> #}
        {#                        <td> #}
        {#                            {% set total_score = 0 %} #}
        {#                            {% for key, component in score_components %} #}
        {#                                {% set total_score = total_score + component.component %} #}
        {#                            {% endfor %} #}
        {#                            <strong>{{ total_score|round(2) }}</strong> #}
        {#                        </td> #}
        {#                    </tr> #}
        {#                    </tbody> #}
        {#                </table> #}
        {#            </div> #}

        {#            <div class="alert alert-info"> #}
        {#                <p><strong>Comment interpréter ce score :</strong></p> #}
        {#                <ul> #}
        {#                    <li>Plus le score est élevé, plus la page française est considérée comme "décrépite" par rapport #}
        {#                        à la version anglaise. #}
        {#                    </li> #}
        {#                    <li>La différence de nombre de mots compte pour 50% du score, car c'est l'indicateur le plus #}
        {#                        important de la complétude de la traduction. #}
        {#                    </li> #}
        {#                    <li>Les différences de sections (15%), de liens (15%) et de date de modification (20%) #}
        {#                        complètent le score. #}
        {#                    </li> #}
        {#                </ul> #}
        {#            </div> #}
        {#        </div> #}
        {#    </div> #}

        {#    <div class="mt-3"> #}
        {#        <a href="{{ path('app_admin_wiki') }}" class="btn btn-secondary"> #}
        {#            <i class="bi bi-arrow-left"></i> Retour à la liste des pages wiki #}
        {#        </a> #}
        {#    </div> #}
        {#    <div class="card mb-4"> #}
        {#        <div class="card-header"> #}
        {#            <h2>Comparaison des versions</h2> #}
        {#        </div> #}
        {#        <div class="card-body"> #}
        {#            <div class="row"> #}
        {#                <div class="col-md-6"> #}
        {#                    <div class="card h-100"> #}
        {#                        <div class="card-header bg-primary text-white"> #}
        {#                            <h3>Version anglaise</h3> #}
        {#                            <p class="mb-0"> #}
        {#                                <small>Dernière modification: {{ en_page.last_modified }}</small> #}
        {#                            </p> #}
        {#                        </div> #}
        {#                        <div class="card-body"> #}
        {#                            <ul class="list-group mb-3"> #}
        {#                                <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                    Sections #}
        {#                                    <span class="badge bg-primary rounded-pill"> #}
        {#                                            {% if detailed_comparison.adjusted_en_section_count is defined %} #}
        {#                                                {{ detailed_comparison.adjusted_en_section_count }} #}
        {#                                            {% else %} #}
        {#                                                {{ en_page.sections }} #}
        {#                                            {% endif %} #}
        {#                                        </span> #}
        {#                                </li> #}
        {#                                <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                    Mots #}
        {#                                    <span class="badge bg-primary rounded-pill">{{ en_page.word_count }}</span> #}
        {#                                </li> #}
        {#                                <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                    Liens #}
        {#                                    <span class="badge bg-primary rounded-pill">{{ en_page.link_count }}</span> #}
        {#                                </li> #}
        {#                            </ul> #}
        {#                            <div class="d-grid gap-2"> #}
        {#                                <a href="{{ en_page.url }}" target="_blank" class="btn btn-outline-primary"> #}
        {#                                    <i class="bi bi-box-arrow-up-right"></i> Voir la page #}
        {#                                </a> #}
        {#                                <button class="btn btn-outline-secondary copy-btn" data-content="sections-en"> #}
        {#                                    <i class="bi bi-clipboard"></i> Copier la liste des sections #}
        {#                                </button> #}
        {#                                <button class="btn btn-outline-secondary copy-btn" data-content="links-en"> #}
        {#                                    <i class="bi bi-clipboard"></i> Copier la liste des liens #}
        {#                                </button> #}
        {#                            </div> #}
        {#                        </div> #}
        {#                    </div> #}
        {#                </div> #}
        {#                <div class="col-md-6"> #}
        {#                    <div class="card h-100"> #}
        {#                        <div class="card-header bg-info text-white"> #}
        {#                            <h3>Version française</h3> #}
        {#                            <p class="mb-0"> #}
        {#                                <small>Dernière modification: {{ fr_page.last_modified }}</small> #}
        {#                            </p> #}
        {#                        </div> #}
        {#                        <div class="card-body"> #}
        {#                            <ul class="list-group mb-3"> #}
        {#                                <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                    Sections #}
        {#                                    <span class="badge bg-info rounded-pill"> #}
        {#                                            {% if detailed_comparison.adjusted_fr_section_count is defined %} #}
        {#                                                {{ detailed_comparison.adjusted_fr_section_count }} #}
        {#                                            {% else %} #}
        {#                                                {{ fr_page.sections }} #}
        {#                                            {% endif %} #}
        {#                                        </span> #}
        {#                                </li> #}
        {#                                <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                    Mots #}
        {#                                    <span class="badge bg-info rounded-pill">{{ fr_page.word_count }}</span> #}
        {#                                </li> #}
        {#                                <li class="list-group-item d-flex justify-content-between align-items-center"> #}
        {#                                    Liens #}
        {#                                    <span class="badge bg-info rounded-pill">{{ fr_page.link_count }}</span> #}
        {#                                </li> #}
        {#                            </ul> #}
        {#                            <div class="d-grid gap-2"> #}
        {#                                <a href="{{ fr_page.url }}" target="_blank" class="btn btn-outline-info"> #}
        {#                                    <i class="bi bi-box-arrow-up-right"></i> Voir la page #}
        {#                                </a> #}
        {#                                <button class="btn btn-outline-secondary copy-btn" data-content="sections-fr"> #}
        {#                                    <i class="bi bi-clipboard"></i> Copier la liste des sections #}
        {#                                </button> #}
        {#                                <button class="btn btn-outline-secondary copy-btn" data-content="links-fr"> #}
        {#                                    <i class="bi bi-clipboard"></i> Copier la liste des liens #}
        {#                                </button> #}
        {#                            </div> #}
        {#                        </div> #}
        {#                    </div> #}
        {#                </div> #}
        {#            </div> #}
        {#        </div> #}
        {#    </div> #}
    </div>

    <!-- Hidden content for copy functionality -->
    <div id="sections-en" style="display: none;">
        {{ en_sections|default('Sections de la page anglaise pour ' ~ key) }}
    </div>
    <div id="links-en" style="display: none;">
        {{ en_links|default('Liens de la page anglaise pour ' ~ key) }}
    </div>
    {% if fr_page is defined and fr_page is not null %}
        <div id="sections-fr" style="display: none;">
            {{ fr_sections|default('Sections de la page française pour ' ~ key) }}
        </div>
        <div id="links-fr" style="display: none;">
            {{ fr_links|default('Liens de la page française pour ' ~ key) }}
        </div>
        <div id="different-sections" style="display: none;">
            {% if detailed_comparison is defined and detailed_comparison is not null and detailed_comparison.aligned_sections is defined and detailed_comparison.aligned_sections is iterable %}
                {# Add sections that are in English but missing in French #}
                {% for section in detailed_comparison.aligned_sections %}
                    {% if section.en is defined and section.en.title is defined and section.en.title is not empty and section.fr is defined and section.fr.is_placeholder is defined and section.fr.is_placeholder %}
                        {{ "=" | repeat(section.en.level|default(1)) }} {{ section.en.title }} {{ "=" | repeat(section.en.level|default(1)) }} (À traduire en français)
                    {% endif %}
                {% endfor %}
                
                {# Add sections that are in French but missing in English #}
                {% for section in detailed_comparison.aligned_sections %}
                    {% if section.fr is defined and section.fr.title is defined and section.fr.title is not empty and section.en is defined and section.en.is_placeholder is defined and section.en.is_placeholder %}
                        {{ "=" | repeat(section.fr.level|default(1)) }} {{ section.fr.title }} {{ "=" | repeat(section.fr.level|default(1)) }} (FR only)
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>
    {% endif %}

    {% block javascripts %}
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Add click event listeners to all copy buttons
                document.querySelectorAll('.copy-btn').forEach(function (button) {
                    button.addEventListener('click', function () {
                        // Get the content to copy
                        const contentId = this.getAttribute('data-content');
                        const content = document.getElementById(contentId).textContent;

                        // Copy to clipboard
                        navigator.clipboard.writeText(content).then(function () {
                            // Change button text temporarily to indicate success
                            const originalText = button.innerHTML;
                            button.innerHTML = '<i class="bi bi-check"></i> Copié!';
                            setTimeout(function () {
                                button.innerHTML = originalText;
                            }, 2000);
                        }).catch(function (err) {
                            console.error('Erreur lors de la copie :', err);
                            // alert('Erreur lors de la copie. Veuillez réessayer.');
                        });
                    });
                });
            });
        </script>
    {% endblock %}
    {% endif %}
{% endblock %}