{% extends 'base.html' %}

{% block title %}My Orders - Thangka Arts{% endblock %}

{% block content %}
<div class="container py-5">
    <h1 class="fw-bold mb-4">My Orders</h1>
    
    {% if orders %}
        <div class="row g-4">
            {% for order in orders %}
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h6 class="mb-0">Order #{{ order.order_number }}</h6>
                                <small class="text-muted">{{ order.created|date:"F j, Y" }}</small>
                            </div>
                            <div class="col-md-6 text-md-end">
                                <span class="badge bg-{% if order.status.code == 'delivered' %}success{% elif order.status.code == 'shipped' %}info{% elif order.status.code == 'processing' %}warning{% else %}secondary{% endif %} me-2">
                                    {{ order.status.name }}
                                </span>
                                <span class="badge bg-{% if order.payment_status.code == 'paid' %}warning{% else %}danger{% endif %}">
                                    {{ order.payment_status.name }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h6>Order Items:</h6>
                                {% for item in order.items.all %}
                                <div class="d-flex justify-content-between mb-2">
                                    <span>{{ item.product_name }} x {{ item.quantity }}</span>
                                    <span>${{ item.total_price }}</span>
                                </div>
                                {% endfor %}
                            </div>
                            <div class="col-md-4 text-md-end">
                                <div class="mb-2">
                                    <strong>Total: ${{ order.total_amount }}</strong>
                                </div>
                                <a href="{% url 'orders:order_detail' order.id %}" class="btn btn-outline-primary btn-sm">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-5">
            <i class="fas fa-shopping-bag fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">No orders yet</h4>
            <p class="text-muted">Start shopping for beautiful Thangka paintings</p>
            <a href="{% url 'products:product_list' %}" class="btn btn-primary">
                <i class="fas fa-shopping-bag me-2"></i>Browse Products
            </a>
        </div>
    {% endif %}
</div>
{% endblock %}