{% extends "base.html" %}

{% block title %}Create Your Profile - SnapStyle{% endblock %}

{% block content %}
<div class="container profile-form-container">
    <div class="row justify-content-center">
        <div class="col-lg-8">

            <h1 class="text-center">Create Your Style Profile</h1>
            <p class="text-center text-muted mb-5">This information helps us find the perfect fit for you. Fields marked with * are required.</p>

            <form method="POST" action="{% url 'profile_setup' %}">
                {% csrf_token %}

                <!-- Section 1: Basic Info -->
                <div class="form-section">
                    <h2>Basic Info</h2>
                    <div class="mb-3">
                        <label for="fullName" class="form-label">Full name *</label>
                        <input type="text" class="form-control" id="fullName" name="full_name" placeholder="Enter your full name" required>
                    </div>
                    <div class="mb-3">
                        <label for="displayName" class="form-label">Display name (optional)</label>
                        <input type="text" class="form-control" id="displayName" name="display_name" placeholder="How you want to appear in SnapStyle">
                    </div>
                    <div class="mb-3">
                        <label for="country" class="form-label">Country *</label>
                        <input type="text" class="form-control" id="country" name="country" placeholder="e.g. United States" required>
                        <!-- In a real app, this would be a dropdown -->
                    </div>
                </div>

                <!-- Section 2: Body Info -->
                <div class="form-section">
                    <h2>Body Info</h2>
                    <div class="mb-3">
                        <label for="height" class="form-label">Height (cm) *</label>
                        <input type="number" class="form-control" id="height" name="height_cm" placeholder="e.g. 170" min="120" max="250" required>
                        <div class="form-text">Please enter a valid height between 120cm and 250cm.</div>
                    </div>
                    <div class="mb-3">
                        <label for="weight" class="form-label">Weight (kg) (optional)</label>
                        <input type="number" class="form-control" id="weight" name="weight_kg" placeholder="e.g. 65">
                    </div>
                </div>

                <!-- Section 3: Sizes -->
                <div class="form-section">
                    <h2>Sizes</h2>
                    <div class="mb-3">
                        <label for="topSize" class="form-label">Top size *</label>
                        <select class="form-select" id="topSize" name="top_size" required>
                            <option selected disabled value="">Choose...</option>
                            <option value="XS">XS</option>
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                            <option value="XXL">XXL</option>
                            <option value="OTHER">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="bottomSize" class="form-label">Bottom size *</label>
                        <input type="text" class="form-control" id="bottomSize" name="bottom_size" placeholder="e.g. 30/30, M, 32" required>
                    </div>
                </div>

                <!-- Section 4: Style preferences -->
                <div class="form-section">
                    <h2>Style Preferences</h2>
                    <div class="mb-3">
                        <label class="form-label">Favorite colors * (select at least one)</label>
                        <div>
                            {% for color in 'Black,White,Beige,Blue,Red,Green,Pink,Grey,Brown'.split(',') %}
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="color{{ forloop.counter }}" name="favorite_colors" value="{{ color }}">
                                <label class="form-check-label" for="color{{ forloop.counter }}">{{ color }}</label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Favorite categories * (select at least one)</label>
                        <div>
                            {% for cat in 'Tops,Dresses,Jeans,Suits,Streetwear,Sneakers,Heels,Jewelry,Bags'.split(',') %}
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="cat{{ forloop.counter }}" name="favorite_categories" value="{{ cat }}">
                                <label class="form-check-label" for="cat{{ forloop.counter }}">{{ cat }}</label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Typical budget *</label>
                        <div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="budget_level" id="budgetLow" value="LOW" required>
                                <label class="form-check-label" for="budgetLow">Low (most items under $50)</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="budget_level" id="budgetMedium" value="MEDIUM">
                                <label class="form-check-label" for="budgetMedium">Medium (most items $50–$150)</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="budget_level" id="budgetHigh" value="HIGH">
                                <label class="form-check-label" for="budgetHigh">High (most items above $150)</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-grid">
                    <button type="submit" class="btn btn-primary btn-lg">Save Profile</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}
