{% load custom_filters %}
  {% 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>
            {% with order_items=order.items.all %}
                {% if order_items %}
                    <div class="d-flex flex-column gap-1">
                        {% for item in order_items %}
                            {% if offers_dict|get_item:item.product_id %}
                                {% with offer=offers_dict|get_item:item.product_id %}
                                <div>
                                    <small class="d-block text-muted">{{ item.product.name|truncatewords:3 }}</small>
                                    <span class="badge 
                                        {% if offer.status == 'Accepted' %}bg-success
                                        {% elif offer.status == 'Declined' %}bg-danger
                                        {% elif offer.status == 'Pending' %}bg-warning text-dark
                                        {% else %}bg-secondary{% endif %}
                                        fs-7 px-2 py-1">
                                        {{ offer.status }}
                                    </span>
                                </div>
                                {% endwith %}
                            {% endif %}
                        {% endfor %}
                    </div>
                {% else %}
                    <span class="text-muted small">—</span>
                {% endif %}
            {% endwith %}
        </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 %}