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

{% block title %}Suggestion de page Wiki à améliorer{% endblock %}

{% block body %}
    <div class="container mt-4">
        {% include 'admin/_wiki_navigation.html.twig' %}

        <h1>Suggestion de page Wiki à améliorer</h1>
        <p class="lead">Voici une page wiki qui a besoin d'être améliorée.</p>

        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h2>{{ page.key }}</h2>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <h3>Raisons d'amélioration</h3>
                    <p>{{ page.reason }}</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: {{ page.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">{{ page.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">{{ page.en_page.word_count|default(0) }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        Liens
                                        <span class="badge bg-primary rounded-pill">{{ page.en_page.link_count|default(0) }}</span>
                                    </li>
                                </ul>
                                <div class="d-grid gap-2">
                                    <a href="{{ page.en_page.url }}" target="_blank" class="btn btn-outline-primary">
                                        <i class="bi bi-box-arrow-up-right"></i> Voir la page anglaise
                                    </a>
                                </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>
                                {% if page.fr_page %}
                                    <p class="mb-0">
                                        <small>Dernière modification: {{ page.fr_page.last_modified }}</small>
                                    </p>
                                {% else %}
                                    <p class="mb-0">
                                        <small>Page non existante</small>
                                    </p>
                                {% endif %}
                            </div>
                            <div class="card-body">
                                {% if page.fr_page %}
                                    <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">{{ page.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">{{ page.fr_page.word_count|default(0) }}</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            Liens
                                            <span class="badge bg-info rounded-pill">{{ page.fr_page.link_count|default(0) }}</span>
                                        </li>
                                    </ul>
                                    <div class="d-grid gap-2">
                                        <a href="{{ page.fr_page.url }}" target="_blank" class="btn btn-outline-info">
                                            <i class="bi bi-box-arrow-up-right"></i> Voir la page française
                                        </a>
                                    </div>
                                {% else %}
                                    <div class="alert alert-warning">
                                        <p><i class="bi bi-exclamation-triangle"></i> <strong>La page wiki pour la clé
                                                "{{ page.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="d-grid gap-2">
                                        <a href="https://wiki.openstreetmap.org/w/index.php?title=FR:Key:{{ page.key }}&action=edit"
                                           target="_blank" class="btn btn-success">
                                            <i class="bi bi-plus-circle"></i> Créer la page française
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 d-grid gap-2">
                    <a href="{{ path('app_admin_wiki_compare', {'key': page.key}) }}" class="btn btn-primary">
                        <i class="bi bi-arrows-angle-expand"></i> Voir la comparaison détaillée
                    </a>
                    <a href="{{ path('app_admin_wiki_random_suggestion') }}" class="btn btn-secondary">
                        <i class="bi bi-shuffle"></i> Autre suggestion aléatoire
                    </a>
                </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>
{% endblock %}