{% load currency_filters %}<div id="cart-items">
    {% if cart %}
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 45%;">Product</th>
                            <th class="text-end">Price</th>
                            <th class="text-center" style="width: 120px;">Quantity</th>
                            <th class="text-end">Total</th>
                            <th class="text-center" style="width: 100px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for pid, item in cart.items %}
                    <tr id="row-{{ pid }}" class="cart-row">
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    {% if item.image %}
                                    <img src="{{ item.image }}" alt="{{ item.name }}" 
                                         style="width: 60px; height: 60px; object-fit: cover; border-radius: 8px;">
                                    {% else %}
                                    <div style="width: 60px; height: 60px; background: #f1f3f5; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fas fa-image text-muted"></i>
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="ms-3">
                                    <strong>{{ item.name }}</strong>
                                </div>
                            </div>
                        </td>
                        <td class="text-end fw-medium">
                            {% if item.has_discount %}
                                <div class="pricing">
                                    <span class="original-price text-muted text-decoration-line-through" data-price="{{ item.original_price }}">
                                        {{ currency_symbol }}{{ item.original_price|convert_currency:currency_rate|floatformat:2 }}
                                    </span>
                                    <span class="discounted-price text-success" data-price="{{ item.price }}">
                                        {{ currency_symbol }}{{ item.price|convert_currency:currency_rate|floatformat:2 }}
                                    </span>
                                    <small class="text-danger" data-price="{{ item.discount_amount }}">
                                        Save {{ currency_symbol }}{{ item.discount_amount|convert_currency:currency_rate|floatformat:2 }}
                                    </small>
                                </div>
                            {% else %}
                                <span data-price="{{ item.price }}">{{ currency_symbol }}{{ item.price|convert_currency:currency_rate|floatformat:2 }}</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <div class="input-group input-group-sm" style="width: 110px; margin: 0 auto;">
                                <button class="btn btn-outline-secondary" 
                                        hx-post="{% url 'shop:update_cart' pid %}" 
                                        hx-target="#cart-items"
                                        hx-swap="outerHTML"
                                        hx-vals='{"quantity": "{{ item.quantity|add:"-1" }}"}'>
                                    −
                                </button>
                                <input type="number" 
                                       name="quantity" 
                                       value="{{ item.quantity }}" 
                                       min="1"
                                       class="form-control text-center"
                                       hx-post="{% url 'shop:update_cart' pid %}" 
                                       hx-trigger="change delay:300ms"
                                       hx-target="#cart-items"
                                       hx-swap="outerHTML">
                                <button class="btn btn-outline-secondary" 
                                        hx-post="{% url 'shop:update_cart' pid %}" 
                                        hx-target="#cart-items"
                                        hx-swap="outerHTML"
                                        hx-vals='{"quantity": "{{ item.quantity|add:"1" }}"}'>
                                    +
                                </button>
                            </div>
                        </td>
                        <td class="text-end fw-bold text-success" data-price="{{ item.line_total }}">
                            {{ currency_symbol }}{{ item.line_total|convert_currency:currency_rate|floatformat:2 }}
                        </td>
                        <td class="text-center">
                            <button hx-post="{% url 'shop:remove_from_cart' pid %}" 
                                    hx-target="#cart-items"
                                    hx-swap="outerHTML"
                                    hx-confirm="Remove this item from cart?"
                                    class="btn btn-outline-danger btn-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Cart Total & Actions -->
    <div class="row mt-4">
        <div class="col-md-7">
            <a href="{% url 'shop:product_list' %}" class="btn btn-md btn-outline-secondary">
                ← Continue Shopping
            </a>
        </div>
        <div class="col-md-5 text-end">
            <div class="card shadow-sm">
                <div class="card-body">
                    {% if original_total and total_discount %}
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Subtotal</span>
                            <span class="text-muted text-decoration-line-through" data-price="{{ original_total }}">{{ currency_symbol }}{{ original_total|convert_currency:currency_rate|floatformat:2 }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-success">Discount</span>
                            <span class="text-success" data-price="{{ total_discount }}">-{{ currency_symbol }}{{ total_discount|convert_currency:currency_rate|floatformat:2 }}</span>
                        </div>
                        <hr class="my-2">
                    {% endif %}
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">Total</h6>
                        <h5 class="fw-bold text-success mb-0" data-price="{{ total }}">{{ currency_symbol }}{{ total|convert_currency:currency_rate|floatformat:2 }}</h5>
                    </div>
                    <a href="{% url 'shop:checkout' %}" class="btn btn-success btn-sm w-100 mt-3">
                        Proceed to Checkout
                    </a>
                </div>
            </div>
        </div>
    </div>

    {% else %}
    <!-- Empty Cart -->
    <div class="card shadow-sm border-0">
        <div class="card-body text-center py-5">
            <i class="fas fa-shopping-cart fa-5x text-muted mb-4 opacity-50"></i>
            <h3 class="text-muted">Your cart is empty</h3>
            <p class="text-muted">Looks like you haven't added anything yet.</p>
            <a href="{% url 'shop:product_list' %}" class="btn btn-primary btn-lg px-5 mt-3">
                Start Shopping
            </a>
        </div>
    </div>
    {% endif %}
</div>