{% set cartSession = app.session.get(app.request.get('channelEcomId') ~ '_' ~ 'ecom_cart') %}
{% if cartSession is not empty and cartSession['items'] is not empty %}
    <form class="form-cart" method="post"
          action="{{ path('ecom_cart', {'channelEcomId': app.request.get('channelEcomId')}) }}">
        <h2 class="page__title page__title--h1 text-center">{{ 'Cart' | trans }}</h2>
        <div class="table-responsive">
            <table class="table table--cart">
                <thead>
                <tr>
                    <th width="50" class="mobile-hide"></th>
                    <th>{{ 'Product' | trans }}</th>
                    <th width="100" class="mobile-hide">{{ 'Quantity' | trans }}</th>
                    <th width="100" class="text-end mobile-hide">{{ 'Price' | trans }}</th>
                </tr>
                </thead>
                <tbody>
                {% set sum = 0 %}
                {% for key, item in cartSession['items'] %}
                    {% set sum = sum + item['subTotal'] %}
                    <tr>
                        <td class="text-center">
                            <a href="{{ path('ecom_cart_remove_item', {'channelEcomId': app.request.get('channelEcomId'), 'key': key}) }}"
                               onclick="return confirm('{{ 'Are you sure to remove this ?' | trans }}')"
                               class="">
                                <img src="{{ asset('webshop/images/icon_delete.png') }}" height="15" alt=""/>
                            </a>
                        </td>
                        <td class="td-product-name">
                            {% if item['addOn'] == false %}
                                <div class="d-flex justify-content-start align-items-center gap-3">
                                    {% if item['productThumbnail'] is not empty %}
                                        <img src="{{ asset(item['productThumbnail']) }}" class="cart-thumbnail"
                                             height="70" alt=""/>
                                    {% endif %}
                                    <p class="title">
                                        <span>{{ item['productName'] }} {{ item['size'] is not empty ? ' - ' ~ item['size'] : '' }}</span>
                                        <br/>{{ 'Sku' | trans }}: {{ item['productSku'] }}
                                    </p>
                                </div>
                            {% else %}
                                <div class="d-flex justify-content-start align-items-center gap-3">
                                    <p class="title">
                                        <span>{{ item['productName'] }} - {{ item['productSku'] }}</span>
                                        {% if item['addOnInputAllLetterInputCapital'] %}
                                            <br/>{{ item.addOnText | upper }}
                                        {% else %}
                                            <br/>{{ item.addOnText }}
                                        {% endif %}
                                    </p>
                                </div>
                            {% endif %}
                        </td>
                        <td class="td-with-header" data-header="{{ 'Quantity' | trans }}">
                            <input type="number" min="1"
                                   name="quantity[{{ key }}]"
                                   class="form-control cart-quantity" value="{{ item['quantity'] }}"/>
                        </td>
                        <td class="text-end td-with-header td-price"
                            data-header="{{ 'Price' | trans }}">{{ item['productPriceEcomIncTax'] }} {{ 'kr' | trans }}</td>
                    </tr>
                {% endfor %}
                </tbody>
                <tfoot>
                <tr>
                    <td class="border-0 pb-0 mobile-hide" colspan="2">
                    </td>
                    <th class="border-0 pb-0 mobile-hide">{{ 'Quantity' | trans }}</th>
                    <th class="text-end pb-0 border-0 td-with-header"
                        data-header="{{ 'Quantity' | trans }}">{{ cartSession['quantity'] }}</th>
                </tr>
                <tr>
                    <td class="border-0 pb-0 mobile-hide" colspan="2">
                    </td>
                    <th class="border-0 pb-0 mobile-hide">{{ 'Sum' | trans }}</th>
                    <th class="text-end pb-0 border-0 td-with-header"
                        data-header="{{ 'Sum' | trans }}">{{ sum }} {{ 'kr' | trans }}</th>
                </tr>
                </tfoot>
            </table>
        </div>
        <div class="d-flex justify-content-center align-items-center gap-2">
            <button type="submit" class="btn btn-warning">{{ 'Update and checkout' | trans }}</button>
        </div>
    </form>
{% else %}
    <div class="cart-desc--empty">
        {{ 'Cart is empty. Please add product before checkout.' | trans | raw }}
    </div>
{% endif %}