{% extends 'shop/base.html' %}
{% block title %}Edit Profile - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-lg p-4 border-0 rounded-4">
                <h2 class="text-center fw-bold text-success mb-3">Edit Profile</h2>
                <hr>

                <form method="POST" enctype="multipart/form-data" id="editProfileForm">
                    {% csrf_token %}

                    <!-- ✅ Profile Picture Preview -->
                    <div class="text-center mb-4">
                        {% if user.profile.image %}
                            <img src="{{ user.profile.image.url }}" alt="Profile Picture" width="80"height="80" class="profile-img rounded-4">
                        {% else %}
                            <i class="fas fa-user-circle profile-icon"></i>
                        {% endif %}
                    </div>

                    <!-- ✅ Username -->
                    <div class="mb-3">
                        <label class="form-label fw-bold">Username</label>
                        {{ user_form.username }}
                    </div>

                    <!-- ✅ Email -->
                    <div class="mb-3">
                        <label class="form-label fw-bold">Email</label>
                        {{ user_form.email }}
                    </div>

                    <!-- ✅ Profile Picture Upload -->
                    <div class="mb-3">
                        <label class="form-label fw-bold">Profile Picture</label>
                        {{ profile_form.image }}
                    </div>

                    <!-- ✅ Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{% url 'profile' %}" class="btn btn-outline-secondary fw-semibold">Cancel</a>
                        <button type="submit" class="btn btn-success fw-semibold">
                            <i class="fas fa-save me-1"></i> Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- ✅ SweetAlert for Success Message -->
{% if profile_updated %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    Swal.fire({
        icon: 'success',
        title: 'Profile Updated',
        text: 'Your profile has been successfully updated!',
        timer: 2500,
        showConfirmButton: false,
        toast: true,
        position: 'top-end'
    });
</script>
{% endif %}

{% endblock %}