Update match display logic for group pagination

tournaments/templates/tournaments/broadcast/broadcasted_planning.html

@@ -194,6 +194,15 @@
 
                 // Rearrange groups in vertical order
                 if (columns === 2) {
+
+                    if (this.courtCount < 5 && pageGroups.length < groupsPerPageThreshold / 2) {
+                        const pageLength = pageGroups.length;
+                        const rearrangedGroups = new Array(pageGroups.length);
+                        for (let col = 0; col < pageLength; col++) {
+                            rearrangedGroups[col * 2] = pageGroups[col]; // First column: indices 0, 2, 4, etc.
+                        }
+                        paginatedGroups.push(rearrangedGroups);
+                    } else {
                         const rearrangedGroups = [];
                         const halfPageLength = Math.ceil(pageGroups.length / 2);
 
@@ -205,6 +214,7 @@
                             }
                         }
                         paginatedGroups.push(rearrangedGroups);
+                    }
                 } else {
                     paginatedGroups.push(pageGroups);
                 }
@@ -217,7 +227,11 @@
             return courtIndex;
         },
 
-        organizeMatchesByCourt(matches) {
+        organizeMatchesByCourt(group) {
+            if (!group || !group.matches) {
+                return Array(this.courtCount).fill(null);
+            }
+            const matches = group.matches;
             const courtMatches = Array(this.courtCount).fill(null);
             if (matches && matches.length > 0) {
                 matches.forEach(match => {
@@ -326,11 +340,11 @@
                                         <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
                                             <div style="display: flex; margin-bottom: 10px;">
                                                 <div class="bubble-timeslot" style="align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
-                                                    <h1 class="timeslot" x-text="group.name.slice(-5)"></h1>
+                                                    <h1 class="timeslot" x-text="group && group.name ? group.name.slice(-5) : ''"></h1>
                                                 </div>
 
                                                 <div class="matches-row">
-                                                    <template x-for="(match, courtIndex) in organizeMatchesByCourt(group.matches)" :key="courtIndex">
+                                                    <template x-for="(match, courtIndex) in organizeMatchesByCourt(group)" :key="courtIndex">
                                                         <div class="match-cell" :style="{'width': calculateFractionWidth()}">
                                                             <template x-if="match">
                                                                 <div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1, 'ended': match.ended}" style="text-align: center;">