{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-sm border-0">
                <div class="card-body p-4 p-md-5">
                    <h2 class="fw-bold mb-4">Edit Profile</h2>
                    
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <div class="text-center mb-4">
                            <div class="position-relative d-inline-block">
                                <img src="{{ profile.get_avatar_url }}" 
                                     class="rounded-circle border border-3 border-light shadow-sm" 
                                     style="width: 120px; height: 120px; object-fit: cover;"
                                     alt="Current Avatar"
                                     id="avatar-preview">
                                <label for="avatar-input" class="position-absolute bottom-0 end-0 btn btn-sm btn-primary rounded-circle shadow-sm" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                                    <i class="bi bi-camera"></i>
                                </label>
                            </div>
                            <div class="mt-2">
                                <label class="form-label small text-muted">Click the camera icon to upload a new picture</label>
                                <input type="file" name="avatar" id="avatar-input" class="d-none" accept="image/*" onchange="previewImage(this)">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="headline" class="form-label fw-semibold">Gamer Headline</label>
                            <input type="text" class="form-control" id="headline" name="headline" value="{{ profile.professional_headline }}" placeholder="e.g. Competitive Apex Player | Support Main">
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="primary_game" class="form-label fw-semibold">Primary Game</label>
                                <select name="primary_game" id="primary_game" class="form-select">
                                    <option value="">Select a game</option>
                                    {% for game in games %}
                                    <option value="{{ game.id }}" {% if profile.primary_game_id == game.id %}selected{% endif %}>{{ game.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="platform" class="form-label fw-semibold">Platform</label>
                                <select name="platform" id="platform" class="form-select">
                                    <option value="">Select a platform</option>
                                    {% for code, label in platforms %}
                                    <option value="{{ code }}" {% if profile.platform == code %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="gamer_tag" class="form-label fw-semibold">Gamer Tag</label>
                                <input type="text" class="form-control" id="gamer_tag" name="gamer_tag" value="{{ profile.gamer_tag }}" placeholder="e.g. Ninja#1234">
                            </div>
                            <div class="col-md-4">
                                <label for="rank" class="form-label fw-semibold">Current Rank</label>
                                <input type="text" class="form-control" id="rank" name="rank" value="{{ profile.rank }}" placeholder="e.g. Diamond II">
                            </div>
                            <div class="col-md-4">
                                <label for="preferred_role" class="form-label fw-semibold">Preferred Role</label>
                                <input type="text" class="form-control" id="preferred_role" name="preferred_role" value="{{ profile.preferred_role }}" placeholder="e.g. Tank / Support">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="location" class="form-label fw-semibold">Location (City)</label>
                            <input type="text" class="form-control" id="location" name="location" value="{{ profile.location_city }}" placeholder="e.g. Austin, TX">
                        </div>

                        <div class="mb-4">
                            <label for="bio" class="form-label fw-semibold">Gamer Bio</label>
                            <textarea class="form-control" id="bio" name="bio" rows="4" placeholder="Tell others about your playstyle, schedule, and what kind of teammates you're looking for...">{{ profile.bio }}</textarea>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary py-2 fw-bold text-uppercase">Save Changes</button>
                            <a href="{% url 'my_profile' %}" class="btn btn-outline-secondary py-2 fw-bold text-uppercase">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('avatar-preview').src = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
{% endblock %}
