{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v=20260520">
<style>
    .top-actions .btn { display: none; }
</style>
{% endblock %}

{% block content %}
<div class="auth-container auth-container--wide">
    <div class="auth-box auth-box--wide">
        <div class="auth-copy-block">
            <h2>Create Account</h2>
            <p>Set your phone and delivery location now so checkout is faster, more accurate, and GPS-ready later.</p>
        </div>

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-success">{{ message }}</div>
            {% endfor %}
        {% endif %}

        {% if form.non_field_errors %}
            <div class="alert alert-error">{{ form.non_field_errors }}</div>
        {% endif %}

        <form method="POST" class="auth-form auth-form--wide" data-location-form>
            {% csrf_token %}
            {{ form.latitude }}
            {{ form.longitude }}
            {{ form.location_accuracy_m }}

            <div class="form-grid auth-form-grid">
                <div class="form-group">
                    <label for="{{ form.username.id_for_label }}">Username</label>
                    {{ form.username }}
                    {% if form.username.errors %}<div class="field-errors">{{ form.username.errors }}</div>{% else %}<small>At least 3 characters</small>{% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.email.id_for_label }}">Email (Optional)</label>
                    {{ form.email }}
                    {% if form.email.errors %}<div class="field-errors">{{ form.email.errors }}</div>{% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.first_name.id_for_label }}">First Name</label>
                    {{ form.first_name }}
                    {% if form.first_name.errors %}<div class="field-errors">{{ form.first_name.errors }}</div>{% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.last_name.id_for_label }}">Last Name</label>
                    {{ form.last_name }}
                    {% if form.last_name.errors %}<div class="field-errors">{{ form.last_name.errors }}</div>{% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.password.id_for_label }}">Password</label>
                    {{ form.password }}
                    {% if form.password.errors %}<div class="field-errors">{{ form.password.errors }}</div>{% else %}<small>At least 6 characters</small>{% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.confirm_password.id_for_label }}">Confirm Password</label>
                    {{ form.confirm_password }}
                    {% if form.confirm_password.errors %}<div class="field-errors">{{ form.confirm_password.errors }}</div>{% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.phone.id_for_label }}">Phone</label>
                    {{ form.phone }}
                    {% if form.phone.errors %}<div class="field-errors">{{ form.phone.errors }}</div>{% else %}<small>Required for delivery updates and order confirmation.</small>{% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.location_label.id_for_label }}">Delivery Location</label>
                    {{ form.location_label }}
                    {% if form.location_label.errors %}<div class="field-errors">{{ form.location_label.errors }}</div>{% else %}<small>City / area / landmark name shown across the app.</small>{% endif %}
                </div>

                <div class="form-group form-group--full">
                    <div class="location-card">
                        <div class="location-card-head">
                            <div>
                                <strong>GPS delivery setup</strong>
                                <p class="field-note">Allow browser location to capture live coordinates and improve delivery accuracy.</p>
                            </div>
                            <button type="button" class="btn btn-secondary small" data-geolocate-btn>Use Current GPS</button>
                        </div>
                        <p class="location-status" data-location-status>
                            {% if form.latitude.value and form.longitude.value %}
                                GPS coordinates are already attached to this account form.
                            {% else %}
                                GPS is optional, but recommended for accurate delivery and support.
                            {% endif %}
                        </p>
                    </div>
                </div>

                <div class="form-group form-group--full">
                    <label for="{{ form.default_address.id_for_label }}">Full Delivery Address</label>
                    {{ form.default_address }}
                    {% if form.default_address.errors %}<div class="field-errors">{{ form.default_address.errors }}</div>{% else %}<small>Required so your first checkout starts prefilled.</small>{% endif %}
                </div>

                <div class="form-group form-group--full form-group--checkbox">
                    <label for="{{ form.register_as_seller.id_for_label }}" class="checkbox-label">
                        {{ form.register_as_seller }}
                        <span>Become a Seller</span>
                    </label>
                    <small>Enable this if you also want to sell products on Hamro Karma.</small>
                </div>
            </div>

            <button type="submit" class="btn-primary">Create Account</button>
        </form>

        <p class="auth-link">Already have an account? <a href="{% url 'login' %}">Login here</a></p>
    </div>
</div>
{% endblock %}