{% extends "dashboard/base.html" %}
{% load humanize %}
{% block page_title %}Orders{% endblock %}

{% block dashboard_content %}
{% if orders %}
<div class="grid grid--2">
    {% for order in orders %}
    <div class="card animate-in">
        <div class="flex justify-between items-center mb-3">
            <a href="{% url 'dashboard:order_detail' order.id %}" style="font-weight:700;font-size:var(--font-size-lg);">#{{ order.order_number }}</a>
            <span class="badge badge--{{ order.status }}">{{ order.get_status_display }}</span>
        </div>
        <div class="text-sm mb-1">
            <strong>{{ order.buyer_name }}</strong>
        </div>
        <div class="text-xs text-muted mb-3">{{ order.buyer_phone }} &bull; {{ order.buyer_email }}</div>
        <div class="text-xs text-secondary mb-3">Sale: <strong>{{ order.sale.title }}</strong></div>
        <div class="flex justify-between items-center text-sm pt-3" style="border-top:1px solid var(--color-border-light);">
            <span class="text-muted">{{ order.created_at|date:"M d, Y H:i" }}</span>
            <strong style="font-size:var(--font-size-xl);color:var(--color-primary);">GHS {{ order.total_amount|floatformat:2 }}</strong>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h3 class="empty-state__title">No orders yet</h3>
    <p class="empty-state__desc">Orders will appear here when customers purchase from your sales.</p>
</div>
{% endif %}
{% endblock %}