{{ form_start(form) }}
    <div class="row">
        {# Colonne de Gauche : Contenu principal #}
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Contenu de l'article</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        {{ form_label(form.titre) }}
                        {{ form_widget(form.titre) }}
                        {{ form_errors(form.titre) }}
                    </div>

                    <div class="mb-3">
                        {{ form_label(form.petiteDescription) }}
                        {{ form_widget(form.petiteDescription) }}
                        <small class="text-muted">Apparaît sur la liste des actualités.</small>
                    </div>

                    <div class="mb-3">
                        {{ form_label(form.contenu) }}
                        {# On ajoute une classe 'js-wysiwyg' pour l'initialisation JS #}
                        {{ form_widget(form.contenu, {'attr': {'class': 'js-wysiwyg'}}) }}
                        {{ form_errors(form.contenu) }}
                    </div>
                </div>
            </div>

            {# Section SEO #}
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-light">
                    <h6 class="m-0 font-weight-bold text-secondary"><i class="fas fa-search mr-2"></i>Référencement (SEO)</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        {{ form_row(form.seoTitre) }}
                    </div>
                    <div class="mb-3">
                        {{ form_row(form.seoKeywords) }}
                    </div>
                    <div class="mb-3">
                        {{ form_row(form.seoDescription) }}
                    </div>
                </div>
            </div>
        </div>

        {# Colonne de Droite : Paramètres et Image #}
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Publication & Visuel</h6>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        {{ form_label(form.imageFile) }}
                        {{ form_widget(form.imageFile) }}
                        {{ form_errors(form.imageFile) }}
                    </div>

                    <hr>

                    <div class="mb-3">
                        {{ form_label(form.dates) }}
                        {{ form_widget(form.dates) }}
                    </div>

                    <div class="form-check form-switch mb-4">
                        {{ form_widget(form.active) }}
                        {{ form_label(form.active) }}
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg shadow-sm">
                            <i class="fas fa-save mr-2"></i> Enregistrer l'article
                        </button>
                        <a href="{{ path('admin_website_news_index') }}" class="btn btn-outline-secondary">
                            Annuler
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{ form_end(form) }}

{# --- SCRIPTS POUR LE WYSIWYG --- #}
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Initialise CKEditor sur tous les éléments ayant la classe 'js-wysiwyg'
        const editors = document.querySelectorAll('.js-wysiwyg');
        editors.forEach(function(editor) {
            CKEDITOR.replace(editor, {
                // Configuration optionnelle pour ajuster la hauteur ou les outils
                height: 400,
                removeButtons: 'About', // Retire le bouton d'aide inutile
                language: 'fr'
            });
        });
    });
</script>