{% set blDisplayPosCheck = true %}
{% set blDisplayCartImage = oViewConf.getViewThemeParam("blDisplayCartImage") %}
{% set blDisplayWrapping = oView.isWrapping() %}

{# global changebasket product param #}
{% set sFormProductParam = "aproducts" %}

{% block checkout_basket_positions %}
    <div id="c4s-basket-positions" class="c4s-basket-positions{% if oViewConf.getActiveClassName() == "order" %} order{% endif %}">

        <div id="c4s-basket-positions-header" class="d-none d-md-block pb-2 mb-4 border-bottom">
            <div class="row small text-secondary text-uppercase">
                {% if blDisplayPosCheck %}<div class="col-md-1"></div>{% endif %}
                {% if blDisplayCartImage %}<div class="col-md-1"></div>{% endif %}
                <div class="{% if blDisplayPosCheck and blDisplayCartImage %}col-md-4{% elseif (not blDisplayPosCheck and blDisplayCartImage) or (blDisplayPosCheck and not blDisplayCartImage) %}col-md-5{% else %}col-md-6{% endif %}"><strong>{{ translate({ ident: "PRODUCT" }) }}</strong></div>
                <div class="col-md-2 text-end"><strong>{{ translate({ ident: "QUANTITY" }) }} / {{ translate({ ident: "OXUNITNAME" }) }}</strong></div>
                <div class="col-md-2 text-end"><strong>{{ translate({ ident: "UNIT_PRICE" }) }}</strong></div>
                <div class="col-md-2 text-end"><strong>{{ translate({ ident: "TOTAL" }) }}</strong></div>
            </div>
        </div>

        <div id=c4s-basket-positions-list>
            {% set aBasketArticles = oView.getBasketArticles() %}

            {% for basketindex, oBasketItem in oxcmp_basket.getContents() %}
                <div id="c4s-basket-position-{{ loop.index }}" class="mb-4 pb-4 border-bottom {% block checkout_basket_positions_basketitem_class %}c4s-basket-position{% endblock %}">
                    {% block checkout_basket_positions_basketitem %}
                        {% set oBasketArticle = aBasketArticles[basketindex] %}
                        {% set oArticle = oBasketItem.getArticle() %}
                        {% set oAttributes = oArticle.getAttributesDisplayableInBasket() %}
                        {% set oParentArticle = oArticle.getParentArticle() %}
                        {% set sArticleId = oArticle.oxarticles__oxid.value %}

                        <div class="row c4s-basket-position-row">
                            {% block checkout_basket_positions_basketitem_removecheckbox %}
                                {% if blDisplayPosCheck %}
                                    <div class="d-none d-md-block col-md-1 text-center">
                                        <input class="form-check-input" type="checkbox" name="{{ sFormProductParam }}[{{ basketindex }}][remove]" value="1">
                                    </div>
                                {% endif %}
                            {% endblock %}

                            {% block checkout_basket_positions_basketitem_image %}
                                {% if blDisplayCartImage %}
                                    <div class="col-4 col-md-1">
                                        {# product image #}
                                        <div class="basketImage">
                                            {% if editable %}<a href="{% if oParentArticle %}{{ oParentArticle.getLink()|add_url_parameters("anid=" ~ sArticleId) }}{% else %}{{ oBasketItem.getLink()|raw }}{% endif %}">{% endif %}
                                                <img src="{{ oBasketItem.getIconUrl() }}" class="img-fluid mx-auto" alt="{{ oBasketItem.getTitle()|striptags }}">
                                                {% if editable %}</a>{% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endblock %}

                            {% block checkout_basket_positions_basketitem_titlenumber %}
                                <div class="{% if blDisplayPosCheck and blDisplayCartImage %}col-8 col-md-4{% elseif (not blDisplayPosCheck and blDisplayCartImage) or (blDisplayPosCheck and not blDisplayCartImage) %}col-8 col-md-5{% else %}col-12 col-md-6{% endif %}">
                                    {# product title & number #}
                                    <div class="c4s-basket-position-desc {% if blDisplayCartImage %}image{% endif %}">
                                        {% block checkout_basket_positions_basketitem_desc %}

                                            {% block checkout_basket_positions_basketitem_title %}
                                                {% if editable %}<a rel="nofllow" href="{% if oParentArticle %}{{ oParentArticle.getLink()|add_url_parameters("anid=" ~ sArticleId) }}{% else %}{{ oBasketItem.getLink()|raw }}{% endif %}">{% endif %}
                                                    <strong class="c4s-basket-position-title">{{ oBasketArticle.oxarticles__oxtitle.value|striptags }}</strong>
                                                {% if editable %}</a>{% endif %}
                                                {% if oBasketItem.isSkipDiscount() %} <sup><a href="#SkipDiscounts_link" >**</a></sup>{% endif %}
                                            {% endblock %}

                                            {% block checkout_basket_positions_basketitem_artnum %}
                                                <div class="c4s-basket-position-artnum">
                                                    <small>{{ translate({ ident: "PRODUCT_NO", suffix: "COLON" }) }} {{ oBasketArticle.oxarticles__oxartnum.value }}</small>
                                                </div>
                                            {% endblock %}

                                            {% block checkout_basket_positions_basketitem_attributes %}
                                                {% set sep = ", " %}
                                                {% set sResult = "" %}
                                                {% set sPopOverHtml = "<table class='itemAttributesLegendTable'>" %}

                                                {% for oArtAttributes, oAttr in oAttributes.getArray() %}
                                                    {% set sTempTitle = oAttr.oxattribute__oxtitle.value %}
                                                    {% set sTempValue = oAttr.oxattribute__oxvalue.value %}
                                                    {% set sResult = sResult ~ sTempValue ~ sep %}

                                                    {% set sPopOverTitel = "<td class='itemAttributesLegendTitel'>" ~ sTempTitle ~ ":</td>" %}
                                                    {% set sPopOverValue = "<td class='itemAttributesLegendValue'>" ~ sTempValue ~ "</td>" %}
                                                    {% set sPopOverHtml = sPopOverHtml ~ "<tr>" ~ sPopOverTitel ~ sPopOverValue ~ "</tr>" %}
                                                {% endfor %}

                                                {% set sPopOverHtml = sPopOverHtml ~ "</table>" %}

                                                {% if sResult %}
                                                    <div class="small c4s-basket-position-attributes">
                                                        <span role="button"
                                                              class="text-info"
                                                              data-bs-toggle="popover"
                                                              data-bs-placement="right"
                                                              title="{{ translate({ ident: "SPECIFICATION" }) }}"
                                                              data-bs-trigger="hover click"
                                                            {# todo data-bs-html="true" #}
                                                            {# no html in popover content in bs5 anymore? data-bs-content="{{ sPopOverHtml }}" #}
                                                        ><i class="fa-solid fa-circle-info" aria-hidden="true"></i></span>
                                                        <span>{{ sResult|trim("sep") }}</span>
                                                    </div>
                                                {% endif %}
                                            {% endblock %}

                                            {% block checkout_basket_position_basketitem_shortdesc %}
                                                {% if oBasketArticle.oxarticles__oxshortdesc %}
                                                    <div class="c4s-basket-position-short-desc">
                                                        <small>{{ oBasketArticle.oxarticles__oxshortdesc }}</small>
                                                    </div>
                                                {% endif %}
                                            {% endblock %}

                                            {% block checkout_basket_position_basketitem_selections %}
                                                {% if not oBasketItem.isBundle() or not oBasketItem.isDiscountArticle() %}
                                                    {% set oSelections = oBasketArticle.getSelections("null", oBasketItem.getSelList()) %}
                                                    {% if oSelections %}
                                                        <div id="c4s-basket-position-selection-{{ loop.index }}" class="c4s-basket-position-selection">
                                                            {% for oList in oSelections %}
                                                                {% if oViewConf.showSelectListsInList() %}
                                                                    {% include "widget/product/selectbox.html.twig" with {oSelectionList: oList, sFieldName: sFormProductParam ~ "[" ~ basketindex ~ "][sel]", iKey: loop.index0, blHideDefault: true, sSelType: "seldrop"} %}
                                                                {% else %}
                                                                    {% set oActiveSelection = oList.getActiveSelection() %}
                                                                    {% if oActiveSelection %}
                                                                        <input type="hidden" name="{{ sFormProductParam }}[{{ basketindex }}][sel][{{ loop.index0 }}]" value="{{ oActiveSelection.getValue() }}">
                                                                        <div>{{ oList.getLabel() }}: {{ oActiveSelection.getName() }}</div>
                                                                    {% endif %}
                                                                {% endif %}
                                                            {% endfor %}
                                                        </div>
                                                    {% endif %}
                                                {% endif %}
                                            {% endblock %}

                                            {% block checkout_basket_position_basketitem_pers_params %}
                                                <div class="mt-3 c4s-basket-position-pers-params">   {# todo: redesign per params block #}
                                                    {% if not editable %}
                                                        <ul class="list-group">
                                                            {% for sVar, sParam in oBasketItem.getPersParams() %}
                                                                <li class="list-group-item border-0">
                                                                    <strong>
                                                                        {% if loop.first and loop.last %}
                                                                            {{ translate({ ident: "LABEL" }) }}
                                                                        {% else %}
                                                                            {{ sVar }} :
                                                                        {% endif %}
                                                                    </strong>
                                                                    {{ sParam }}
                                                                </li>
                                                            {% endfor %}
                                                        </ul>
                                                    {% else %}
                                                        {% if oBasketArticle.oxarticles__oxisconfigurable.value %}
                                                            {% if oBasketItem.getPersParams() %}
                                                                {% for sVar, sParam in oBasketItem.getPersParams() %}
                                                                    <div class="input-group input-group-sm float-end mb-3">
                                                                        <div class="input-group-text border-0 bg-white">
                                                                            {% if loop.first and loop.last %}
                                                                                {{ translate({ ident: "LABEL", suffix: "COLON" }) }}
                                                                            {% else %}
                                                                                {{ sVar }}:
                                                                            {% endif %}
                                                                        </div>
                                                                        <input id="" class="form-control" type="text" name="{{ sFormProductParam }}[{{ basketindex }}][persparam][{{ sVar }}]" value="{{ sParam }}">
                                                                    </div>
                                                                {% endfor %}
                                                            {% else %}
                                                                <div class="input-group input-group-sm float-end mb-3">
                                                                    <div class="input-group-text border-0 bg-white">
                                                                        {{ translate({ ident: "LABEL", suffix: "COLON" }) }}
                                                                    </div>
                                                                    <input class="form-control" type="text" name="{{ sFormProductParam }}[{{ basketindex }}][persparam][details]" value="">
                                                                </div>
                                                            {% endif %}
                                                        {% endif %}
                                                    {% endif %}
                                                </div>
                                            {% endblock %}
                                        {% endblock %}
                                    </div>
                                </div>
                            {% endblock %}

                            {% block checkout_basket_positions_basketitem_functions %}
                                <div class="col-8 col-md-2 text-end c4s-basket-position-functions">
                                    {# product quantity manager #}
                                    {% if editable %}
                                        <input type="hidden" name="{{ sFormProductParam }}[{{ basketindex }}][aid]" value="{{ oBasketItem.getProductId() }}">
                                        <input type="hidden" name="{{ sFormProductParam }}[{{ basketindex }}][basketitemid]" value="{{ basketindex }}">
                                        <input type="hidden" name="{{ sFormProductParam }}[{{ basketindex }}][override]" value="1">
                                        {% if oBasketItem.isBundle() %}
                                            <input type="hidden" name="{{ sFormProductParam }}[{{ basketindex }}][bundle]" value="1">
                                        {% endif %}

                                        {% if not oBasketItem.isBundle() or not oBasketItem.isDiscountArticle() %}
                                            <div class="input-group input-group-sm float-end{% if blDisplayWrapping %} mb-3{% endif %}">
                                                {% block checkout_basket_positions_basketitem_amount %}
                                                    <input id="c4s-basket-position-amount-{{ loop.index }}"
                                                           type="number"
                                                           inputmode="numeric"
                                                           name="{{ sFormProductParam }}[{{ basketindex }}][am]"
                                                           class="form-control text-end c4s-basket-position-amount"
                                                           size="3"
                                                           value="{{ oBasketItem.getAmount() }}"
                                                           min="{% if oArticle.oxarticles__c4sminamount.value %}{{ oArticle.oxarticles__c4sminamount.value }}{% else %}1{% endif %}"
                                                           step="{% if oArticle.oxarticles__oxunitquantity.value %}{{ oArticle.oxarticles__oxunitquantity.value }}{% else %}1{% endif %}"
                                                           max="{% if oArticle.oxarticles__c4smaxamount.value %}{{ oArticle.oxarticles__c4smaxamount.value }}{% endif %}"
                                                           {{ sAdditionalParamsAmountInput }}
                                                    >
                                                {% endblock %}
                                                {% block checkout_basket_positions_basketitem_unit %}
                                                    <div class="input-group-text bg-light c4s-basket-position-amount-unit">
                                                        {% if oArticle.getUnitName(true) %}
                                                            {{ oArticle.getUnitName(true) }}
                                                        {% else %}
                                                            {{ translate({ ident: "PCS" }) }}
                                                        {% endif %}
                                                    </div>
                                                {% endblock %}
                                                {% block checkout_basket_positions_basketitem_update_button %}
                                                    <button type="submit" name="updateBtn" title="{{ translate({ ident: "UPDATE" }) }}"
                                                            class="btn btn-outline-secondary c4s-basket-update-btn"
                                                            {{ sAdditionalParamsUpdateBtn }}
                                                    >
                                                        <i class="fa-solid fa-arrows-rotate"></i>
                                                    </button>
                                                {% endblock %}
                                                {% block checkout_basket_positions_basketitem_remove_button %}
                                                    <input type="hidden" name="{{ sFormProductParam }}[{{ basketindex }}][remove]" id="c4s-basket-position-remove-{{ loop.index }}" value="0">
                                                    <button type="submit" name="removeBtn" title="{{ translate({ ident: "REMOVE" }) }}"
                                                            class="btn btn-outline-secondary c4s-basket-remove-btn"
                                                            onclick="document.getElementById('c4s-basket-position-remove-{{ loop.index }}').value = '1';"
                                                            {{ sAdditionalParamsRemoveBtn }}
                                                    >
                                                        <i class="fa-solid fa-trash"></i>
                                                    </button>
                                                {% endblock %}
                                            </div>
                                        {% endif %}
                                    {% else %}
                                        <div class="d-md-none">{{ translate({ ident: "QUANTITY", suffix: "COLON" }) }} </div>{{ oBasketItem.getAmount() }} <span class="c4s-basket-position-amount-unit">{% if oArticle.getUnitName(true) %}{{ oArticle.getUnitName(true) }}{% else %}{{ translate({ ident: "PCS" }) }}{% endif %}
                                    {% endif %}
                                    {% if oBasketItem.getdBundledAmount() > 0 and (oBasketItem.isBundle() or oBasketItem.isDiscountArticle()) %}
                                        +{{ oBasketItem.getdBundledAmount() }}
                                    {% endif %}

                                    {% if blDisplayWrapping %} {# todo: redesign wrapping block - multilang / tooltips etc #}
                                        <div class="input-group input-group-sm justify-content-end">
                                            {% if not oBasketItem.getWrappingId() %}
                                                {% if editable %}
                                                    <button class="btn btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#c4s-basket-wrapping-modal" title="{{ translate({ ident: "WRAPPING" }) }} {{ translate({ ident: "ADD" }) }}"><i class="fa-solid fa-gift"></i></button>
                                                {% else %}
                                                    <div class="input-group-text bg-light" title="{{ translate({ ident: "WRAPPING" }) }}"><i class="fa-solid fa-gift"></i></div>
                                                {% endif %}
                                                <div class="input-group-text bg-light">{{ translate({ ident: "NONE" }) }} {{ translate({ ident: "WRAPPING" }) }}</div>
                                            {% else %}
                                                {% set oWrap = oBasketItem.getWrapping() %}
                                                {% if editable %}
                                                    <button class="btn btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#c4s-basket-wrapping-modal" title="{{ translate({ ident: "WRAPPING" }) }} {{ translate({ ident: "EDIT" }) }}"><i class="fa-solid fa-gift"></i></button>
                                                {% else %}
                                                    <div class="input-group-text bg-light" title="{{ translate({ ident: "WRAPPING" }) }}"><i class="fa-solid fa-gift"></i></div>
                                                {% endif %}
                                                <div class="input-group-text bg-light">{{ oWrap.oxwrapping__oxname.value }}</div>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endblock %}

                            {% block checkout_basket_positions_basketitem_unitprice %}
                                <div class="d-none d-md-block col-md-2 text-end c4s-basket-position-unit-price">
                                    {# product price #}
                                    {% if oBasketItem.getFUnitPrice() %}
                                        {{ oBasketItem.getFUnitPrice() }}&nbsp;{{ oCurrency.sign }}
                                        {% block checkout_basket_positions_basketitem_unitprice_addon %}{% endblock %}
                                    {% endif %}
                                    {# product original price if discounted #}
                                    {% if not oBasketItem.isBundle() %}
                                        {% set oRegUnitPrice = oBasketItem.getRegularUnitPrice() %}
                                        {% set oUnitPrice = oBasketItem.getUnitPrice() %}
                                        {% if oRegUnitPrice.getPrice() > oUnitPrice.getPrice() %}
                                            <br><del class="text-danger">{{ oBasketItem.getFRegularUnitPrice() }}&nbsp;{{ oCurrency.sign }}</del>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            {% endblock %}

                            {% block checkout_basket_positions_basketitem_totalprice %}
                                <div class="col-4 col-md-2 {% if blDisplayCartImage %} image{% endif %} text-end c4s-basket-position-total-price">
                                    {# product quantity * price #}
                                    {{ oBasketItem.getFTotalPrice() }}&nbsp;{{ oCurrency.sign }}
                                    {% block checkout_basket_positions_basketitem_totalprice_addon %}{% endblock %}
                                </div>
                            {% endblock %}
                        </div>
                    {% endblock %}

                    {% block checkout_basket_positions_itemerror %}
                        {% for key, oEr in Errors.basket %}
                            {% if oEr.getErrorClassType() == "oxOutOfStockException" %}
                                {# display only the exceptions for the current article #}
                                {% if basketindex == oEr.getValue("basketIndex") or (loop.last and oEr.getValue("basketIndex") is null) %}
                                    <div class="row c4s-basket-position-error">
                                        {% if blDisplayPosCheck %}<div class="d-none d-md-block col-md-1"></div>{% endif %}
                                        {% if blDisplayCartImage %}<div class="d-none d-md-block col-4 col-md-1"></div>{% endif %}
                                        <div class="col-12 col-md-8">
                                            <span class="alert alert-danger mb-0 mt-3">{{ oEr.getOxMessage() }} <strong>{{ oEr.getValue("remainingAmount") }}</strong></span>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endif %}
                            {% if oEr.getErrorClassType() == "oxArticleInputException" %}
                                {% if oBasketItem.getProductId() == oEr.getValue("productId") %}
                                    <div class="row c4s-basket-position-error">
                                        {% if blDisplayPosCheck %}<div class="d-none d-md-block col-md-1"></div>{% endif %}
                                        {% if blDisplayCartImage %}<div class="d-none d-md-block col-4 col-md-1"></div>{% endif %}
                                        <div class="col-12 col-md-8">
                                            <span class="alert alert-danger mb-0 mt-3">{{ oEr.getOxMessage() }}</span>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% endblock %}
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}