Add basic form theme for testing

src/Collection/Form/CollectionTypeExtension.php

@@ -83,9 +83,9 @@ public function configureOptions(OptionsResolver $resolver)
         };
 
         $resolver->setDefaults([
-            'add_type' => ButtonType::class,
+            'add_type' => ButtonType::class, // TODO add AddButtonType for easier theming and extending
             'add_options' => [],
-            'delete_type' => ButtonType::class,
+            'delete_type' => ButtonType::class, // TODO add DeleteButtonType for easier theming and extending
             'delete_options' => [],
         ]);
 

src/Collection/Tests/app/templates/basic_form.html.twig

@@ -1,5 +1,8 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    {{ form(form) }}
+    <div style="max-width: 85ch">
+        {% form_theme form 'example_theme.html.twig' %}
+        {{ form(form) }}
+    </div>
 {% endblock %}

src/Collection/Tests/app/templates/example_theme.html.twig

@@ -0,0 +1,37 @@
+{% use 'form_div_layout.html.twig' %}
+
+{%- block team_row -%}
+    {% set row_attr = row_attr|merge({
+        style: 'margin-bottom: 16px; background: #efefef; border: 1px solid #ccc; padding: 16px; border-radius: 4px;'
+    }) %}
+
+    {{ block('collection_row') }}
+{%- endblock -%}
+
+{%- block player_row -%}
+    {% set row_attr = row_attr|merge({
+        style: 'margin-bottom: 16px; background: white; border: 1px solid #ccc; padding: 16px;  border-radius: 4px;'
+    }) %}
+
+    {{ block('collection_row') }}
+{%- endblock -%}
+
+{%- block button_widget -%}
+    {% set attr = attr|merge({
+        style: 'background: white; border: 1px solid #ccc; padding: 8px 16px;  border-radius: 4px;'
+    }) %}
+
+    <div style="margin-top: 8px; display: flex; justify-content: start; flex-wrap: wrap;">
+        {{ parent() }}
+    </div>
+{%- endblock -%}
+
+{%- block form_label -%}
+    {% set label_attr = label_attr|merge({
+        style: 'font-weight: bold; font-family: sans-serif; font-size: 14px; cursor: pointer;'
+    }) %}
+
+    <div style="margin-top: 8px; display: flex; justify-content: start; flex-wrap: wrap;">
+        {{ parent() }}
+    </div>
+{%- endblock -%}