{% extends "base.html" %}
{% block title %}Sign Up — WeightTracker{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="auth-card">
        <h1>⚖️ WeightTracker</h1>
        <p class="auth-subtitle">Join the competition. Track your progress.</p>

        <form method="POST" action="{{ url_for('auth.signup') }}">
            <div class="form-group">
                <label class="form-label" for="username">Username</label>
                <input class="form-input" type="text" id="username" name="username" placeholder="Pick a username"
                    required autofocus>
            </div>

            <div class="form-group">
                <label class="form-label" for="password">Password</label>
                <input class="form-input" type="password" id="password" name="password"
                    placeholder="At least 4 characters" required minlength="4">
            </div>

            <div class="form-group">
                <label class="form-label" for="display_name">Display Name</label>
                <input class="form-input" type="text" id="display_name" name="display_name"
                    placeholder="How your friends will see you">
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="height_cm">Height (cm)</label>
                    <input class="form-input" type="number" id="height_cm" name="height_cm" placeholder="175"
                        step="0.1">
                </div>
                <div class="form-group">
                    <label class="form-label" for="starting_weight_kg">Starting Weight (kg)</label>
                    <input class="form-input" type="number" id="starting_weight_kg" name="starting_weight_kg"
                        placeholder="80" step="0.1">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label" for="age">Age</label>
                    <input class="form-input" type="number" id="age" name="age" placeholder="25">
                </div>
                <div class="form-group">
                    <label class="form-label" for="gender">Gender</label>
                    <select class="form-input" id="gender" name="gender">
                        <option value="">Select...</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="other">Other</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="goal_weight_kg">Goal Weight (kg)</label>
                <input class="form-input" type="number" id="goal_weight_kg" name="goal_weight_kg" placeholder="70"
                    step="0.1">
            </div>

            <div class="form-group" style="margin-top: 0.5rem;">
                <label class="toggle-label" for="is_private"
                    style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
                    <span class="toggle-switch">
                        <input type="checkbox" id="is_private" name="is_private">
                        <span class="toggle-slider"></span>
                    </span>
                    <span>
                        <span style="font-weight: 600; color: var(--text-primary);">🔒 Private Account</span>
                        <span
                            style="display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem;">Only
                            you can see your check-ins</span>
                    </span>
                </label>
            </div>

            <button type="submit" class="btn btn-primary btn-block btn-lg" style="margin-top: 0.5rem;">Create
                Account</button>
        </form>

        <p class="auth-footer">Already have an account? <a href="{{ url_for('auth.login') }}">Log in</a></p>
    </div>
</div>
{% endblock %}