régler problème de style en dark mode pour voir les blocs de temps coloré en fonction du nombre de joueurs dispo.

Changer la séléction des joueurs dans les matchs joueurs vs joueurs

templates/pages/create_match.html

@@ -231,12 +231,22 @@
     margin: 5px 0;
     background: var(--success-light);
     border-radius: 6px;
-    cursor: pointer;
     font-size: 14px;
+    border: 1px solid var(--border-color);
 }
 .available-players-pool .player-item:hover {
-    background: var(--success-color);
+    background: var(--primary);
     color: white;
+    border-color: var(--primary);
+}
+.available-players-pool .player-item.available {
+    background: var(--success-light);
+    border-color: var(--success);
+}
+.available-players-pool .player-item.unavailable {
+    background: var(--gray-100);
+    border-color: var(--gray-300);
+    opacity: 0.6;
 }
 .player-item {
     display: flex;
@@ -250,6 +260,23 @@
 .player-item .remove-btn:hover {
     opacity: 1;
 }
+.player-actions {
+    display: flex;
+    gap: 5px;
+}
+.player-actions .btn {
+    padding: 4px 8px;
+    font-size: 12px;
+}
+.player-name {
+    flex: 1;
+}
+.team-selection .player-actions {
+    display: none;
+}
+.team-selection .player-item:hover .remove-btn {
+    opacity: 1;
+}
 </style>
 <script>
 // Player data as simple JS object (id -> full_name)
@@ -563,25 +590,8 @@ function fetchAvailablePlayersForAllSlots() {
 }
 
 function preselectAvailablePlayers() {
-    // Clear current assignments
-    document.querySelectorAll('#team1-selection [data-player-id], #team2-selection [data-player-id]').forEach(function(el) {
-        el.remove();
-    });
-    
-    // Add available players to Team 1
-    availablePlayersForSlots.forEach(function(pid) {
-        var playerName = playerDataById.player_data[pid];
-        if (!playerName) return;
-        
-        var html = '<div class="player-item" data-player-id="' + pid + '" onclick="returnToPool(' + pid + ', event)">';
-        html += playerName;
-        html += '<span class="remove-btn">↺</span>';
-        html += '</div>';
-        
-        document.getElementById('team1-selection').insertAdjacentHTML('beforeend', html);
-    });
-    
-    updateHiddenInputs();
+    // Just update the player pool - don't auto-assign to Team 1
+    // Players will be shown in the pool and can be manually assigned to either team
     updatePlayerPool();
 }
 
@@ -591,8 +601,6 @@ function updatePlayerPool() {
     
     var team1Ids = getSelectedTeamIds(1);
     var team2Ids = getSelectedTeamIds(2);
-    // Players in Team 2 but not Team 1 should still appear in pool
-    var assignedToTeam1 = team1Ids.filter(function(id) { return !team2Ids.includes(id); });
     var assignedIds = [...team1Ids, ...team2Ids];
     
     // When time slots are selected, show only players available in all slots who aren't assigned yet
@@ -604,6 +612,11 @@ function updatePlayerPool() {
         return;
     }
     
+    var dateParts = selectedDate.split('-');
+    var dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
+    var jsDay = dateObj.getDay();
+    var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1;
+    
     var html = '';
     playersToShow.forEach(function(pid) {
         if (assignedIds.includes(pid)) return;
@@ -611,9 +624,23 @@ function updatePlayerPool() {
         var playerName = playerDataById.player_data[pid];
         if (!playerName) return;
         
-        html += '<div class="player-item" data-player-id="' + pid + '" onclick="assignToTeam(' + pid + ', 1)">';
-        html += playerName;
-        html += '<span class="remove-btn" onclick="returnToPool(' + pid + ', event)">↺</span>';
+        // Check if player is available during selected time slots
+        var isAvailable = true;
+        if (selectedSlots.length > 0 && allDisponibilities[pid]) {
+            var playerSlots = getSlotsForPlayer(pid, dayOfWeek);
+            isAvailable = selectedSlots.every(function(slot) {
+                return playerSlots.includes(slot);
+            });
+        }
+        
+        var availabilityClass = isAvailable ? 'available' : 'unavailable';
+        
+        html += '<div class="player-item ' + availabilityClass + '" data-player-id="' + pid + '">';
+        html += '<span class="player-name">' + playerName + '</span>';
+        html += '<div class="player-actions">';
+        html += '<button type="button" class="btn btn-sm btn-primary" onclick="assignToTeam(' + pid + ', 1)">T1</button>';
+        html += '<button type="button" class="btn btn-sm btn-secondary" onclick="assignToTeam(' + pid + ', 2)">T2</button>';
+        html += '</div>';
         html += '</div>';
     });
     
@@ -621,6 +648,11 @@ function updatePlayerPool() {
 }
 
 function assignToTeam(playerId, teamSide) {
+    // First, remove player from any team they're already in
+    document.querySelectorAll('[data-player-id="' + playerId + '"]').forEach(function(el) {
+        el.remove();
+    });
+    
     var teamDiv = document.getElementById('team' + teamSide + '-selection');
     var playerName = playerDataById.player_data[playerId];
     if (!playerName) return;
@@ -668,8 +700,8 @@ function clearTimeSelection() {
         el.classList.remove('selected');
     });
     availablePlayersForSlots = [];
-    // Clear Team 1 preselection
-    document.querySelectorAll('#team1-selection [data-player-id]').forEach(function(el) {
+    // Clear both team selections
+    document.querySelectorAll('#team1-selection [data-player-id], #team2-selection [data-player-id]').forEach(function(el) {
         el.remove();
     });
     updateHiddenInputs();