{% for order in orders %}
  
<tr id="admin-order-{{ order.id }}">
    <td>#{{ order.id }}</td>
    <td>{{ order.user.username }}</td>
    <td>${{ order.total }}</td>

    <td>
        <span class="badge bg-info">{{ order.status }}</span>
    </td>

    <td>
        <form 
            hx-post="{% url 'shop:update_order_status' order.id %}"
            hx-target="#admin-order-{{ order.id }}"
            hx-swap="outerHTML"
            class="d-flex gap-2">
            <select name="status" class="form-select form-select-sm">
                <option value="pending">Pending</option>
                <option value="paid">Paid</option>
                <option value="processing">Processing</option>
                <option value="shipped">Shipped</option>
                <option value="delivered">Delivered</option>
                <option value="cancelled">Cancelled</option>
            </select>

            <button class="btn btn-success btn-sm">Update</button>
        </form>
    </td>
</tr>

{% endfor %}