{% extends 'base.html' %}
{% block content %}
<div class="container mt-4 mb-5">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1">My Orders</h2>
            <p class="text-muted">Track and manage all your purchases</p>
        </div>
        <a href="{% url 'shop:product_list' %}" class="btn btn-outline-primary">
            <i class="fas fa-shopping-bag"></i> Continue Shopping
        </a>
    </div>

    {% if orders %}
    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width: 110px;">Order ID</th>
                        <th>Date & Time</th>
                        <th class="text-end">Total Amount</th>
                        <th style="width: 160px;">Status</th>
                        <th style="width: 200px;">Actions</th>
                    </tr>
                </thead>
                <tbody id="orders-table"
                    hx-get="{% url 'shop:order_list' %}"
                    hx-trigger="every 10s"
                    hx-swap="innerHTML">
                    {% include 'shop/partials/order_rows.html' with orders=orders %}
                
                </tbody>
            </table>
        </div>
    </div>

    <div class="text-center mt-4 text-muted small">
        Showing all {{ orders|length }} orders
    </div>

    {% else %}
    <!-- Empty State -->
    <div class="text-center py-5 my-5">
        <div class="mb-4">
            <i class="fas fa-receipt fa-6x text-muted opacity-25"></i>
        </div>
        <h3 class="text-muted">No Orders Yet</h3>
        <p class="text-muted mb-4">When you make a purchase, your orders will appear here.</p>
        <a href="{% url 'shop:product_list' %}" class="btn btn-primary btn-lg px-5">
            <i class="fas fa-shopping-cart"></i> Start Shopping Now
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}