{% for order in orders %}
    <tr id="order-row-{{ order.id }}">
        <td>
            <strong class="text-primary">#{{ order.id }}</strong>
        </td>
        <td>
            <div>{{ order.created_at|date:"d M Y" }}</div>
            <small class="text-muted">{{ order.created_at|date:"H:i" }}</small>
        </td>
        <td class="text-end fw-bold">
            ${{ order.total|floatformat:2 }}
        </td>
        <td>
            <span class="badge fs-6 px-3 py-2 
                {% if order.status == 'Delivered' %}bg-success
                {% elif order.status == 'Shipped' %}bg-info
                {% elif order.status == 'Paid' %}bg-primary
                {% elif order.status == 'Processing' %}bg-warning
                {% elif order.status == 'Cancelled' %}bg-danger
                {% else %}bg-secondary{% endif %}">
                {{ order.status }}
            </span>
        </td>
        <td>
            <a href="{% url 'shop:order_detail' order.id %}" 
            class="btn btn-sm btn-primary me-1">
                <i class="fas fa-eye"></i> View
            </a>
            
            {% if order.status == 'Pending' %}
            <button 
                hx-post="{% url 'shop:cancel_order' order.id %}"
                hx-target="#order-row-{{ order.id }}"
                hx-swap="outerHTML"
                hx-confirm="Are you sure you want to cancel this order? This action cannot be undone."
                class="btn btn-sm btn-danger">
                <i class="fas fa-times"></i> Cancel
            </button>
            {% endif %}
        </td>
    </tr>
{% endfor %}