{% macro collectionRow(form) %}
    <div {{ stimulus_target('form-collection', 'field') }}>
        <div class="flex items-center space-x-4">
            {{ form_widget(form) }}
            <button type="button" {{ stimulus_action('form-collection', 'removeItem') }}>
                {{ icon('delete', 'w-4 h-4 mt-2 pointer-events-none') }}
            </button>
        </div>
        {{ form_errors(form) }}
    </div>
{% endmacro %}

{{ form_start(form) }}
<div class="flex flex-col space-y-4 pb-8">
    {{ form_row(form.name) }}
    <div {{ stimulus_controller('form-collection', { 'prototype': _self.collectionRow(form.ratings.vars.prototype)|json_encode }) }}>
        <h4 class="font-bold pb-2">
            Bewertungen
        </h4>
        <div {{ stimulus_target('form-collection', 'fields')}} class="flex flex-col space-y-4 mb-4">
            {% do form.ratings.setRendered %}
            {%- for item in form.ratings -%}{{- _self.collectionRow(item) -}}{%- endfor -%}
        </div>
        <div class="flex justify-end">
            <button type="button"
                    {{ stimulus_action('form-collection', 'addItem') }}
                    title="Bewertung hinzufügen">
                {{ icon('plus', 'w-4 h-4 pointer-events-none') }}
            </button>
        </div>
        {{ form_errors(form.ratings) }}
    </div>
</div>
<div class="flex items-center space-x-2">
    <button type="submit" class="btn">
        Speichern
    </button>
    <a href="{{ path('app_admin_system_feedback_set_index') }}" class="btn btn--secondary">
        Abbrechen
    </a>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}