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

{% block title %}Modifier l'article - {{ article.title }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('styles/admin-forms.css') }}">
{% endblock %}

{% block body %}
<div class="container-fluid py-5">
    <div class="container" style="margin-top: 5em;">
        <div class="row mb-5">
            <div class="col-12">
                <div class="text-center">
                    {# CHANGÉ : J'ai mis text-dark comme sur ta page d'actu, c'est plus sobre ;) #}
                    <h1 class="display-4 text-dark mb-3">
                        <i class="bi bi-pencil-square me-3"></i>Modifier l'article
                    </h1>
                    <p class="lead text-muted">
                        Modifiez les informations de votre article
                    </p>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ form_label(form.title, "Titre de l'article", {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                {{ form_widget(form.title, {'attr': {'class': 'form-control'}}) }}
                                {{ form_errors(form.title) }}
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                {{ form_label(form.category, 'Catégorie', {'label_attr': {'class': 'form-label fw-bold'}}) }}
                                {{ form_widget(form.category, {'attr': {'class': 'form-select'}}) }}
                                {{ form_errors(form.category) }}
                            </div>
                        </div>
                        
                        {# ### BLOC IMAGE ENTIÈREMENT CHANGÉ ### #}
                        
                        {# 1. On affiche l'image qui existe déjà #}
                        {% if article.image %}
                            <div class="mb-2">
                                <p class="form-label fw-bold mb-1">Image actuelle :</p>
                                <img src="{{ asset(article.image) }}" alt="{{ article.title }}" style="max-width: 200px; height: auto; border-radius: 0.5rem;">
                            </div>
                        {% endif %}
                        
                        {# 2. On affiche le champ d'upload #}
                        <div class="mb-3">
                            <label for="{{ form.image.vars.id }}" class="form-label fw-bold">
                                {% if article.image %}
                                    Changer l'image
                                {% else %}
                                    Téléverser une image
                                {% endif %}
                            </label>
                            {{ form_widget(form.image, {'attr': {'class': 'form-control'}}) }}
                            <div class="form-text">
                                {% if article.image %}
                                    Laissez vide pour conserver l'image actuelle.
                                {% else %}
                                    Ajoutez une image (optionnel).
                                {% endif %}
                            </div>
                            {{ form_errors(form.image) }}
                        </div>
                        {# ### FIN DU BLOC IMAGE ### #}

                        
                        <div class="mb-4">
                            {{ form_label(form.content, 'Contenu', {'label_attr': {'class': 'form-label fw-bold'}}) }}
                            {{ form_widget(form.content, {'attr': {'class': 'form-control', 'rows': 10}}) }}
                            {{ form_errors(form.content) }}
                        </div>
                        
                        <div class="d-flex gap-3 justify-content-end">
                            <a href="{{ path('app_actualites') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-2"></i>Retour
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg me-2"></i>Enregistrer les modifications
                            </button>
                        </div>
                        
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}