{% block widget_product_listitem_grid %}
    {% set product = oView.getProduct() %}
    {% set blDisableToCart = oView.getDisableToCart() %}
    {% set iIndex = oView.getIndex() %}
    {% set showMainLink = oView.getShowMainLink() %}
    {% set currency = oView.getActCurrency() %}
    {% set oUnitPrice = product.getUnitPrice() %}
    {% set tprice = product.getTPrice() %}
    {% set price = product.getPrice() %}
    {% if showMainLink %}
        {% set _productLink = product.getMainLink() %}
    {% else %}
        {% set _productLink = product.getLink() %}
    {% endif %}
    {% set aVariantSelections = product.getVariantSelections("null", "null", 1) %}
    {% set blShowToBasket = true %} {# tobasket or more info ? #}
    {% if blDisableToCart or product.isNotBuyable() or (aVariantSelections and aVariantSelections.selections) or product.hasMdVariants() or (oViewConf.showSelectListsInList() and product.getSelections(1)) or product.getVariants() %}
        {% set blShowToBasket = false %}
    {% endif %}

    {% if testid == null %}
        {% set testid = oView.getViewParameter('testid') %}
    {% endif %}

    <div class="card product-card">
        {% block widget_product_listitem_grid_gridpicture %}
        <div class="product-img-wrapper">

            <img {% if slider %}loading="lazy" {% endif %}width="350" height="220" src="{{ product.getThumbnailUrl()|raw }}" alt="{{ translate({ ident: "PRODUCT_SINGLE_IMAGE_ALT", args: product.oxarticles__oxtitle.value ~ ' ' ~ product.oxarticles__oxvarselect.value }) }}" class="product-img">
            {% if product.getMasterZoomPictureUrl(2) %}
                <picture>
                    <source type="image/webp" srcset="{{ product.getMasterZoomPictureUrl(2)|raw }}" media="(min-width: 1024px)">
                    <img class="product-img img-2" width="350" height="220" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="{{ translate({ ident: "PRODUCT_SINGLE_IMAGE_ALT", args: product.oxarticles__oxtitle.value ~ ' ' ~ product.oxarticles__oxvarselect.value }) }}">
                </picture>
            {% endif %}
            <a href="{{ _productLink|raw }}" class="stretched-link" aria-label="{{ translate({ ident: "DETAILS" }) }} - {{ product.oxarticles__oxtitle.value }}"></a>


            {# TODO: We should have an attribute here #}
            {% if tprice and tprice.getBruttoPrice() > price.getBruttoPrice() %}
                <div class="badges">
                    <div class="badge bg-danger badge-sale">sale</div>
                </div>
            {% endif %}

            {% block widget_product_listitem_grid_tobasket %}
                <div class="actions d-none d-lg-block">
                    <div class="bottom">
                        {% if blShowToBasket %}
                            {% hasrights { ident: "TOBASKET" } %}
                                <form name="tobasket{{ testid }}" {% if blShowToBasket %}action="{{ oViewConf.getSelfActionLink()|raw }}" method="post"{% else %}action="{{ _productLink|raw }}" method="get"{% endif %}>
                                    <div class="d-none">
                                        {{ oViewConf.getNavFormParams()|raw }}
                                        {{ oViewConf.getHiddenSid()|raw }}
                                        <input type="hidden" name="pgNr" value="{{ oView.getActPage() }}">
                                        {% if recommid %}
                                            <input type="hidden" name="recommid" value="{{ recommid }}">
                                        {% endif %}
                                        {% if blShowToBasket %}
                                            {% hasrights { ident: "TOBASKET" } %}
                                                <input type="hidden" name="cl" value="{{ oViewConf.getTopActiveClassName() }}">
                                                {% if owishid %}
                                                    <input type="hidden" name="owishid" value="{{ owishid }}">
                                                {% endif %}
                                                {% if toBasketFunction %}
                                                    <input type="hidden" name="fnc" value="{{ toBasketFunction }}">
                                                {% else %}
                                                    <input type="hidden" name="fnc" value="tobasket">
                                                {% endif %}
                                                <input type="hidden" name="aid" value="{{ product.oxarticles__oxid.value }}">
                                                {% if altproduct %}
                                                    <input type="hidden" name="anid" value="{{ altproduct }}">
                                                {% else %}
                                                    <input type="hidden" name="anid" value="{{ product.oxarticles__oxnid.value }}">
                                                {% endif %}
                                            {% endhasrights %}
                                        {% else %}
                                            <input type="hidden" name="cl" value="details">
                                            <input type="hidden" name="anid" value="{{ product.oxarticles__oxnid.value }}">
                                        {% endif %}
                                    </div>

                                    <div class="input-group">
                                        <input type="number" class="form-control" name="am" value="1" aria-label="{{ translate({ ident: "QUANTITY" }) }} - {{ product.oxarticles__oxtitle.value }}" aria-describedby="submit{{ testid }}">
                                        <button type="submit" id="submit{{ testid }}" class="btn btn-highlight">
                                            {{ translate({ ident: "TO_CART" }) }}
                                        </button>
                                    </div>

                                </form>
                            {% endhasrights %}
                        {% else %}
                            <a class="btn btn-outline-primary w-100" href="{{ _productLink|raw }}">{{ translate({ ident: "DETAILS" }) }} - {{ product.oxarticles__oxtitle.value }}</a>
                        {% endif %}
                    </div>
                    <div class="right">
                        {% block widget_product_listitem_grid_addtowishlist %}
                            {% if oxcmp_user %}
                                <a aria-label="{{ translate({ ident: "ADD_TO_WISH_LIST" }) }} - {{ product.oxarticles__oxtitle.value }}" class="btn btn-sm btn-light w-100" href="{{ seo_url({ ident: oViewConf.getSelfLink() ~ "cl=" ~ oViewConf.getTopActiveClassName(), params: "aid=" ~ product.oxarticles__oxnid.value ~ "&amp;anid=" ~ product.oxarticles__oxnid.value ~ "&amp;fnc=tonoticelist&amp;am=1" ~ oViewConf.getNavUrlParams() ~ "&amp;stoken=" ~ oViewConf.getSessionChallengeToken() }) }}">
                                    <svg>
                                        <use xlink:href="#star"></use>
                                    </svg>
                                </a>
                            {% else %}
                                <a aria-label="{{ translate({ ident: "ADD_TO_WISH_LIST" }) }} - {{ product.oxarticles__oxtitle.value }}" class="btn btn-sm btn-light w-100" href="{{ seo_url({ ident: oViewConf.getSelfLink() ~ "cl=account", params: "anid=" ~ product.oxarticles__oxnid.value ~ "&amp;sourcecl=" ~ oViewConf.getTopActiveClassName() ~ oViewConf.getNavUrlParams() }) }}">
                                    <svg>
                                        <use xlink:href="#star"></use>
                                    </svg>
                                </a>
                            {% endif %}
                        {% endblock %}
                    </div>
                </div>
            {% endblock %}
        </div>
        {% endblock %}

        <div class="card-body{% if tprice and tprice.getBruttoPrice() > price.getBruttoPrice() %} sale{% endif %}">
            <div class="d-flex justify-content-between">
                {% block widget_product_listitem_grid_titlebox %}
                    <div class="h5 card-title">
                        {{ product.oxarticles__oxtitle.value }} {{ product.oxarticles__oxvarselect.value }}
                    </div>
                {% endblock %}
                <div class="d-flex flex-column price{% if tprice and tprice.getBruttoPrice() > price.getBruttoPrice() %} sale{% endif %}">
                    {% block widget_product_listitem_grid_price %}
                        {% hasrights { ident: "SHOWARTICLEPRICE" } %}
                            {% if tprice and tprice.getBruttoPrice() > price.getBruttoPrice() %}
                                <span class="oldPrice text-muted">
                                    <del>{{ format_price(product.getTPrice(), { currency: currency }) }}</del>
                                </span>
                            {% endif %}

                            {% block widget_product_listitem_grid_price_value %}
                                {% if product.getPrice() %}
                                    <span class="h5 text-nowrap{% if tprice and tprice.getBruttoPrice() > price.getBruttoPrice() %} text-danger{% endif %}">
                                    {% if product.isRangePrice() %}
                                        {{ translate({ ident: "PRICE_FROM" }) }}

                                        {% set rangePrice = product.getVarMinPrice() %}
                                        {% if not product.isParentNotBuyable() %}
                                            {% set rangePrice = product.getMinPrice() %}
                                        {% endif %}

                                        {{ format_price(rangePrice, { currency: currency }) }}
                                    {% else %}
                                        {% set variantPrice = product.getVarMinPrice() %}
                                        {% if not product.isParentNotBuyable() %}
                                            {% set variantPrice = product.getPrice() %}
                                        {% endif %}

                                        {{ format_price(variantPrice, { currency: currency }) }}
                                    {% endif %}
                                </span>
                                {% endif %}
                            {% endblock %}
                        {% endhasrights %}

                        {% if oUnitPrice %}
                            <p id="productPricePerUnit_{{ testid }}" class="pricePerUnit">
                                {{ format_price(oUnitPrice, { currency: currency }) }}/{{ product.getUnitName() }}
                            </p>
                        {% endif %}
                    {% endblock %}
                </div>
            </div>
            {% if oUnitPrice or (product.oxarticles__oxweight.value and config.getConfigParam('blShowWeightInList'))%}
                <div class="qty_weight">
                    {% if oUnitPrice %}
                        {{ product.oxarticles__oxunitquantity.value }} {{ product.getUnitName() }} <br>
                    {% elseif product.oxarticles__oxweight.value and config.getConfigParam('blShowWeightInList')  %}
                        <span id="productPricePerUnit_Weight_{{ testid }}" class="pricePerUnit">
                                <span title="weight">{{ translate({ ident: "WEIGHT" }) }}</span>
                                <span class="value">{{ product.oxarticles__oxweight.value }} {{ translate({ ident: "KG" }) }}</span>
                            </span>
                    {% endif %}
                </div>
            {% endif %}
            <div class="short-desc">
                {{ product.oxarticles__oxshortdesc.value }}
            </div>
            <a href="{{ _productLink|raw }}" class="stretched-link" aria-label="{{ translate({ ident: "DETAILS" }) }} - {{ product.oxarticles__oxtitle.value }}"></a>
        </div>
    </div>
{% endblock %}