{{ form_start(form) }}
<div class="row">
    <div class="col-md-4">
        <div class="mb-3">
            {{ form_row(form.titre) }}
        </div>
    </div>
    <div class="col-md-4">
        <div class="mb-3">
            {{ form_row(form.category) }}
        </div>
    </div>

    <div class="col-md-4">
        <div class="mb-3">
            {{ form_row(form.tags) }}
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="mb-3">
            {{ form_row(form.contenu) }}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="mb-3">
            {{ form_row(form.imageCouverture) }}
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            {{ form_row(form.datePublication) }}
        </div>
    </div>
</div>

<div class="post-media-collection mb-2">
    <h3>Médias</h3>
    <div class="media-items"
         data-prototype="{{ form_widget(form.postMedia.vars.prototype)|e('html_attr') }}"
         data-index="{{ form.postMedia|length }}">
        {% for mediaForm in form.postMedia %}
            <div class="media-item">
                {{ form_widget(mediaForm) }}
                <button type="button" class="btn btn-danger delete-media">Supprimer</button>
            </div>
        {% endfor %}
    </div>
    <button type="button" class="btn btn-primary add-media">Ajouter un média</button>
</div>

{{ form_row(form.showHome) }}

<div class="d-grid gap-2 d-md-flex justify-content-md-between mt-4">
    <a href="{{ path('back.post.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Retour
    </a>
    <button type="submit" class="btn btn-primary">
        <i class="fas fa-save me-2"></i>{{ button_label|default('Enregistrer') }}
    </button>
</div>
{{ form_end(form) }}
<!-- CDN CKEditor -->
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>

<script>
    ClassicEditor
        .create(document.querySelector('.ckeditor-editor')) // Cibler l'élément avec la classe `ckeditor-editor`
        .catch(error => {
            console.error(error);
        });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const addButton = document.querySelector('.add-media');
        const wrapper = document.querySelector('.media-items');
        let index = wrapper.dataset.index;

        // Ajouter un nouveau média
        addButton.addEventListener('click', function() {
            const prototype = wrapper.dataset.prototype;
            const newForm = prototype.replace(/__name__/g, index);

            const div = document.createElement('div');
            div.classList.add('media-item');
            div.innerHTML = newForm +
                '<button type="button" class="btn btn-danger delete-media">Supprimer</button>';

            wrapper.appendChild(div);
            index++;
            wrapper.dataset.index = index;
        });

        // Supprimer un média
        wrapper.addEventListener('click', function(e) {
            if (e.target.classList.contains('delete-media')) {
                e.target.closest('.media-item').remove();
            }
        });
    });
</script>

<style>
    .media-item {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .delete-media {
        margin-top: 5px;
    }

    .add-media {
        margin-top: 10px;
    }
</style>