team-tryouts/app/templates/pages/profile.html

{% extends "layouts/base.html" %}
{% block title %}{{ _('My Profile') }} - TryoutPro{% endblock %}
{% block page_title %}{{ _('My Profile') }}{% endblock %}
{% block breadcrumb %}<span class="breadcrumb">Home / Profile</span>{% endblock %}

{% block header_actions %}
<div class="header-actions">
    <a href="{{ url_for('users.list_contracts') }}" class="btn btn-sm btn-info">
        <i class="fas fa-file-contract"></i> {{ _('Contracts') }}
    </a>
    <a href="{{ url_for('users.edit_profile') }}" class="btn btn-sm btn-primary">
        <i class="fas fa-edit"></i> {{ _('Edit Profile') }}
    </a>
</div>
{% endblock %}

{% block content %}
<div class="dashboard-grid">
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-user-circle"></i> {{ _('Account Information') }}</h3>
        </div>
        <div class="card-body">
            <div class="profile-header">
<div class="user-avatar avatar-xl">{{ user.username[:2] | upper }}</div>
                <div class="profile-info">
<h2>{{ user.username }}</h2>
                    <span class="text-muted" style="font-size: 1.1em;">{{ user.full_name }}</span>
                    <span class="badge badge-{{ user.role }} badge-lg">{{ user.role | capitalize }}</span>
                    <p class="text-muted">Member since {{ user.created_at.strftime('%B %Y') }}</p>
                </div>
            </div>
            <div class="detail-grid mt-4">
                <div class="detail-item">
                    <span class="detail-label">Username</span>
                    <span class="detail-value">{{ user.username }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Email</span>
                    <span class="detail-value">{{ user.email }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Phone</span>
                    <span class="detail-value">{{ user.phone or 'Not provided' }}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Account Status</span>
                    <span class="detail-value">
                        {% if user.is_active_account %}
                        <span class="badge badge-success">Active</span>
                        {% else %}
                        <span class="badge badge-danger">Inactive</span>
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- E-Sports Profile Card -->
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-gamepad"></i> {{ _('E-Sports Profile') }}</h3>
        </div>
        <div class="card-body">
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="detail-label"><i class="fas fa-gamepad"></i> {{ _('Gamertags') }}</span>
                    <span class="detail-value">
                        {% set games_list = user.get_games_list() %}
                        {% if games_list %}
                            <div style="display: flex; flex-direction: column; gap: 8px;">
                                {% for game in games_list %}
                                {% set gt = user.gamertags | selectattr('game', 'equalto', game) | first %}
                                <div>
                                    {% if gt and gt.get_trn_url() %}
                                    <a href="{{ gt.get_trn_url() }}" target="_blank" rel="noopener noreferrer" class="trn-link">
                                        <span class="badge badge-esport" style="margin-right: 8px;">{{ game }}</span>
                                        <i class="fas fa-external-link-alt"></i> {{ gt.gamertag }}
                                        {% if gt.platform %}<small>({{ gt.platform }})</small>{% endif %}
                                    </a>
                                    {% else %}
                                    <span class="badge badge-esport">{{ game }}</span>
                                    {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <span class="text-muted">Not specified</span>
                        {% endif %}
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label"><i class="fab fa-discord"></i> {{ _('Discord') }}</span>
                    <span class="detail-value">
                        {% if user.discord_username %}
                        {{ user.discord_username }}
                        {% else %}
                        <span class="text-muted">Not connected</span>
                        {% endif %}
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label"><i class="fas fa-link"></i> {{ _('League OS') }}</span>
                    <span class="detail-value">
                        {% if user.league_os_profile %}
                        <a href="{{ user.league_os_profile }}" target="_blank" rel="noopener noreferrer" class="trn-link">
                            <i class="fas fa-external-link-alt"></i> {{ user.league_os_profile }}
                        </a>
                        {% else %}
                        <span class="text-muted">Not connected</span>
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-chart-bar"></i> {{ _('My Statistics') }}</h3>
        </div>
        <div class="card-body">
            {% if user.role == 'player' %}
            <div class="profile-stats">
                <div class="stat-item">
                    <h4>{{ user.tryout_registrations.count() }}</h4>
                    <p>{{ _('Tryouts Registered') }}</p>
                </div>
                <div class="stat-item">
                    <h4>{{ user.team_assignments.count() }}</h4>
                    <p>{{ _('Team Assignments') }}</p>
                </div>
            </div>
            {% elif user.can_evaluate() %}
            <div class="profile-stats">
                <div class="stat-item">
                    <h4>{{ user.evaluations_given.count() }}</h4>
                    <p>{{ _('Evaluations Given') }}</p>
                </div>
            </div>
            {% else %}
            <p class="text-muted">{{ _('No statistics available for this role.') }}</p>
            {% endif %}
        </div>
    </div>

    <!-- Contracts Card -->
    {% if user.role == 'player' %}
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-file-contract"></i> {{ _('My Contracts') }}</h3>
        </div>
        <div class="card-body">
            {% if contracts %}
            <div class="detail-grid">
                <div class="detail-item">
                    <span class="detail-label">Contracts Pending</span>
                    <span class="detail-value">
                        {% set pending = contracts | selectattr('status', 'equalto', 'pending') | list %}
                        <span class="badge badge-{{ 'warning' if pending|length > 0 else 'success' }}">{{ pending | length }}</span>
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Contracts Signed</span>
                    <span class="detail-value">
                        {% set signed = contracts | selectattr('status', 'equalto', 'signed') | list %}
                        <span class="badge {% if signed %}badge-success{% else %}badge-secondary{% endif %}">{{ signed | length }}</span>
                    </span>
                </div>
            </div>
            <div class="mt-3">
                <a href="{{ url_for('users.list_contracts') }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-folder-open"></i> {{ _('View All Contracts') }}
                </a>
            </div>
            {% else %}
            <p class="text-muted">{{ _('No contracts have been uploaded for you yet.') }}</p>
            {% endif %}
        </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" data-action="save-disponibilities">
                    <i class="fas fa-save"></i> {{ _('Save Disponibilities') }}
                </button>
                <button type="button" class="btn btn-secondary" data-action="clear-disponibilities">
                    <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" data-action="clear-availability">
                    <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 nonce="{{ csp_nonce }}">
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 = {};

// Drag state for coach grid
let coachDragMode = false;
let coachDragAction = null;

function applyCoachSlotAction(dayOfWeek, timeStr, element) {
    if (!coachSelectedSlots[dayOfWeek]) coachSelectedSlots[dayOfWeek] = [];
    const index = coachSelectedSlots[dayOfWeek].indexOf(timeStr);
    if (coachDragAction === 'select' && index === -1) {
        coachSelectedSlots[dayOfWeek].push(timeStr);
        element.classList.add('selected');
    } else if (coachDragAction === 'deselect' && index > -1) {
        coachSelectedSlots[dayOfWeek].splice(index, 1);
        element.classList.remove('selected');
    }
}

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 + '">' + slot.display + '</div>';
        });
        html += '</div>';
    });
    grid.innerHTML = html;

    // Drag event listeners
    grid.addEventListener('mousedown', function(e) {
        const slot = e.target.closest('.time-slot');
        if (!slot) return;
        e.preventDefault();
        coachDragMode = true;
        const day = parseInt(slot.dataset.day);
        const time = slot.dataset.time;
        if (!coachSelectedSlots[day]) coachSelectedSlots[day] = [];
        const isSelected = coachSelectedSlots[day].indexOf(time) > -1;
        coachDragAction = isSelected ? 'deselect' : 'select';
        applyCoachSlotAction(day, time, slot);
    });

    grid.addEventListener('mousemove', function(e) {
        if (!coachDragMode) return;
        const slot = e.target.closest('.time-slot');
        if (!slot) return;
        applyCoachSlotAction(parseInt(slot.dataset.day), slot.dataset.time, slot);
    });

    document.addEventListener('mouseup', function() {
        if (coachDragMode) {
            coachDragMode = false;
            coachDragAction = null;
            saveCoachAvailability();
        }
    });
}

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 nonce="{{ csp_nonce }}">
// 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 = {};

// Drag state
var dispDragMode = false;
var dispDragAction = null; // 'select' or 'deselect'

function applySlotAction(block, action) {
    var day = parseInt(block.dataset.day);
    var time = block.dataset.time;
    if (!selectedSlots[day]) selectedSlots[day] = [];
    var index = selectedSlots[day].indexOf(time);
    if (action === 'select' && index === -1) {
        selectedSlots[day].push(time);
        block.classList.add('selected');
    } else if (action === 'deselect' && index > -1) {
        selectedSlots[day].splice(index, 1);
        block.classList.remove('selected');
    }
}

function renderDisponibilityGrid() {
    var grid = document.getElementById('disponibilities-grid');
    grid.innerHTML = '<div style="margin-bottom: 10px;"><strong>{{ _('Click or click-and-drag 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;
            timeBlocks.appendChild(block);
        });
        
        dayRow.appendChild(timeBlocks);
        container.appendChild(dayRow);
    });
    
    // Drag event listeners on the container
    container.addEventListener('mousedown', function(e) {
        var block = e.target.closest('.disponibility-time-block');
        if (!block) return;
        e.preventDefault();
        dispDragMode = true;
        var day = parseInt(block.dataset.day);
        var time = block.dataset.time;
        if (!selectedSlots[day]) selectedSlots[day] = [];
        var isSelected = selectedSlots[day].indexOf(time) > -1;
        dispDragAction = isSelected ? 'deselect' : 'select';
        applySlotAction(block, dispDragAction);
    });
    
    container.addEventListener('mousemove', function(e) {
        if (!dispDragMode) return;
        var block = e.target.closest('.disponibility-time-block');
        if (!block) return;
        applySlotAction(block, dispDragAction);
    });
    
    document.addEventListener('mouseup', function() {
        if (dispDragMode) {
            dispDragMode = false;
            dispDragAction = null;
            saveDisponibilities();
        }
    });
    
    grid.appendChild(container);
    loadMyDisponibilities();
}

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();
});

// Behaviours are declared in the markup with data-action / data-change and
// dispatched by the delegated listener in main.js. This replaces inline
// onclick attributes, which no CSP nonce is able to authorise.
registerActions({
    'save-disponibilities': saveDisponibilities,
    'clear-disponibilities': clearDisponibilities,
    'clear-availability': clearAllAvailability,
});
</script>
{% endif %}
{% endblock %}