feat: auto-load events on login and improve player display in event details

- Automatically load events when user logs in
- Rename updateAccountOptions to updateAccountOptionsAndLoadEvents
- Add auto-fetch of events after account selection
- Enhance event details modal with:
  * Player count summary
  * Position breakdown
  * Players sorted by position first, then by number
  * Position displayed in player list

index.html

@@ -210,9 +210,7 @@
                     }
 
                     eventFilters.style.display = "block";
-                    updateAccountOptions();
-                    // Don't automatically fetch events on page load
-                    // Wait for user to explicitly select an account or click fetch
+                    updateAccountOptionsAndLoadEvents();
                 } else {
                     // User is not logged in
                     loginView.style.display = "flex";
@@ -255,7 +253,7 @@
                 location.reload();
             }
 
-            function updateAccountOptions() {
+            function updateAccountOptionsAndLoadEvents() {
                 // Fetch available accounts from the server
                 fetch(`${apiBaseUrl}/accounts`, {
                     headers: { "Authorization": `Bearer ${storedApiKey}` }
@@ -306,6 +304,9 @@
 
                         // Set the selected account in the dropdown
                         accountSelect.value = accountToSelect;
+
+                        // Automatically fetch events for the selected account
+                        fetchEvents(storedApiKey, accountToSelect);
                     })
                     .catch(error => {
                         console.error("Erreur lors du chargement des comptes:", error);
@@ -453,16 +454,46 @@
                         const sortedPlayers = data.convocation.available
                             .sort((a, b) => (a.number || 0) - (b.number || 0));
 
+                        // Calculate player statistics
+                        const totalPlayers = sortedPlayers.length;
+                        const positionCount = {};
+                        sortedPlayers.forEach(player => {
+                            const position = player.position || "N/A";
+                            positionCount[position] = (positionCount[position] || 0) + 1;
+                        });
+
+                        // Generate position breakdown
+                        const positionBreakdown = Object.entries(positionCount)
+                            .map(([position, count]) => `${position}: ${count}`)
+                            .join(', ');
+
+                        // Sort players by position first, then by number
+                        const playersByPosition = [...sortedPlayers].sort((a, b) => {
+                            // Sort by position first
+                            const positionA = a.position || "ZZZ"; // Put undefined positions at the end
+                            const positionB = b.position || "ZZZ";
+
+                            if (positionA !== positionB) {
+                                return positionA.localeCompare(positionB);
+                            }
+
+                            // If positions are the same, sort by number
+                            const numA = parseInt(a.number) || 0;
+                            const numB = parseInt(b.number) || 0;
+                            return numA - numB;
+                        });
+
                         eventDetailsContent.innerHTML = `
                         <h5>${data.title}</h5>
                         <p><strong>Type:</strong> ${data.type}</p>
                         <p><strong>Lieu:</strong> ${data.place}</p>
                         <p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
-                        <h6>Joueurs convoqués:</h6>
-                        <ul>${sortedPlayers.map(player => {
+                        <p><strong>Joueurs convoqués:</strong> ${totalPlayers} joueur${totalPlayers > 1 ? 's' : ''} (${positionBreakdown})</p>
+                        <h6>Liste des joueurs:</h6>
+                        <ul>${playersByPosition.map(player => {
                             let number = player.number ? player.number : "N/A";
                             let position = player.position ? player.position : "N/A";
-                            return `<li>${number} - ${player.fname} ${player.lname} (${position}, ${player.dob})</li>`;
+                            return `<li>[${position}] ${number} - ${player.fname} ${player.lname} (${player.dob})</li>`;
                         }).join('')}</ul>
                     `;
                         new bootstrap.Modal(document.getElementById('eventDetailsModal')).show();