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

{% block content %}
<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ url_for('users.edit_profile') }}" class="form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            <div class="form-row">
                <div class="form-group col-6">
                    <label for="username">{{ _('Username') }}</label>
                    <input type="text" id="username" name="username" value="{{ user.username }}" required>
                </div>
                <div class="form-group col-6">
                    <label for="full_name">{{ _('Full Name') }}</label>
                    <input type="text" id="full_name" name="full_name" value="{{ user.full_name }}" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-6">
                    <label for="email">{{ _('Email') }}</label>
                    <input type="email" id="email" name="email" value="{{ user.email }}" required>
                </div>
                <div class="form-group col-6">
                    <label for="phone">{{ _('Phone') }}</label>
                    <input type="tel" id="phone" name="phone" value="{{ user.phone or '' }}">
                </div>
            </div>

            <hr class="section-divider">
            <h4 class="section-title"><i class="fas fa-gamepad"></i> {{ _('E-Sports Profile') }}</h4>
            <p class="text-muted small">{{ _('Update your competitive gaming profile for tryouts.') }}</p>

            <div class="form-group">
                <label><i class="fas fa-headset"></i> {{ _('Games You Play') }}</label>
                <div class="checkbox-grid">
                    {% for game in esport_games %}
                    {% set games_list = user.get_games_list() %}
                    <label class="checkbox-label">
                        <input type="checkbox" name="games" value="{{ game }}" {% if game in games_list %}checked{% endif %}>
                        <span>{{ game }}</span>
                    </label>
                    {% endfor %}
                </div>
                <small class="form-text text-muted">{{ _('Select all games you\'re signing in for.') }}</small>
            </div>

            <!-- Gamertag inputs - will be shown when game is selected -->
            <div id="gamertag-section" style="display: none;">
                <hr class="section-divider">
                <h4 class="section-title"><i class="fas fa-chart-line"></i> {{ _('Gamertags for TRN') }}</h4>
                <p class="text-muted small">{{ _('Enter your gamertag for each selected game to link to your Tracker Network profile.') }}</p>
                
                {% for game in esport_games %}
                 {% set gamertag_data = user_gamertags.get(game) %}
                 <div class="gamertag-input-row" data-game="{{ game }}" style="display: none;">
                     <h5>{{ game }}</h5>
                    <div class="form-row">
                        <div class="form-group col-6">
                            <label for="gamertag_{{ game }}">{{ _('Gamertag') }}</label>
                            <input type="text" id="gamertag_{{ game }}" name="gamertag_{{ game }}" value="{{ gamertag_data.gamertag if gamertag_data else '' }}" placeholder="Your {{ game }} gamertag">
                        </div>
                        {% if game_platforms.get(game) %}
                        <div class="form-group col-6">
                            <label for="platform_{{ game }}">{{ _('Platform') }}</label>
                            <select id="platform_{{ game }}" name="platform_{{ game }}">
                                <option value="">{{ _('Select Platform') }}</option>
                                {% for platform in game_platforms[game] %}
                                <option value="{{ platform }}" {% if gamertag_data and gamertag_data.platform == platform %}selected{% endif %}>{{ platform }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="form-row">
                <div class="form-group col-6">
                    <label for="discord_username"><i class="fab fa-discord"></i> {{ _('Discord Username') }}</label>
                    <input type="text" id="discord_username" name="discord_username" value="{{ user.discord_username or '' }}" placeholder="{{ _('e.g. Name#1234') }}">
                </div>
                <div class="form-group col-6">
                    <label for="discord_user_id"><i class="fab fa-discord"></i> Discord User ID <small>{{ _('(for DMs)') }}</small></label>
                    <input type="text" id="discord_user_id" name="discord_user_id" value="{{ user.discord_user_id or '' }}" placeholder="{{ _('Numeric ID (e.g. 123456789012345678)') }}">
                    <small class="text-muted">{{ _('Enable Developer Mode in Discord → Right-click profile → Copy ID') }}</small>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-6">
                    <label for="league_os_profile"><i class="fas fa-link"></i> {{ _('League OS Connection') }}</label>
                    <input type="text" id="league_os_profile" name="league_os_profile" value="{{ user.league_os_profile or '' }}" placeholder="{{ _('League OS profile link or ID') }}">
                </div>
            </div>

            <hr class="section-divider">
            <h4 class="section-title"><i class="fas fa-lock"></i> {{ _('Change Password') }}</h4>
            <p class="text-muted small">{{ _('Leave blank to keep your current password.') }}</p>
            <div class="form-group">
                <label for="password">{{ _('New Password') }}</label>
                <input type="password" id="password" name="password" placeholder="{{ _('Enter new password') }}">
            </div>
            
            <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>
            </div>
        </form>
    </div>
</div>

<script nonce="{{ csp_nonce }}">
var GAME_PLATFORMS = {{ game_platforms|tojson }};

// Show/hide gamertag inputs when games are checked
function toggleGamertagInputs() {
    var selectedGames = [];
    document.querySelectorAll('input[name="games"]:checked').forEach(function(cb) {
        selectedGames.push(cb.value);
    });
    
    if (selectedGames.length > 0) {
        document.getElementById('gamertag-section').style.display = 'block';
    } else {
        document.getElementById('gamertag-section').style.display = 'none';
    }
    
    document.querySelectorAll('.gamertag-input-row').forEach(function(row) {
        if (selectedGames.includes(row.dataset.game)) {
            row.style.display = 'block';
        } else {
            row.style.display = 'none';
        }
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Set up event listeners for game checkboxes
    document.querySelectorAll('input[name="games"]').forEach(function(cb) {
        cb.addEventListener('change', toggleGamertagInputs);
    });
    
    // Show gamertag inputs for already selected games
    toggleGamertagInputs();
});
</script>
{% endblock %}