{% extends "layouts/base.html" %}
{% block title %}Register - TryoutPro{% endblock %}
{% block auth_content %}
<form method="POST" action="{{ url_for('auth.register') }}" class="auth-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <div class="form-group">
        <label for="full_name"><i class="fas fa-id-card"></i> Full Name</label>
        <input type="text" id="full_name" name="full_name" placeholder="Enter your full name" required>
    </div>
    <div class="form-group">
        <label for="username"><i class="fas fa-user"></i> Username</label>
        <input type="text" id="username" name="username" placeholder="Choose a username" required>
    </div>
    <div class="form-group">
        <label for="email"><i class="fas fa-envelope"></i> Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
    </div>
    <div class="form-group">
        <label for="phone"><i class="fas fa-phone"></i> Phone (Optional)</label>
        <input type="tel" id="phone" name="phone" placeholder="Enter your phone number">
    </div>

    <hr class="section-divider">
    <h4 class="section-title"><i class="fas fa-gamepad"></i> E-Sports Profile</h4>
    <p class="text-muted small">Set up 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 %}
            <label class="checkbox-label">
                <input type="checkbox" name="games" value="{{ game }}">
                <span>{{ game }}</span>
            </label>
            {% endfor %}
        </div>
        <small class="form-text text-muted">Select all games you're signing in for.</small>
    </div>
    <div class="form-group">
        <label for="trn_username"><i class="fas fa-chart-line"></i> TRN (Tracker Network) Username</label>
        <input type="text" id="trn_username" name="trn_username" placeholder="e.g. YourTrackerGGUsername">
        <small class="form-text text-muted">Your public Tracker Network profile name. Others can click it to view your stats.</small>
    </div>
    <div class="form-group">
        <label for="discord_username"><i class="fab fa-discord"></i> Discord Username</label>
        <input type="text" id="discord_username" name="discord_username" placeholder="e.g. YourName#1234">
    </div>
    <div class="form-group">
        <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" placeholder="League OS profile link or ID">
        <small class="form-text text-muted">Connect your League OS profile for organized play.</small>
    </div>

    <hr class="section-divider">
    <div class="form-group">
        <label for="password"><i class="fas fa-lock"></i> Password</label>
        <input type="password" id="password" name="password" placeholder="Create a password" required minlength="6">
    </div>
    <div class="form-group">
        <label for="confirm_password"><i class="fas fa-check-circle"></i> Confirm Password</label>
        <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm your password" required>
    </div>
    <button type="submit" class="btn btn-primary btn-block">Create Account</button>
    <p class="auth-link">Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></p>
</form>
{% endblock %}