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

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

{% block content %}
<section class="profile-container">
    <div class="profile-shell">
        <div class="profile-head">
            <div class="profile-avatar">
                {% if user.profile.image %}
                    <img src="{{ user.profile.image.url }}" alt="{{ user.username }}" />
                {% else %}
                    <div class="avatar-placeholder">{{ user.username|slice:":1"|upper }}</div>
                {% endif %}
            </div>
            <div>
                <h1>{{ user.username }}</h1>
                <p>{{ user.email|default:'No email added yet' }}</p>
                {% if user.profile.is_seller %}
                <p>Seller Account: Active</p>
                {% endif %}
            </div>
        </div>

        <div class="profile-stats">
            <div class="stat-card"><h3>{{ orders_count }}</h3><p>Total Orders</p></div>
            <div class="stat-card"><h3>{{ delivered_count }}</h3><p>Delivered</p></div>
            <div class="stat-card"><h3>{{ pending_count }}</h3><p>In Progress</p></div>
            <div class="stat-card"><h3>{{ wishlist_count }}</h3><p>Wishlist</p></div>
            <div class="stat-card"><h3>Rs. {{ total_spent|floatformat:2 }}</h3><p>Total Spent</p></div>
            <div class="stat-card"><h3>{{ user.date_joined|date:'Y' }}</h3><p>Member Since</p></div>
        </div>

        <div class="profile-panel">
            <h2>Recent Orders</h2>
            {% if recent_orders %}
                <div class="recent-orders">
                    {% for order in recent_orders %}
                        <a href="{% url 'order_detail' order.id %}" class="recent-order-row">
                            <span>#{{ order.id }}</span>
                            <span>{{ order.created_at|date:'M d, Y' }}</span>
                            <span>{{ order.status }}</span>
                            <strong>Rs. {{ order.total_price|floatformat:2 }}</strong>
                        </a>
                    {% endfor %}
                </div>
            {% else %}
                <p>No orders yet.</p>
            {% endif %}
        </div>

        <div class="profile-actions">
            <a href="{% url 'wishlist' %}" class="btn btn-secondary">Open Wishlist</a>
            <a href="{% url 'my_orders' %}" class="btn btn-secondary">View Orders</a>
            <a href="{% url 'edit_profile' %}" class="btn btn-secondary">Edit Profile</a>
            <a href="{% url 'logout' %}" class="btn btn-primary">Logout</a>
        </div>
    </div>
</section>
{% endblock %}