{% 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-2 {
            padding-left: 1.5rem;
        }
        .title-level-3 {
            padding-left: 2.8rem;
        }
    </style>
<div class="container mt-4">
    <h1>Comparaison Wiki OpenStreetMap - {{ key }}</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 %}
        <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">{{ en_page.sections }}</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">{{ fr_page.sections }}</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>

        {% if detailed_comparison and detailed_comparison.section_comparison %}
        <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">{{ en_page.sections }} sections</span>
                            </div>
                            <div class="card-body">
{#                                <h4>Sections communes ({{ detailed_comparison.section_comparison.common|length }})</h4>#}
{#                                <ul class="list-group mb-3">#}
{#                                    {% for section in detailed_comparison.section_comparison.common %}#}
{#                                        <li class="list-group-item">#}
{#                                            <span class="badge bg-secondary">h{{ section.en.level }}</span>#}
{#                                            {{ section.en.title }}#}
{#                                        </li>#}
{#                                    {% endfor %}#}
{#                                </ul>#}
                                
                                <h4>Sections uniquement en anglais ({{ detailed_comparison.section_comparison.en_only|length }})</h4>
                                <ul class="list-group">
                                    {% for section in detailed_comparison.section_comparison.en_only %}
                                        <li class="list-group-item list-group-item-warning title-level-{{ section.level  }}">
                                            <span class="badge bg-secondary">h{{ section.level }}</span>
                                            {{ section.title }}
                                        </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>Sections en français</h3>
                                <span class="badge bg-light text-dark">{{ fr_page.sections }} sections</span>
                            </div>
                            <div class="card-body">
{#                                <h4>Sections communes ({{ detailed_comparison.section_comparison.common|length }})</h4>#}
{#                                <ul class="list-group mb-3">#}
{#                                    {% for section in detailed_comparison.section_comparison.common %}#}
{#                                        <li class="list-group-item">#}
{#                                            <span class="badge bg-secondary">h{{ section.fr.level }}</span>#}
{#                                            {{ section.fr.title }}#}
{#                                        </li>#}
{#                                    {% endfor %}#}
{#                                </ul>#}
                                
                                <h4>Sections uniquement en français ({{ detailed_comparison.section_comparison.fr_only|length }})</h4>
                                <ul class="list-group">
                                    {% for section in detailed_comparison.section_comparison.fr_only %}
                                        <li class="list-group-item list-group-item-info title-level-{{ section.level  }}">
                                            <span class="badge bg-secondary">h{{ section.level }}</span>
                                            {{ section.title }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </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 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.en.src }}" class="card-img-top" alt="{{ media.en.alt }}" style="max-height: 150px; object-fit: contain;">#}
{#                                                <div class="card-body p-2">#}
{#                                                    <p class="card-text small">{{ media.en.alt }}</p>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                    {% endfor %}#}
{#                                </div>#}
                                
                                <h4>Images uniquement en anglais ({{ detailed_comparison.media_comparison.en_only|length }})</h4>
                                <div class="row">
                                    {% for media in detailed_comparison.media_comparison.en_only %}
                                        <div class="col-md-6 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 }})</h4>
                                <div class="row">
                                    {% for media in detailed_comparison.media_comparison.fr_only %}
                                        <div class="col-md-6 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>Liens communs ({{ detailed_comparison.link_comparison.common|length }})</h4>
                                <div class="table-responsive mb-3">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Texte</th>
                                                <th>URL</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for link in detailed_comparison.link_comparison.common|slice(0, 10) %}
                                                <tr>
                                                    <td>{{ link.en.text }}</td>
                                                    <td><a href="{{ link.en.href }}" target="_blank" class="small">{{ link.en.href|slice(0, 30) }}...</a></td>
                                                </tr>
                                            {% endfor %}
                                            {% if detailed_comparison.link_comparison.common|length > 10 %}
                                                <tr>
                                                    <td colspan="2" class="text-center">
                                                        <em>{{ detailed_comparison.link_comparison.common|length - 10 }} liens supplémentaires...</em>
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                                
                                <h4>Liens uniquement en anglais ({{ detailed_comparison.link_comparison.en_only|length }})</h4>
                                <div class="table-responsive">
                                    <table class="table table-sm table-warning">
                                        <thead>
                                            <tr>
                                                <th>Texte</th>
                                                <th>URL</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for link in detailed_comparison.link_comparison.en_only|slice(0, 10) %}
                                                <tr>
                                                    <td>{{ link.text }}</td>
                                                    <td><a href="{{ link.href }}" target="_blank" class="small">{{ link.href|slice(0, 30) }}...</a></td>
                                                </tr>
                                            {% endfor %}
                                            {% if detailed_comparison.link_comparison.en_only|length > 10 %}
                                                <tr>
                                                    <td colspan="2" class="text-center">
                                                        <em>{{ detailed_comparison.link_comparison.en_only|length - 10 }} liens supplémentaires...</em>
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-info text-white">
                                <h3>Liens en français</h3>
                                <span class="badge bg-light text-dark">{{ fr_page.link_count }} liens</span>
                            </div>
                            <div class="card-body">
                                <h4>Liens communs ({{ detailed_comparison.link_comparison.common|length }})</h4>
                                <div class="table-responsive mb-3">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Texte</th>
                                                <th>URL</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for link in detailed_comparison.link_comparison.common|slice(0, 10) %}
                                                <tr>
                                                    <td>{{ link.fr.text }}</td>
                                                    <td><a href="{{ link.fr.href }}" target="_blank" class="small">{{ link.fr.href|slice(0, 30) }}...</a></td>
                                                </tr>
                                            {% endfor %}
                                            {% if detailed_comparison.link_comparison.common|length > 10 %}
                                                <tr>
                                                    <td colspan="2" class="text-center">
                                                        <em>{{ detailed_comparison.link_comparison.common|length - 10 }} liens supplémentaires...</em>
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                                
                                <h4>Liens uniquement en français ({{ detailed_comparison.link_comparison.fr_only|length }})</h4>
                                <div class="table-responsive">
                                    <table class="table table-sm table-info">
                                        <thead>
                                            <tr>
                                                <th>Texte</th>
                                                <th>URL</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for link in detailed_comparison.link_comparison.fr_only|slice(0, 10) %}
                                                <tr>
                                                    <td>{{ link.text }}</td>
                                                    <td><a href="{{ link.href }}" target="_blank" class="small">{{ link.href|slice(0, 30) }}...</a></td>
                                                </tr>
                                            {% endfor %}
                                            {% if detailed_comparison.link_comparison.fr_only|length > 10 %}
                                                <tr>
                                                    <td colspan="2" class="text-center">
                                                        <em>{{ detailed_comparison.link_comparison.fr_only|length - 10 }} liens supplémentaires...</em>
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </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">{{ en_page.sections }}</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>

<!-- 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 %}
<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>
{% 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 %}
{% endblock %}