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

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}">
{% endblock %}

{% block content %}
<section class="page-header">
    <div>
        <h1>My Orders</h1>
        <p>Track your purchases and open any order to view full details.</p>
    </div>
</section>

<div class="orders-list">
    {% if orders %}
        {% for order in orders %}
            <article class="order-card">
                <div class="order-card-header">
                    <div>
                        <h2>Order #{{ order.id }}</h2>
                        <p>{{ order.created_at|date:"M d, Y" }} | <span class="status-tag status-{{ order.status|lower }}">{{ order.status }}</span></p>
                    </div>
                    <a href="{% url 'order_detail' order.id %}" class="btn btn-secondary">View Details</a>
                </div>

                <div class="order-card-items">
                    {% for item in order.items.all|slice:":3" %}
                    <div class="order-thumb">
                        {% if item.product.image %}
                        <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}">
                        {% else %}
                        <span class="thumb-placeholder">{{ item.product.name|slice:":1"|upper }}</span>
                        {% endif %}
                    </div>
                    {% endfor %}
                    {% if order.items.count > 3 %}
                    <div class="order-thumb more">+{{ order.items.count|add:'-3' }}</div>
                    {% endif %}
                </div>

                <div class="order-meta">
                    <span>Total: Rs. {{ order.total_price|floatformat:2 }}</span>
                    <span>{{ order.items.count }} item{{ order.items.count|pluralize }}</span>
                    <span>Payment: {{ order.payment_method }}</span>
                </div>
            </article>
        {% endfor %}
    {% else %}
        <div class="empty-state">
            <h2>No orders yet.</h2>
            <p>Start shopping and your orders will appear here.</p>
            <a href="{% url 'product_list' %}" class="btn btn-primary">Browse Products</a>
        </div>
    {% endif %}
</div>
{% endblock %}