fix probleme avec dispos

app/templates/pages/calendar.html

@@ -197,7 +197,6 @@ function goToTeamMatch() {
 }
 
 function goToCreateTryout() {
-    // Tryout creation doesn't support pre-filling date easily, just navigate
     window.location.href = '/tryouts/create';
 }
 
@@ -208,8 +207,13 @@ function fetchTryoutOptions() {
         .then(function(data) {
             var sel = document.getElementById('createTryoutSelect');
             sel.innerHTML = '<option value="">-- Select a tryout --</option>';
+            var today = new Date().toISOString().split('T')[0];
             data.forEach(function(t) {
-                sel.innerHTML += '<option value="' + t.id + '">' + t.title + ' (' + t.date + ')</option>';
+                // Only show tryouts that haven't ended
+                var tryoutEndDate = t.end_date || t.date;
+                if (tryoutEndDate >= today) {
+                    sel.innerHTML += '<option value="' + t.id + '">' + t.title + ' (' + t.date + ')</option>';
+                }
             });
         })
         .catch(function() {});
@@ -236,8 +240,8 @@ function showEventModal(event) {
     
     var content = '<div class="detail-grid">';
     content += '<div class="detail-item"><span class="detail-label">Type</span><span class="detail-value">';
-    content += '<span class="badge badge-' + (type === 'tryout' ? 'info' : (props.match_type === 'team_vs_team' || props.match_type === 'player_vs_player' ? 'success' : 'warning')) + '">';
-    content += (type === 'tryout' ? 'Tryout' : (props.match_type === 'team_vs_team' ? 'Team Match' : (props.match_type === 'player_vs_player' ? 'Player Match' : 'Player Scrim'))) + '</span>';
+    content += '<span class="badge badge-' + (props.match_type === 'team_vs_team' || props.match_type === 'player_vs_player' ? 'success' : 'warning') + '">';
+    content += (props.match_type === 'team_vs_team' ? 'Team Match' : (props.match_type === 'player_vs_player' ? 'Player Match' : 'Player Scrim')) + '</span>';
     content += '</span></div>';
     content += '<div class="detail-item"><span class="detail-label">Title</span><span class="detail-value">' + title + '</span></div>';
     content += '<div class="detail-item"><span class="detail-label">Date</span><span class="detail-value">' + date + '</span></div>';
@@ -250,7 +254,6 @@ function showEventModal(event) {
     if (type === 'match' && props.participants) {
         content += '<div class="detail-item full-width"><span class="detail-label">Teams</span><span class="detail-value">';
         if (props.match_type === 'team_vs_team') {
-            // For team vs team, participants is "Team1 vs Team2"
             var teams = props.participants.split(' vs ');
             if (teams.length >= 2) {
                 content += '<div class="match-teams">';
@@ -262,8 +265,6 @@ function showEventModal(event) {
                 content += props.participants;
             }
         } else if (props.match_type === 'player_vs_player') {
-            // For player vs player, we need to parse the participants
-            // The format is "player1, player2 vs player3, player4"
             var parts = props.participants.split(' vs ');
             if (parts.length >= 2) {
                 content += '<div class="match-teams">';
@@ -275,7 +276,6 @@ function showEventModal(event) {
                 content += props.participants;
             }
         } else {
-            // For player scrim, just show the list
             content += props.participants;
         }
         content += '</span></div>';
@@ -286,7 +286,7 @@ function showEventModal(event) {
     }
     content += '</div>';
     
-    document.getElementById('modalTitle').textContent = type === 'tryout' ? 'Tryout Details' : 'Match Details';
+    document.getElementById('modalTitle').textContent = 'Match Details';
     document.getElementById('modalContent').innerHTML = content;
     
     // Reset buttons
@@ -301,11 +301,11 @@ function showEventModal(event) {
         document.getElementById('editMatchBtn').onclick = function() { 
             window.location.href = '/matches/' + props.match_id + '/edit'; 
         };
-    } else if (type === 'tryout' && canScheduleMatches) {
-        document.getElementById('modalActions').style.display = 'flex';
-        document.getElementById('viewTryoutBtn').style.display = 'inline-flex';
-        document.getElementById('viewTryoutBtn').onclick = function() { 
-            window.location.href = '/tryouts/' + props.tryout_id; 
+        document.getElementById('deleteMatchBtn').style.display = 'inline-flex';
+        document.getElementById('deleteMatchBtn').onclick = function() {
+            if (confirm('Are you sure you want to delete this match?')) {
+                deleteCalendarMatch(props.match_id);
+            }
         };
     } else {
         document.getElementById('modalActions').style.display = 'none';
@@ -329,6 +329,27 @@ function showEventModal(event) {
     document.getElementById('eventModal').classList.remove('hidden');
 }
 
+function deleteCalendarMatch(matchId) {
+    fetch('/matches/' + matchId + '/delete', {
+        method: 'POST',
+        headers: {
+            'X-CSRFToken': '{{ csrf_token() }}',
+            'Content-Type': 'application/json'
+        }
+    })
+    .then(function(r) { return r.json().catch(function() { return {}; }); })
+    .then(function() {
+        hideEventModal();
+        if (window.fcCalendar) {
+            window.fcCalendar.refetchEvents();
+        }
+    })
+    .catch(function(err) {
+        console.error('Error deleting match:', err);
+        alert('Failed to delete match.');
+    });
+}
+
 function toggleCalendarPresence(matchId, participantId, btn) {
     fetch('/matches/' + matchId + '/toggle-presence/' + participantId, {
         method: 'POST',

app/templates/pages/edit_profile.html

@@ -104,25 +104,6 @@
                 <input type="password" id="password" name="password" placeholder="Enter new password">
             </div>
             
-            {% if user.role == 'player' %}
-            <hr class="section-divider">
-            <h4 class="section-title"><i class="fas fa-clock"></i> My Disponibilities</h4>
-            <p class="text-muted small">Select your available time blocks for matches (5pm to 12am). Green = selected, Gray = available to select.</p>
-            
-            <div id="disponibilities-grid">
-                <p class="text-muted">Loading...</p>
-            </div>
-            
-<div class="form-actions">
-                <button type="button" class="btn btn-primary" onclick="saveDisponibilities()">
-                    <i class="fas fa-save"></i> Save Disponibilities
-                </button>
-                <button type="button" class="btn btn-secondary" onclick="clearDisponibilities()">
-                    <i class="fas fa-trash"></i> Clear All
-                </button>
-            </div>
-            {% endif %}
-            
             <div class="form-actions">
                 <a href="{{ url_for('users.profile') }}" class="btn btn-secondary">Cancel</a>
                 <button type="submit" class="btn btn-primary">Save Changes</button>
@@ -165,177 +146,6 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Show gamertag inputs for already selected games
     toggleGamertagInputs();
-    
-    {% if user.role == 'player' %}
-    renderDisponibilityGrid();
-    {% endif %}
 });
-
-{% if user.role == 'player' %}
-// Generate time slots from 5pm (17:00) to 12am (24:00)
-var TIME_SLOTS = [];
-for (var h = 17; h <= 24; h++) {
-    for (var m = 0; m < 60; m += 30) {
-        if (h === 24 && m > 0) continue;
-        var displayHour;
-        var displayAmpm;
-        if (h === 24) {
-            displayHour = 12;
-            displayAmpm = 'AM';
-        } else if (h > 12) {
-            displayHour = h - 12;
-            displayAmpm = 'PM';
-        } else {
-            displayHour = h;
-            displayAmpm = 'PM';
-        }
-        var timeStr = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
-        var displayTime = displayHour + ':' + (m < 10 ? '0' : '') + m + ' ' + displayAmpm;
-        TIME_SLOTS.push({ time: timeStr, display: displayTime });
-    }
-}
-
-var DAYS = [
-    { value: 0, name: 'Monday' },
-    { value: 1, name: 'Tuesday' },
-    { value: 2, name: 'Wednesday' },
-    { value: 3, name: 'Thursday' },
-    { value: 4, name: 'Friday' },
-    { value: 5, name: 'Saturday' },
-    { value: 6, name: 'Sunday' }
-];
-
-// Store selected slots: {day: [time, time, ...]}
-var selectedSlots = {};
-
-function renderDisponibilityGrid() {
-    var grid = document.getElementById('disponibilities-grid');
-    grid.innerHTML = '<div style="margin-bottom: 10px;"><strong>Click time blocks to select your available hours</strong></div>';
-    
-    var container = document.createElement('div');
-    container.className = 'disponibility-grid';
-    
-    DAYS.forEach(function(day) {
-        var dayRow = document.createElement('div');
-        dayRow.className = 'disponibility-day-row';
-        
-        var dayLabel = document.createElement('div');
-        dayLabel.className = 'disponibility-day-label';
-        dayLabel.textContent = day.name;
-        dayRow.appendChild(dayLabel);
-        
-        var timeBlocks = document.createElement('div');
-        timeBlocks.className = 'disponibility-time-blocks';
-        
-        TIME_SLOTS.forEach(function(slot) {
-            var block = document.createElement('div');
-            block.className = 'disponibility-time-block';
-            block.dataset.day = day.value;
-            block.dataset.time = slot.time;
-            block.textContent = slot.display;
-            block.onclick = function() {
-                toggleSlot(day.value, slot.time, block);
-            };
-            timeBlocks.appendChild(block);
-        });
-        
-        dayRow.appendChild(timeBlocks);
-        container.appendChild(dayRow);
-    });
-    
-    grid.appendChild(container);
-    loadMyDisponibilities();
-}
-
-function toggleSlot(day, time, element) {
-    if (!selectedSlots[day]) selectedSlots[day] = [];
-    
-    var index = selectedSlots[day].indexOf(time);
-    if (index > -1) {
-        selectedSlots[day].splice(index, 1);
-        element.classList.remove('selected');
-    } else {
-        selectedSlots[day].push(time);
-        element.classList.add('selected');
-    }
-}
-
-function loadMyDisponibilities() {
-    fetch('{{ url_for("users.get_my_disponibilities") }}')
-        .then(function(response) { return response.json(); })
-        .then(function(data) {
-            selectedSlots = {};
-            
-            for (var day in data) {
-                var slots = data[day];
-                slots.forEach(function(slot) {
-                    selectedSlots[day] = selectedSlots[day] || [];
-                    selectedSlots[day].push(slot.start_time);
-                });
-            }
-            
-            document.querySelectorAll('.disponibility-time-block').forEach(function(block) {
-                var day = block.dataset.day;
-                var time = block.dataset.time;
-                if (selectedSlots[day] && selectedSlots[day].indexOf(time) > -1) {
-                    block.classList.add('selected');
-                } else {
-                    block.classList.remove('selected');
-                }
-            });
-        })
-        .catch(function(error) {
-            console.error('Error loading disponibilities:', error);
-        });
-}
-
-function saveDisponibilities() {
-    var slots = [];
-    for (var day in selectedSlots) {
-        selectedSlots[day].forEach(function(time) {
-            slots.push({ day_of_week: parseInt(day), start_time: time });
-        });
-    }
-    
-    fetch('{{ url_for("users.add_disponibilities_bulk") }}', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ slots: slots })
-    })
-    .then(function(response) { return response.json(); })
-    .then(function(data) {
-        if (data.success) {
-            var msg = document.createElement('div');
-            msg.className = 'alert alert-success';
-            msg.style.marginTop = '10px';
-            msg.innerHTML = '<i class="fas fa-check"></i> Disponibilities saved successfully!';
-            document.getElementById('disponibilities-grid').appendChild(msg);
-            setTimeout(function() { msg.remove(); }, 3000);
-        }
-    })
-    .catch(function(error) {
-        console.error('Error saving disponibilities:', error);
-    });
-}
-
-function clearDisponibilities() {
-    if (!confirm('Are you sure you want to clear all your disponibilities?')) return;
-    
-    fetch('{{ url_for("users.clear_disponibilities") }}', {
-        method: 'POST'
-    })
-    .then(function(response) { return response.json(); })
-    .then(function(data) {
-        if (data.success) {
-            selectedSlots = {};
-            document.querySelectorAll('.disponibility-time-block').forEach(function(block) {
-                block.classList.remove('selected');
-            });
-        }
-    });
-}
-{% endif %}
 </script>
 {% endblock %}

app/templates/pages/profile.html

@@ -180,5 +180,363 @@
         </div>
     </div>
     {% endif %}
+
+    <!-- Disponibilities Card (Players only) -->
+    {% if user.role == 'player' %}
+    <div class="card" style="grid-column: 1 / -1;">
+        <div class="card-header">
+            <h3><i class="fas fa-clock"></i> My Disponibilities</h3>
+        </div>
+        <div class="card-body">
+            <p class="text-muted small">Select your available time blocks for matches (5pm to 12am). Green = selected, Gray = available to select.</p>
+            <div id="disponibilities-grid">
+                <p class="text-muted">Loading...</p>
+            </div>
+            <div class="form-actions">
+                <button type="button" class="btn btn-primary" onclick="saveDisponibilities()">
+                    <i class="fas fa-save"></i> Save Disponibilities
+                </button>
+                <button type="button" class="btn btn-secondary" onclick="clearDisponibilities()">
+                    <i class="fas fa-trash"></i> Clear All
+                </button>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    <!-- Coach Availability Card (Coaches only) -->
+    {% if user.role == 'coach' %}
+    <div class="card" style="grid-column: 1 / -1;">
+        <div class="card-header">
+            <h3><i class="fas fa-clock"></i> My Coaching Availability</h3>
+            <p class="text-muted small">Select time slots when you're available for One on One sessions (8am to 10pm).</p>
+        </div>
+        <div class="card-body">
+            <div class="availability-grid" id="availability-grid">
+                <p class="text-muted">Loading availability grid...</p>
+            </div>
+            <div class="form-actions mt-3">
+                <button type="button" class="btn btn-secondary" onclick="clearAllAvailability()">
+                    <i class="fas fa-trash"></i> Clear All
+                </button>
+            </div>
+        </div>
+    </div>
+    {% endif %}
 </div>
 {% endblock %}
+
+{% block scripts %}
+{% if user.role == 'coach' %}
+<style>
+.availability-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 12px;
+    margin-top: 10px;
+}
+.day-column {
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    padding: 10px;
+    min-height: 300px;
+}
+.day-header {
+    text-align: center;
+    font-weight: 600;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 10px;
+    color: var(--primary);
+}
+.time-slot {
+    padding: 6px 8px;
+    margin: 4px 0;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    text-align: center;
+    cursor: pointer;
+    transition: var(--transition);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+}
+.time-slot:hover { background: var(--primary-light); border-color: var(--primary); }
+.time-slot.selected { background: var(--primary); color: white; border-color: var(--primary-dark); }
+.time-slot.selected:hover { background: var(--danger); }
+@media (max-width: 768px) { .availability-grid { grid-template-columns: repeat(3, 1fr); } }
+@media (max-width: 480px) { .availability-grid { grid-template-columns: 1fr; } }
+</style>
+<script>
+const COACH_TIME_SLOTS = [];
+for (let h = 8; h <= 22; h++) {
+    for (let m = 0; m < 60; m += 30) {
+        const timeStr = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
+        const displayHour = h > 12 ? h - 12 : h;
+        const displayAmpm = h >= 12 ? 'PM' : 'AM';
+        const displayTime = displayHour + ':' + (m < 10 ? '0' : '') + m + ' ' + displayAmpm;
+        COACH_TIME_SLOTS.push({ time: timeStr, display: displayTime });
+    }
+}
+const COACH_DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+let coachSelectedSlots = {};
+
+function loadCoachAvailability() {
+    {% for av in existing_availability %}
+    if (!coachSelectedSlots[{{ av.day_of_week }}]) coachSelectedSlots[{{ av.day_of_week }}] = [];
+    coachSelectedSlots[{{ av.day_of_week }}].push('{{ av.start_time.strftime('%H:%M') }}');
+    {% endfor %}
+}
+
+function renderCoachGrid() {
+    const grid = document.getElementById('availability-grid');
+    let html = '';
+    COACH_DAYS.forEach((day, dayIndex) => {
+        html += '<div class="day-column">';
+        html += '<div class="day-header">' + day.substring(0, 3) + '</div>';
+        COACH_TIME_SLOTS.forEach(slot => {
+            const isSelected = coachSelectedSlots[dayIndex] && coachSelectedSlots[dayIndex].includes(slot.time);
+            const cssClass = isSelected ? 'time-slot selected' : 'time-slot';
+            html += '<div class="' + cssClass + '" data-day="' + dayIndex + '" data-time="' + slot.time + '" onclick="toggleCoachSlot(' + dayIndex + ', \'' + slot.time + '\', this)">' + slot.display + '</div>';
+        });
+        html += '</div>';
+    });
+    grid.innerHTML = html;
+}
+
+function toggleCoachSlot(dayOfWeek, timeStr, element) {
+    if (!coachSelectedSlots[dayOfWeek]) coachSelectedSlots[dayOfWeek] = [];
+    const index = coachSelectedSlots[dayOfWeek].indexOf(timeStr);
+    if (index === -1) {
+        coachSelectedSlots[dayOfWeek].push(timeStr);
+        element.classList.add('selected');
+    } else {
+        coachSelectedSlots[dayOfWeek].splice(index, 1);
+        element.classList.remove('selected');
+    }
+    clearTimeout(window._coachSaveTimeout);
+    window._coachSaveTimeout = setTimeout(saveCoachAvailability, 1000);
+}
+
+function saveCoachAvailability() {
+    const slots = [];
+    for (let day in coachSelectedSlots) {
+        coachSelectedSlots[day].forEach(time => {
+            slots.push({ day_of_week: parseInt(day), start_time: time });
+        });
+    }
+    fetch('{{ url_for("users.manage_coach_availability") }}', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ slots: slots })
+    })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) {
+            const msg = document.createElement('div');
+            msg.className = 'alert alert-success';
+            msg.style.marginTop = '10px';
+            msg.innerHTML = '<i class="fas fa-check"></i> Availability saved!';
+            document.getElementById('availability-grid').appendChild(msg);
+            setTimeout(() => msg.remove(), 3000);
+        }
+    })
+    .catch(err => console.error('Save error:', err));
+}
+
+function clearAllAvailability() {
+    if (!confirm('Are you sure you want to clear all your availability slots?')) return;
+    fetch('{{ url_for("users.clear_coach_availability") }}', { method: 'POST' })
+    .then(r => r.json())
+    .then(data => {
+        if (data.success) {
+            coachSelectedSlots = {};
+            renderCoachGrid();
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    loadCoachAvailability();
+    renderCoachGrid();
+});
+</script>
+{% endif %}
+
+{% if user.role == 'player' %}
+<script>
+// Generate time slots from 5pm (17:00) to 12am (24:00)
+var TIME_SLOTS = [];
+for (var h = 17; h <= 24; h++) {
+    for (var m = 0; m < 60; m += 30) {
+        if (h === 24 && m > 0) continue;
+        var displayHour;
+        var displayAmpm;
+        if (h === 24) {
+            displayHour = 12;
+            displayAmpm = 'AM';
+        } else if (h > 12) {
+            displayHour = h - 12;
+            displayAmpm = 'PM';
+        } else {
+            displayHour = h;
+            displayAmpm = 'PM';
+        }
+        var timeStr = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
+        var displayTime = displayHour + ':' + (m < 10 ? '0' : '') + m + ' ' + displayAmpm;
+        TIME_SLOTS.push({ time: timeStr, display: displayTime });
+    }
+}
+
+var DAYS = [
+    { value: 0, name: 'Monday' },
+    { value: 1, name: 'Tuesday' },
+    { value: 2, name: 'Wednesday' },
+    { value: 3, name: 'Thursday' },
+    { value: 4, name: 'Friday' },
+    { value: 5, name: 'Saturday' },
+    { value: 6, name: 'Sunday' }
+];
+
+// Store selected slots: {day: [time, time, ...]}
+var selectedSlots = {};
+
+function renderDisponibilityGrid() {
+    var grid = document.getElementById('disponibilities-grid');
+    grid.innerHTML = '<div style="margin-bottom: 10px;"><strong>Click time blocks to select your available hours</strong></div>';
+    
+    var container = document.createElement('div');
+    container.className = 'disponibility-grid';
+    
+    DAYS.forEach(function(day) {
+        var dayRow = document.createElement('div');
+        dayRow.className = 'disponibility-day-row';
+        
+        var dayLabel = document.createElement('div');
+        dayLabel.className = 'disponibility-day-label';
+        dayLabel.textContent = day.name;
+        dayRow.appendChild(dayLabel);
+        
+        var timeBlocks = document.createElement('div');
+        timeBlocks.className = 'disponibility-time-blocks';
+        
+        TIME_SLOTS.forEach(function(slot) {
+            var block = document.createElement('div');
+            block.className = 'disponibility-time-block';
+            block.dataset.day = day.value;
+            block.dataset.time = slot.time;
+            block.textContent = slot.display;
+            block.onclick = function() {
+                toggleSlot(day.value, slot.time, block);
+            };
+            timeBlocks.appendChild(block);
+        });
+        
+        dayRow.appendChild(timeBlocks);
+        container.appendChild(dayRow);
+    });
+    
+    grid.appendChild(container);
+    loadMyDisponibilities();
+}
+
+function toggleSlot(day, time, element) {
+    if (!selectedSlots[day]) selectedSlots[day] = [];
+    
+    var index = selectedSlots[day].indexOf(time);
+    if (index > -1) {
+        selectedSlots[day].splice(index, 1);
+        element.classList.remove('selected');
+    } else {
+        selectedSlots[day].push(time);
+        element.classList.add('selected');
+    }
+}
+
+function loadMyDisponibilities() {
+    fetch('{{ url_for("users.get_my_disponibilities") }}')
+        .then(function(response) { return response.json(); })
+        .then(function(data) {
+            selectedSlots = {};
+            
+            for (var day in data) {
+                var slots = data[day];
+                slots.forEach(function(slot) {
+                    selectedSlots[day] = selectedSlots[day] || [];
+                    selectedSlots[day].push(slot.start_time);
+                });
+            }
+            
+            document.querySelectorAll('.disponibility-time-block').forEach(function(block) {
+                var day = block.dataset.day;
+                var time = block.dataset.time;
+                if (selectedSlots[day] && selectedSlots[day].indexOf(time) > -1) {
+                    block.classList.add('selected');
+                } else {
+                    block.classList.remove('selected');
+                }
+            });
+        })
+        .catch(function(error) {
+            console.error('Error loading disponibilities:', error);
+        });
+}
+
+function saveDisponibilities() {
+    var slots = [];
+    for (var day in selectedSlots) {
+        selectedSlots[day].forEach(function(time) {
+            slots.push({ day_of_week: parseInt(day), start_time: time });
+        });
+    }
+    
+    fetch('{{ url_for("users.add_disponibilities_bulk") }}', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': '{{ csrf_token() }}'
+        },
+        body: JSON.stringify({ slots: slots })
+    })
+    .then(function(response) { return response.json(); })
+    .then(function(data) {
+        if (data.success) {
+            var msg = document.createElement('div');
+            msg.className = 'alert alert-success';
+            msg.style.marginTop = '10px';
+            msg.innerHTML = '<i class="fas fa-check"></i> Disponibilities saved successfully!';
+            document.getElementById('disponibilities-grid').appendChild(msg);
+            setTimeout(function() { msg.remove(); }, 3000);
+        }
+    })
+    .catch(function(error) {
+        console.error('Error saving disponibilities:', error);
+    });
+}
+
+function clearDisponibilities() {
+    if (!confirm('Are you sure you want to clear all your disponibilities?')) return;
+    
+    fetch('{{ url_for("users.clear_disponibilities") }}', {
+        method: 'POST',
+        headers: {
+            'X-CSRFToken': '{{ csrf_token() }}'
+        }
+    })
+    .then(function(response) { return response.json(); })
+    .then(function(data) {
+        if (data.success) {
+            selectedSlots = {};
+            document.querySelectorAll('.disponibility-time-block').forEach(function(block) {
+                block.classList.remove('selected');
+            });
+        }
+    });
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', function() {
+    renderDisponibilityGrid();
+});
+</script>
+{% endif %}
+{% endblock %}

app/templates/pages/tryout_form.html

@@ -34,10 +34,15 @@
                         {% endfor %}
                     </select>
                 </div>
-                <div class="form-group col-6">
-                    <label for="date">Date</label>
+                <div class="form-group col-3">
+                    <label for="date">Start Date</label>
                     <input type="date" id="date" name="date" value="{{ tryout.date.strftime('%Y-%m-%d') if tryout else '' }}" required>
                 </div>
+                <div class="form-group col-3">
+                    <label for="end_date">End Date</label>
+                    <input type="date" id="end_date" name="end_date" value="{{ tryout.end_date.strftime('%Y-%m-%d') if tryout and tryout.end_date else '' }}">
+                    <small class="text-muted">Optional. Leave blank for single-day tryout.</small>
+                </div>
             </div>
             <div class="form-row">
                 <div class="form-group col-6">

app/templates/pages/tryouts.html

@@ -29,7 +29,13 @@
                 <div class="info-item">
                     <i class="fas fa-calendar info-icon"></i>
                     <span class="info-label">Date</span>
-                    <span class="info-value">{{ tryout.date.strftime('%b %d, %Y') }}</span>
+                    <span class="info-value">
+                        {% if tryout.end_date and tryout.end_date != tryout.date %}
+                        {{ tryout.date.strftime('%b %d') }} - {{ tryout.end_date.strftime('%b %d, %Y') }}
+                        {% else %}
+                        {{ tryout.date.strftime('%b %d, %Y') }}
+                        {% endif %}
+                    </span>
                 </div>
                 <div class="info-item">
                     <i class="fas fa-map-marker-alt info-icon"></i>

app/templates/pages/view_tryout.html

@@ -9,7 +9,7 @@
         <div class="card-header">
             <h3>Tryout Details</h3>
             <div class="card-actions">
-                {% if can_edit %}
+                {% if can_edit and not tryout.is_ended %}
                 <a href="{{ url_for('matches.create_match', tryout_id=tryout.id) }}" class="btn btn-sm btn-success">
                     <i class="fas fa-futbol"></i> Schedule Match
                 </a>
@@ -24,11 +24,19 @@
                     </select>
                 </form>
                 {% endif %}
-                {% if can_edit %}
+                {% if can_edit and not tryout.is_ended %}
                 <a href="{{ url_for('tryouts.edit_tryout', tryout_id=tryout.id) }}" class="btn btn-sm btn-primary">
                     <i class="fas fa-edit"></i> Edit
                 </a>
                 {% endif %}
+                {% if can_edit %}
+                <form method="POST" action="{{ url_for('tryouts.delete_tryout', tryout_id=tryout.id) }}" class="inline-form" onsubmit="return confirm('Are you sure you want to delete this entire tryout? This will remove all matches, teams, registrations, and evaluations.');">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                    <button type="submit" class="btn btn-sm btn-danger">
+                        <i class="fas fa-trash"></i> Delete Tryout
+                    </button>
+                </form>
+                {% endif %}
             </div>
         </div>
         <div class="card-body">
@@ -39,7 +47,13 @@
                 </div>
                 <div class="detail-item">
                     <span class="detail-label">Date</span>
-                    <span class="detail-value">{{ tryout.date.strftime('%A, %B %d, %Y') }}</span>
+                    <span class="detail-value">
+                        {% if tryout.end_date and tryout.end_date != tryout.date %}
+                        {{ tryout.date.strftime('%B %d') }} - {{ tryout.end_date.strftime('%B %d, %Y') }}
+                        {% else %}
+                        {{ tryout.date.strftime('%A, %B %d, %Y') }}
+                        {% endif %}
+                    </span>
                 </div>
                 <div class="detail-item">
                     <span class="detail-label">Location</span>
@@ -90,7 +104,7 @@
     </div>
     {% endif %}
 
-    {% if can_edit %}
+    {% if can_edit and not tryout.is_ended %}
     <div class="card mb-4">
         <div class="card-header">
             <h3><i class="fas fa-user-plus"></i> Add Player to Tryout</h3>
@@ -176,12 +190,14 @@
                                         <i class="fas fa-sticky-note"></i>
                                     </a>
                                     {% endif %}
+                                    {% if not tryout.is_ended %}
                                     <form method="POST" action="{{ url_for('tryouts.remove_player', tryout_id=tryout.id, player_id=p.id) }}" class="inline-form" onsubmit="return confirm('Remove {{ p.username }} from this tryout? This will also remove them from all teams and matches within this tryout.');">
                                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                         <button type="submit" class="btn btn-sm btn-danger" title="Remove player from tryout">
                                             <i class="fas fa-user-minus"></i> Remove
                                         </button>
                                     </form>
+                                    {% endif %}
                                 </td>
                                 {% endif %}
                             </tr>
@@ -201,14 +217,14 @@
         <div class="card">
             <div class="card-header">
                 <h3><i class="fas fa-users-cog"></i> Teams</h3>
-                {% if can_edit %}
+                {% if can_edit and not tryout.is_ended %}
                 <button class="btn btn-sm btn-primary" onclick="showCreateTeam()">
                     <i class="fas fa-plus"></i> New Team
                 </button>
                 {% endif %}
             </div>
             <div class="card-body">
-                {% if can_edit %}
+                {% if can_edit and not tryout.is_ended %}
                 <div id="createTeamForm" class="hidden mb-3">
                     <form method="POST" action="{{ url_for('tryouts.create_team', tryout_id=tryout.id) }}" class="form-inline">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
@@ -235,7 +251,7 @@
                         <li class="text-muted">No players assigned yet.</li>
                         {% endfor %}
                     </ul>
-                    {% if can_edit and registered_players %}
+                    {% if can_edit and not tryout.is_ended and registered_players %}
                     {% set positions = game_positions.get(tryout.game, []) %}
                     <form method="POST" action="{{ url_for('tryouts.add_to_team', tryout_id=tryout.id, team_id=team.team.id) }}" class="form-inline mt-2">
                         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
@@ -272,7 +288,7 @@
     <div class="card tryout-schedule-card mb-4">
         <div class="card-header">
             <h3><i class="fas fa-futbol"></i> Schedule</h3>
-            {% if can_edit %}
+            {% if can_edit and not tryout.is_ended %}
             <div class="card-actions">
                 <a href="{{ url_for('matches.create_match', tryout_id=tryout.id) }}" class="btn btn-sm btn-success">
                     <i class="fas fa-plus"></i> Schedule Match
@@ -412,9 +428,11 @@
                             </td>
                             {% if can_edit %}
                             <td>
+                                {% if not tryout.is_ended %}
                                 <a href="{{ url_for('matches.edit_match', match_id=m.id) }}" class="btn btn-sm btn-outline">
                                     <i class="fas fa-edit"></i> Edit
                                 </a>
+                                {% endif %}
                                 <a href="{{ url_for('users.add_note_from_match', match_id=m.id) }}" class="btn btn-sm btn-primary" title="Add Note for this Match">
                                     <i class="fas fa-sticky-note"></i> Note
                                 </a>
@@ -575,4 +593,4 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 });
 </script>
-{% endblock %}
+{% endblock %}