<div class="franklin-cart-wrapper">

    <!-- Header -->
  

<div class="franklin-cart">

    <div class="franklin-cart-header">

        <div class="cart-header-left">

            <i class="bi bi-cart3"></i>

            <div>

                <h5 class="mb-0">
                    Shopping Cart
                </h5>

                <small class="text-muted">
                    {{ text_items }}
                </small>

            </div>

        </div>

        <button
            type="button"
            class="btn-close"
            data-bs-dismiss="dropdown"
            aria-label="Close">
        </button>

    </div>

    {% if products %}

    <!-- Products -->
    <div class="franklin-cart-products">

        {% for product in products %}

        <div class="franklin-cart-item">

            <div class="cart-image">

                <a href="{{ product.href }}">

                    <img src="{{ product.thumb }}"
                         alt="{{ product.name }}"
                         class="img-fluid">

                </a>

            </div>

            <div class="cart-details">

                <a href="{{ product.href }}"
                   class="product-name">

                    {{ product.name }}

                </a>

                {% if product.option %}
                    <div class="product-options">

                        {% for option in product.option %}

                            <small>

                                {{ option.name }} :
                                {{ option.value }}

                            </small><br>

                        {% endfor %}

                    </div>
                {% endif %}

                <div class="cart-price">
                    
                    Qty: 

                    {{ product.quantity }}

                    ×

                    {{ product.price }}

                </div>

            </div>

            <div class="cart-actions">

                <strong>

                    {{ product.total }}

                </strong>

                <button
    class="btn-remove"
    type="button"
    data-cart-id="{{ product.cart_id }}">

    <i class="bi bi-x-circle"></i>

</button>

            </div>

        </div>

        {% endfor %}

    </div>

    <!-- Totals -->

   <div class="franklin-cart-totals">

    <div class="cart-total-row">
        <span>Total</span>
        <strong>{{ cart_total }}</strong>
    </div>

</div>

    <!-- Footer -->

    <div class="franklin-cart-footer">

        <a href="{{ shopping_cart }}"
           class="btn btn-outline-success">

            <i class="bi bi-cart3"></i>

            View Cart

        </a>

        <a href="{{ checkout }}"
           class="btn btn-success">

            <i class="bi bi-credit-card"></i>

            Checkout

        </a>

    </div>

    {% else %}

    <!-- Empty Cart -->

    <div class="franklin-empty-cart">

        <i class="bi bi-cart-x"></i>

        <h5>

            Your Shopping Cart is Empty

        </h5>

        <p>

            Start shopping to discover
            authentic herbal remedies.

        </p>

        <a href="{{ continue }}"
           class="btn btn-success">

            Continue Shopping

        </a>

    </div>

    {% endif %}

</div>