{{ form_start(form) }}
    {{ form_row(form.image) }}
    {{ form_row(form.description) }}
    {{ form_row(form.publishedAt) }}
    <div class="project-media-collection mb-2">
        <h3>Médias</h3>
        <div class="media-items"
             data-prototype="{{ form_widget(form.projectMedia.vars.prototype)|e('html_attr') }}"
             data-index="{{ form.projectMedia|length }}">
            {% for mediaForm in form.projectMedia %}
                <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>

    <div class="d-grid gap-2 d-md-flex justify-content-md-between mt-4">
        <a href="{{ path('back.project.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) }}

<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>