{# @var obCartPositionList \Lovata\OrdersShopaholic\Classes\Collection\CartPositionCollection #}
{# @var obCartPosition \Lovata\OrdersShopaholic\Classes\Item\CartPositionItem #}
{# @var obActiveShippingType \Lovata\OrdersShopaholic\Classes\Item\ShippingTypeItem #}
{# @var obOffer \Lovata\Shopaholic\Classes\Item\OfferItem #}
{# @var obProduct \Lovata\Shopaholic\Classes\Item\ProductItem #}

<section class="cart">
    {% if obCartPositionList.isNotEmpty() %}
    <h2 class="cart__table-title mt-4 mb-4 text-center">Your cart</h2>
    <div class="cart__table-wrapper table-responsive mb-4">
        <table class="cart__table table table-hover">
            <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col">Product</th>
                    <th scope="col">Price</th>
                    <th scope="col">QTY</th>
                    <th scope="col">Amount</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
            {% for obCartPosition in obCartPositionList %}
                {% set obOffer = obCartPosition.offer %}
                {% set obProduct = obOffer.product %}
                <tr class="cart__item {% if obCartPosition.quantity > obOffer.quantity %}bg-danger{% endif %}" data-position-id="{{ obCartPosition.id }}" data-offer-id="{{ obOffer.id }}">
                    <td class="cart__picture align-middle">
                        <a href="{{ obProduct.getPageUrl('catalog') }}" class="cart__img-wrap d-block" aria-label="Read more about {{ obProduct.name }}">
                            {% if obProduct.preview_image is not empty %}
                                <img class="cart__img" src="{{ obProduct.preview_image.getThumb(400, 400, {quality: 80}) }}" alt="{{ obProduct.preview_image.description }}" title="{{ obProduct.preview_image.title }}" loading="lazy">
                            {% else %}
                                <img class="cart__img" src="{{ 'assets/images/no-image.png'|theme }}">
                            {% endif %}
                        </a>
                    </td>
                    <td class="align-middle">
                        <a class="cart__product-name font-weight-bold d-block mb-2" href="{{ obProduct.getPageUrl('catalog') }}">
                            {{ obProduct.name }}
                        </a>
                        <a href="{{ obProduct.category.getPageUrl('catalog') }}" class="cart__category-product-column text-dark">
                            {{ obProduct.category.name }}
                        </a>
                    </td>
                    <td class="cart__price align-middle">
                        <div class="cart__price-bar d-flex flex-column">
                            <span class="cart__current-price pr-2 font-weight-bold {{ obOffer.old_price_value > 0 ? 'text-danger' : '' }} d-block mb-1">
                                {{ obOffer.price }}  {{ obOffer.currency }}
                            </span>
                            {% if obOffer.old_price_value > 0 %}
                            <span class="cart__old-price text-muted pr-2">
                                <s>{{ obOffer.old_price }} {{ obOffer.currency }}</s>
                            </span>
                            {% endif %}
                        </div>
                    </td>
                    <td class="cart__qty align-middle">
                        {% partial 'form/button-change-quantity/button-change-quantity' btnChangeQtyValue=obCartPosition.quantity btnChangeQtyAjax=true btnMaxQtyValue=obOffer.quantity %}
                    </td>
                    <td class="cart__total-price align-middle">
                        <span class="cart__total-price-figures cart__position-price-value">{{ obCartPosition.price }}</span> {{ obCartPosition.currency }}
                        <span class="text-muted cart__position-old-price-figures {% if obCartPosition.discount_price_value == 0 %}d-none{% endif %}">
                            <span class="cart__position-old-price-value">{{ obCartPosition.old_price }}</span> {{ obCartPosition.currency }}
                        </span>
                    </td>
                    <td class="cart__delete-position align-middle">
                        <button class="btn btn-outline-secondary btn_bg-white cart__delete-btn" aria-label="Delete" data-id="{{ obOffer.id }}">
                            <i class="fa fa-times"></i>
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="cart__total mb-5">
        <div class="cart__total-position row mb-3">
            <span class="cart__total-position-title col-6 col-lg-4 font-weight-bold">Position price:</span>
            <span class="cart__total-position-old-price col-3 col-lg-2 text-right text-muted">
                <span class="cart__total-position-old-price-value {% if obCartPositionList.getDiscountTotalPriceValue() == 0 %}d-none{% endif %}">{{ obCartPositionList.getOldTotalPrice() }}</span>
                <span class="cart__total-position-old-price-currency {% if obCartPositionList.getDiscountTotalPriceValue() == 0 %}d-none{% endif %}">{{ Cart.getCurrency() }}</span>
            </span>
            <span class="cart__total-position-current-price col-3 col-lg-2 text-right">
                <span class="cart__total-position-price-value">{{ obCartPositionList.getTotalPrice() }}</span>
                <span class="cart__total-position-price-currency">{{ Cart.getCurrency() }}</span>
            </span>
        </div>
        <div class="cart__total-shipping row mb-3">
            <span class="cart__total-shipping-title col-6 col-lg-4 font-weight-bold">Shipping price:</span>
            <span class="cart__total-shipping-old-price col-3 col-lg-2 text-right text-muted">
                <span class="cart__total-shipping-old-price-value {% if obActiveShippingType.discount_price_value == 0 %}d-none{% endif %}">{{ obActiveShippingType.old_price }}</span>
                <span class="cart__total-shipping-old-price-currency {% if obActiveShippingType.discount_price_value == 0 %}d-none{% endif %}">{{ Cart.getCurrency() }}</span>
            </span>
            <span class="cart__total-shipping-current-price col-3 col-lg-2 text-right">
                <span class="cart__total-shipping-price-value">{{ obActiveShippingType.price }}</span>
                <span class="cart__total-shipping-price-currency">{{ Cart.getCurrency() }}</span>
            </span>
        </div>
        <div class="cart__total-price row mb-3 pt-3">
            <span class="cart__total-price-title col-6 col-lg-4 font-weight-bold">Total price:</span>
            <span class="cart__total-price-old-price col-3 col-lg-2 text-right text-muted">
                <span class="cart__total-price-old-price-value {% if Cart.getDiscountTotalPriceValue() == 0 %}d-none{% endif %}">{{ Cart.getOldTotalPrice() }}</span>
                <span class="cart__total-price-old-price-currency {% if Cart.getDiscountTotalPriceValue() == 0 %}d-none{% endif %}">{{ Cart.getCurrency() }}</span>
            </span>
            <span class="cart__total-price-current-price col-3 col-lg-2 text-right">
                <span class="cart__total-price-price-value">{{ Cart.getTotalPrice() }}</span>
                <span class="cart__total-price-price-currency">{{ Cart.getCurrency() }}</span>
            </span>
        </div>
    </div>
    {% endif %}
    <h2 class="cart__empty container mt-4 mb-4 text-center {% if obCartPositionList.isNotEmpty() %}d-none{% endif %}">Your cart is empty.</h2>
</section>