{% set form = hookable_metadata.context.form %}

<div {{ sylius_test_html_attribute('images') }}>
    <div class="card mb-3">
        <div class="card-header">
            <h2 class="card-title">
                {{ 'sylius.ui.media'|trans }}
            </h2>
        </div>
        <div class="card-body">
            <div class="row">
                {% for image_form in form.images %}
                    {% hook 'images' with {form: image_form} %}
                {% endfor %}
            </div>

            <div class="d-grid gap-2">
                {{ form_widget(form.images.vars.button_add, sylius_test_form_attribute('add-image')|sylius_merge_recursive({attr: {class: 'btn btn-outline-primary '}})) }}
            </div>
        </div>
    </div>
</div>