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

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/profile.css' %}?v=20260520">
{% endblock %}

{% block content %}
<section class="profile-container">
    <div class="profile-shell">
        <div class="profile-panel">
            <div class="profile-section-head">
                <div>
                    <h1>Edit Profile</h1>
                    <p>Manage your account info, saved phone number, address, and GPS delivery preference.</p>
                </div>
                <a href="{% url 'profile' %}" class="btn btn-secondary">Back to Profile</a>
            </div>

            <form method="post" enctype="multipart/form-data" class="profile-edit-form" data-location-form>
                {% csrf_token %}
                {{ form.latitude }}
                {{ form.longitude }}
                {{ form.location_accuracy_m }}

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

                <div class="form-grid profile-form-grid">
                    <div class="form-row">
                        <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-row">
                        <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-row">
                        <label for="{{ form.email.id_for_label }}">Email</label>
                        {{ form.email }}
                        {% if form.email.errors %}<div class="field-errors">{{ form.email.errors }}</div>{% endif %}
                    </div>
                    <div class="form-row">
                        <label for="{{ form.phone.id_for_label }}">Phone</label>
                        {{ form.phone }}
                        {% if form.phone.errors %}<div class="field-errors">{{ form.phone.errors }}</div>{% endif %}
                    </div>

                    <div class="form-row form-row--full">
                        <label for="{{ form.location_label.id_for_label }}">Delivery location label</label>
                        {{ form.location_label }}
                        {% if form.location_label.errors %}<div class="field-errors">{{ form.location_label.errors }}</div>{% else %}<small class="field-note">Shown in the navbar and used as your quick delivery area.</small>{% endif %}
                    </div>

                    <div class="form-row form-row--full">
                        <div class="location-card">
                            <div class="location-card-head">
                                <div>
                                    <strong>GPS delivery pin</strong>
                                    <p class="field-note">Refresh your exact coordinates when you move or want more accurate delivery support.</p>
                                </div>
                                <button type="button" class="btn btn-secondary small" data-geolocate-btn>Update GPS</button>
                            </div>
                            <p class="location-status" data-location-status>
                                {% if profile.has_precise_location %}
                                    GPS is saved for this account. Update it anytime if your delivery point changes.
                                {% else %}
                                    No exact GPS saved yet. You can still use a manual address, but GPS improves delivery accuracy.
                                {% endif %}
                            </p>
                            {% if profile.location_updated_at %}
                            <small class="field-note">Last GPS update: {{ profile.location_updated_at|date:'M d, Y H:i' }}</small>
                            {% endif %}
                        </div>
                    </div>

                    <div class="form-row form-row--full">
                        <label for="{{ form.default_address.id_for_label }}">Default delivery address</label>
                        {{ form.default_address }}
                        {% if form.default_address.errors %}<div class="field-errors">{{ form.default_address.errors }}</div>{% endif %}
                    </div>

                    <div class="form-row form-row--full">
                        <label for="{{ form.bio.id_for_label }}">Bio</label>
                        {{ form.bio }}
                        {% if form.bio.errors %}<div class="field-errors">{{ form.bio.errors }}</div>{% endif %}
                    </div>

                    <div class="form-row form-row--full">
                        <label for="{{ form.image.id_for_label }}">Profile picture</label>
                        {% if profile.image %}
                            <div class="current-image"><img src="{{ profile.image.url }}" alt="avatar"/></div>
                        {% endif %}
                        {{ form.image }}
                        {% if form.image.errors %}<div class="field-errors">{{ form.image.errors }}</div>{% endif %}
                    </div>
                </div>

                <div class="profile-edit-actions">
                    <button class="btn btn-primary" type="submit">Save Changes</button>
                    <a href="{% url 'profile' %}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</section>
{% endblock %}