{% extends 'shop/base.html' %}
{% block title %}My 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 text-center">
                <!-- Profile Picture -->
                <div class="profile-image-container">
                    {% if user.profile.image %}
                        <img src="{{ user.profile.image.url }}" alt="Profile Picture" class="profile-img profile-page-img">
                    {% else %}
                        <i class="fas fa-user-circle profile-icon"></i> <!-- Default FontAwesome Icon -->
                    {% endif %}
                </div>

                <h3 class="mt-3 fw-bold">{{ user.username }}</h3>
                <p class="text-muted">Joined on {{ user.date_joined|date:"F d, Y" }}</p>

                <hr class="my-3">

                <!-- Profile Details -->
                <div class="text-start px-3">
                    <p><i class="fas fa-envelope me-2"></i> <strong>Email:</strong> {{ user.email }}</p>
                    <p><i class="fas fa-user-tag me-2"></i> <strong>Role:</strong> {{ user.get_user_type_display }}</p>
                </div>

                <hr class="my-3">

                <!-- Buttons -->
                <div class="d-flex justify-content-center gap-3">
                    <a href="{% url 'edit_profile' %}" class="btn btn-outline-primary px-4">
                        <i class="fas fa-edit me-2"></i> Edit Profile
                    </a>
                    <a href="{% url 'logout' %}" class="btn btn-outline-danger px-4">
                        <i class="fas fa-sign-out-alt me-2"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Profile Card */
.card {
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease-in-out;
}

.card:hover {
    transform: scale(1.02);
}

/* Profile Picture Styling */
.profile-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Profile Page Image */
.profile-page-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #148818;
    transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.profile-page-img:hover {
    transform: scale(1.1);
    border-color: #0f6f12;
}

/* Default FontAwesome Profile Icon */
.profile-icon {
    font-size: 120px;
    color: #148818;
}

/* Buttons */
.btn {
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
}

.btn-outline-primary:hover {
    background: #148818;
    color: white;
}

.btn-outline-danger:hover {
    background: red;
    color: white;
}

</style>

<!-- FontAwesome for Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
{% endblock %}