{# templates/manager/presentation/new.html.twig #}
{% extends 'manager/manager_base.html.twig' %}

{% block title %}Créer un nouvel article de Présentation{% endblock %}

{% block content %}

<style>
        /* Cible l'élément éditable DANS l'éditeur */
        .wysiwyg-editor + .ck-editor .ck-editor__editable {
            /* Utiliser min-height pour permettre à l'éditeur de grandir si l'utilisateur met beaucoup de contenu */
            min-height: 365px; 
            /* Si vous voulez une hauteur fixe, utilisez: height: 400px !important; */
        }
    </style>
	
    <div class="container-fluid">

        <h3 class="mb-5 text-body-emphasis">Créer un nouvel article</h3>

        {# Affichage des messages flash (laissé intact) #}
        {% for message in app.flashes('success') %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        {# ... autres messages error/warning ... #}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        
        <div class="card shadow mb-4">
            <div class="card-body" style="font-size:1.1em">
                
                {{ form_start(form) }}
                
                <div class="row">
                    
                    {# COLONNE PRINCIPALE (8/12) : Contenu et Description #}
                    <div class="col-md-8">
                        <h4 class="mb-3 border-bottom pb-2 text-primary">Contenu de l'article</h4>
                        
                        {{ form_row(form.titre) }}
						<div style="height:10px"></div>
                        {{ form_row(form.petiteDescription) }}
						<div style="height:10px"></div>
                        {{ form_row(form.contenu, {
							'attr': {
								'class': 'wysiwyg-editor',
								'required': false 
							}
						}) }}
                    </div>
                    
                    {# COLONNE LATÉRALE (4/12) : SEO, Image et Statut #}
                    <div class="col-md-4">
                        
                        {# 1. Carte pour les options SEO #}
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light">
                                <i class="fas fa-search me-2 text-info"></i> Options de Référencement (SEO)
                            </div>
                            <div class="card-body">
                                {{ form_row(form.seoTitle) }}
								<div style="height:10px"></div>
                                {{ form_row(form.seoKeywords) }}
								<div style="height:10px"></div>
                                {{ form_row(form.seoDescription) }}
                            </div>
                        </div>
                        
                        {# 2. Carte pour l'Image et Publication #}
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light">
                                <i class="fas fa-image me-2 text-secondary"></i> Média et Publication
                            </div>
                            <div class="card-body">
                                {{ form_row(form.imageFile) }}
                                <div style="height:10px"></div>
                                {# Affichage conditionnel de la suppression de l'image (pour la page d'édition) #}
                                {% if form.deleteImage is defined %}
                                    {{ form_row(form.deleteImage) }}
                                {% endif %}
                                
                                <hr class="my-3">
                                {{ form_row(form.statut) }}
                            </div>
                        </div>
                        
                    </div>
                </div>

                <hr class="mt-4">
                
                {# Boutons d'action #}
                <div class="d-flex justify-content-center">
				
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-1"></i> Enregistrer
                    </button>
                    <a href="{{ path('app_manager_presentation_index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Retour à la liste
                    </a>
				
                </div>
                
                {# Assurez-vous d'afficher les champs non rendus (comme le token CSRF) #}
                {{ form_rest(form) }}
                
                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    {# 1. Chargement de CKEditor 5 (Classic Editor) via CDN #}
    <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>

    {# 2. Initialisation de l'éditeur sur votre champ 'contenu' #}
    <script>
        // SÉLECTEUR MIS À JOUR : Cibler le TEXTAREA avec la classe 'wysiwyg-editor'
        ClassicEditor
            .create( document.querySelector( 'textarea.wysiwyg-editor' ), {
                toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
            })
            .catch( error => {
                console.error( 'CKEditor error:', error );
            } );
    </script>
{% endblock %}