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

{% block title %}Créer une traduction française pour {{ key }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .iframe-container {
            display: flex;
            flex-direction: row;
            height: calc(100vh - 200px);
            min-height: 600px;
            margin-bottom: 20px;
        }
        
        .iframe-container iframe {
            flex: 1;
            border: 1px solid #dee2e6;
            height: 100%;
        }
        
        .iframe-container .iframe-separator {
            width: 10px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .iframe-container .iframe-separator::after {
            content: "⟺";
            font-size: 20px;
            color: #6c757d;
        }
        
        .iframe-header {
            background-color: #f8f9fa;
            padding: 10px;
            border: 1px solid #dee2e6;
            border-bottom: none;
            font-weight: bold;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .iframe-container {
                flex-direction: column;
                height: auto;
            }
            
            .iframe-container iframe {
                height: 500px;
            }
            
            .iframe-container .iframe-separator {
                height: 10px;
                width: 100%;
            }
            
            .iframe-container .iframe-separator::after {
                content: "⟻⟼";
            }
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container-fluid mt-4">
        {% include 'admin/_wiki_navigation.html.twig' %}
        
        <h1>Créer une traduction française pour "{{ key }}"</h1>
        <p class="lead">Utilisez cette page pour traduire la page wiki en français. La page anglaise est affichée à gauche pour référence, et le formulaire d'édition de la page française est à droite.</p>
        
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> Conseils pour la traduction :
            <ul>
                <li>Conservez la structure de la page anglaise (sections, sous-sections, etc.)</li>
                <li>Traduisez le contenu en français en adaptant les exemples au contexte français si nécessaire</li>
                <li>N'hésitez pas à consulter d'autres pages françaises pour vous inspirer du style et de la terminologie</li>
            </ul>
        </div>
        
        {% if english_html or french_html %}
        <div class="card mb-4">
            <div class="card-header">
                <h2>Contenu HTML des pages</h2>
                <p class="mb-0">Vous pouvez consulter le contenu HTML des pages ci-dessous pour faciliter la traduction.</p>
            </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">
                                <i class="bi bi-flag-fill"></i> Contenu HTML de la version anglaise
                            </div>
                            <div class="card-body">
                                <div style="max-height: 500px; overflow-y: auto; font-family: monospace; font-size: 0.8rem; white-space: pre-wrap;">
                                    {{ english_html|raw }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-info text-white">
                                <i class="bi bi-translate"></i> Contenu HTML de la version française
                            </div>
                            <div class="card-body">
                                <div style="max-height: 500px; overflow-y: auto; font-family: monospace; font-size: 0.8rem; white-space: pre-wrap;">
                                    {% if french_html %}
                                        {{ french_html|raw }}
                                    {% else %}
                                        <div class="alert alert-warning">
                                            <i class="bi bi-exclamation-triangle"></i> La page française n'existe pas encore.
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        
        <div class="row">
            <div class="col-md-6">
                <div class="iframe-header">
                    <i class="bi bi-flag-fill"></i> Version anglaise (référence)
                </div>
            </div>
            <div class="col-md-6">
                <div class="iframe-header">
                    <i class="bi bi-translate"></i> <a href="{{ french_edit_url }}">Création de la version française</a>
                </div>
            </div>
        </div>
        
        <div class="iframe-container">
            <iframe src="{{ english_url }}" title="Version anglaise"></iframe>
            <div class="iframe-separator"></div>
            {% if french_cache_exists and french_html %}
                <div style="flex: 1; border: 1px solid #dee2e6; height: 100%; overflow: auto; padding: 15px;">
                    <div class="alert alert-info mb-3">
                        <i class="bi bi-info-circle"></i> Version française en cache :
                    </div>
                    {{ french_html|raw }}
                </div>
            {% else %}
                {% if french_html %}
                    <iframe src="{{ french_edit_url }}" title="Édition française"></iframe>
                {% else %}
                    <div style="flex: 1; border: 1px solid #dee2e6; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f8f9fa;">
                        <div class="alert alert-warning" style="max-width: 80%;">
                            <i class="bi bi-exclamation-triangle"></i> La page française n'existe pas dans le cache.
                            <p class="mt-2 mb-0">Utilisez le formulaire d'édition pour créer la traduction.</p>
                        </div>
                    </div>
                {% endif %}
            {% endif %}
        </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>
            <a href="{{ english_url }}" target="_blank" class="btn btn-outline-primary">
                <i class="bi bi-box-arrow-up-right"></i> Ouvrir la version anglaise dans un nouvel onglet
            </a>
            <a href="{{ french_edit_url }}" target="_blank" class="btn btn-outline-info">
                <i class="bi bi-box-arrow-up-right"></i> Ouvrir l'éditeur français dans un nouvel onglet
            </a>
        </div>
    </div>
{% endblock %}