--- a/sat_templates/templates/bulma/call/call.html	Sat May 11 13:55:03 2024 +0200
+++ b/sat_templates/templates/bulma/call/call.html	Wed May 15 17:39:47 2024 +0200
@@ -44,6 +44,17 @@
                 </span>
             </button>
         </div>
+
+        <!-- Group Call Button -->
+        <div class="column is-narrow is-hidden">
+            <button class="button is-info" id="group_call_btn" aria-label="Initiate Group Call">
+                <span class="icon">
+                    <i class="icon-group"></i>
+                </span>
+                <span>Group Call</span>
+            </button>
+        </div>
+
             </div>
         </div>
 
@@ -54,7 +65,6 @@
 
     {# Calls #}
 
-
     <div class="is-hidden is-flex is-flex-direction-column" id="call_container">
 
         <div class="columns is-1 is-centered is-vcentered m-0" id="call_header">
@@ -108,7 +118,7 @@
                     <input type="file" id="send_file_input" style="display:none;" />
                 </div>
                 <div class="column is-narrow">
-                    <button class="button is-danger" id="hangup_btn" aria-label="{{ _('Hang up') }}">
+                    <button class="button is-danger is-rotated-135" id="hangup_btn" aria-label="{{ _('Hang up') }}">
                         {{ icon('phone', cls='image is-24x24 is-inline-block') }}
                     </button>
                 </div>
@@ -116,6 +126,38 @@
 
         </div>
     </div>
+
+
+    {# Group Calls #}
+
+    <div class="is-hidden is-flex is-flex-direction-column" id="group_call_container">
+        <!-- Status Bar (Header) with Fullscreen Button on the Right -->
+        <div class="columns">
+            <div class="column is-11" id="group_call_status_wrapper"></div>
+            <div class="column">
+                <div class="buttons has-addons is-right">
+                    <button class="button is-light" id="group_full_screen_btn">
+                        {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Peer Video Grid - Adjusted for dynamic resizing -->
+        <div class="columns is-multiline mt-3 is-flex-grow-1 is-variable is-0" id="group_video_grid" style="flex-wrap: wrap;">
+            <!-- Peer templates dynamically loaded here -->
+        </div>
+
+        <!-- Call Control for Hangup -->
+        <div class="group-call-controls columns is-centered is-mobile">
+            <div class="column is-narrow">
+                <button class="button is-danger is-rotated-135" id="group_hangup_btn">
+                    {{ icon('phone', cls='image is-24x24 is-inline-block') }}
+                </button>
+            </div>
+        </div>
+    </div>
+
 </div>
 </section>
 {% endblock body %}