On capsule group management the user can go to capsule groups creation page

templates/capsule/groups/capsule_groups.html.twig

@@ -18,20 +18,36 @@
     </div>
 
     {% for flashWarning in app.flashes('warning') %}
-            <div class="flash-message text-center alert alert-warning col-11 col-md-10 col-lg-8 col-xl-6 mx-auto mb-5" role="alert">
+      <div class="flash-message text-center alert alert-warning col-11 col-md-10 col-lg-8 col-xl-6 mx-auto mb-5"
+           role="alert">
         {{ flashWarning }}
       </div>
     {% endfor %}
 
     {% for flashSuccess in app.flashes('success') %}
-            <div class="flash-message text-center alert alert-success col-11 col-md-10 col-lg-8 col-xl-6 mx-auto mb-5" role="alert">
+      <div class="flash-message text-center alert alert-success col-11 col-md-10 col-lg-8 col-xl-6 mx-auto mb-5"
+           role="alert">
         {{ flashSuccess }}
       </div>
     {% endfor %}
 
-        <div class="d-flex flex-md-row flex-column justify-content-center">
+    <div class="d-flex flex-column justify-content-between">
 
-            <div class="d-flex flex-row pe-md-5 pb-3 fw-normal me-0 me-md-5">
+      <div class="d-flex flex-row mb-5 justify-content-center">
+        <div class="d-flex flex-row pe-md-5 pb-3 fw-normal me-0 me-md-5 col-3">
+          <div class="d-flex flex-row pe-3 pe-md-4 text-nowrap">
+            <h5>
+              {{ 'groups.general.title'|trans }}
+            </h5>
+          </div>
+        </div>
+        <div class="order-md-2 mb-4 col-sm-8 col-md-6 col-lg-5 col-xl-4">
+          <a href="{{ path('edit_user_groups') }}" class="btn btn-standard">{{ 'groups.create.title'|trans }}</a>
+        </div>
+      </div>
+
+      <div class="d-flex flex-row mb-5 justify-content-center">
+        <div class="d-flex flex-row pe-md-5 pb-3 fw-normal me-0 me-md-5 col-3">
           <div class="pe-3 pe-md-4 text-nowrap">
             <h5>
               {{ 'groups.list.title'|trans }}
@@ -44,7 +60,8 @@
                                         {{ group.getName() }}
                                     </span>
                     -
-                                    <a href="{{ path('remove_group', { 'capsule_id': capsule.getId(), 'group_id':group.getId()  }) }}" class="remove-link">
+                    <a href="{{ path('remove_group', { 'capsule_id': capsule.getId(), 'group_id':group.getId()  }) }}"
+                       class="remove-link">
                       {{ 'groups.remove.link'|trans }}
                     </a>
                   </li>
@@ -54,7 +71,8 @@
           </div>
         </div>
 
-            <div class="d-flex flex-column justify-content-center order-md-2 mb-4 col-sm-8 col-md-6 col-lg-5 col-xl-4">
+        <div
+            class="d-flex flex-column justify-content-center order-md-2 mb-4 col-sm-8 col-md-6 col-lg-5 col-xl-4">
           {% if groups_not_added is not empty %}
             <div class="d-flex flex-column justify-content-center mb-4">
               {{ form_start(selectCapsuleGroupsForm, {'attr': {novalidate: 'novalidate'}}) }}
@@ -68,4 +86,6 @@
       </div>
     </div>
 
+  </div>
+
 {% endblock %}
\ No newline at end of file