{% 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>
        
        <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>
            <iframe src="{{ french_edit_url }}" title="Édition française"></iframe>
        </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 %}