On the Participant List Tab, Make the list minimizable for example on the Participant List Titled "SFAT" then there will be a SFAT tab that when I Maximize or click it it will show all participant name. - Follow Up Deployment

index.html

@@ -253,9 +253,9 @@
                 </div>
                 
                 <div id="participantsListContent" class="overflow-y-auto max-h-96">
-                    <div id="participantsList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                        <!-- Participants will be listed here -->
-                        <div class="text-center py-10 text-gray-500 col-span-3">
+                    <div id="participantsList">
+                        <!-- Participants will be grouped by program here -->
+                        <div class="text-center py-10 text-gray-500">
                             <i class="fas fa-users text-4xl mb-2"></i>
                             <p>No participants added yet</p>
                         </div>
@@ -572,23 +572,18 @@
             document.getElementById('photoPreviewContainer').classList.add('hidden');
         }
         
-        // Render participants list
+        // Render participants list grouped by program
         function renderParticipantsList() {
             const container = document.getElementById('participantsList');
-            const allParticipants = [];
             
-            trainingPrograms.forEach(program => {
-                if (program.namedParticipants && program.namedParticipants.length > 0) {
-                    allParticipants.push(...program.namedParticipants.map(name => ({
-                        name: name,
-                        program: program.title
-                    })));
-                }
-            });
+            // Group participants by program
+            const programsWithParticipants = trainingPrograms.filter(program => 
+                program.namedParticipants && program.namedParticipants.length > 0
+            );
             
-            if (allParticipants.length === 0) {
+            if (programsWithParticipants.length === 0) {
                 container.innerHTML = `
-                    <div class="text-center py-10 text-gray-500 col-span-3">
+                    <div class="text-center py-10 text-gray-500">
                         <i class="fas fa-users text-4xl mb-2"></i>
                         <p>No participants added yet</p>
                     </div>
@@ -596,12 +591,43 @@
                 return;
             }
             
-            container.innerHTML = allParticipants.map(participant => `
-                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
-                    <p class="font-medium text-darkgreen-800">${participant.name}</p>
-                    <p class="text-sm text-gray-600 mt-1">From: ${participant.program}</p>
-                </div>
-            `).join('');
+            container.innerHTML = programsWithParticipants.map(program => {
+                const programId = `participants-${program.id}`;
+                return `
+                    <div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
+                        <div class="flex justify-between items-center bg-gray-100 p-3 cursor-pointer" 
+                             onclick="toggleParticipantsGroup('${programId}')">
+                            <h3 class="font-medium text-darkgreen-800">${program.title}</h3>
+                            <div class="flex items-center">
+                                <span class="text-sm text-gray-600 mr-2">${program.namedParticipants.length} participants</span>
+                                <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200" id="icon-${programId}"></i>
+                            </div>
+                        </div>
+                        <div id="${programId}" class="hidden bg-white p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            ${program.namedParticipants.map(name => `
+                                <div class="bg-gray-50 p-3 rounded border border-gray-200">
+                                    <p class="font-medium text-darkgreen-800">${name}</p>
+                                </div>
+                            `).join('')}
+                            ${program.unnamedParticipants > 0 ? `
+                                <div class="bg-gray-100 p-3 rounded border border-gray-200">
+                                    <p class="text-gray-600">+ ${program.unnamedParticipants} unnamed participants</p>
+                                </div>
+                            ` : ''}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // Toggle participants group visibility
+        function toggleParticipantsGroup(id) {
+            const group = document.getElementById(id);
+            const icon = document.getElementById(`icon-${id}`);
+            
+            group.classList.toggle('hidden');
+            icon.classList.toggle('fa-chevron-down');
+            icon.classList.toggle('fa-chevron-up');
         }
 
         // Render training list

prompts.txt

@@ -13,4 +13,5 @@ add a functionality where if the list of participants is not final yet I can jus
 In the Training Programs part Show the Names of the added participants if their name is inputted not just 3 Named put the exact name. 
 also the list of names on the participants side should be in parallel position.
 On the Training Programs Tab make the list the details inputted in Parallel form when it has a parallel input into it, also at the Participants when I add names on the Participants Display also all the actual names of the participants in parallel form also. if there's unnamed participants just put the number of participants below the Named participants.
-can you make a separate Tab for the List of Participants added by name. make it also minimizable.
+can you make a separate Tab for the List of Participants added by name. make it also minimizable.
+On the Participant List Tab, Make the list minimizable for example on the Participant List Titled "SFAT" then there will be a SFAT tab that when I Maximize or click it it will show all participant name.