{# templates/admin/rubrique/_etapes.html.twig #}

<div class="card mb-4">
    <div class="card-body">
        <h3>Ordre des étapes</h3>
        <div class="mb-3">
            <a href="{{ path('app_admin_etape_new', {'rubrique': rubrique.id}) }}"
               class="btn btn-primary">
                <i class="fas fa-plus"></i> Ajouter une étape
            </a>
        </div>

        <div class="sortable-list" id="etapes-sortable">
            {% for etape in etapes %}
                <div class="drag-item" data-id="{{ etape.id }}">
                    <i class="fas fa-arrows-alt drag-handle me-2"></i>
                    {% if etape.logo %}
                        <img src="{{ asset('uploads/etapes/' ~ etape.logo) }}"
                             alt="{{ etape.titre }}"
                             style="max-height: 30px;"
                             class="me-2">
                    {% endif %}
                    {{ etape.titre }}
                    <div class="float-end">
                        <a href="{{ path('app_admin_etape_edit', {'id': etape.id}) }}"
                           class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-edit"></i>
                        </a>
                    </div>
                </div>
            {% else %}
                <div class="alert alert-info">Aucune étape pour le moment.</div>
            {% endfor %}
        </div>
        {% if form.ordreEtapes is defined %}
            {{ form_widget(form.ordreEtapes) }}
        {% endif %}
    </div>
</div>