2026-05-20 10:50:30 +00:00

111 lines
5.8 KiB
HTML

{% 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 %}