{% block widget_product_listitem_griditem_form %}
    {% set sFormName = "tobasket-" ~ sListId ~ "-" ~ iIndex %}

    {% if blDisplayBuyBox %}
        <form name="{{ sFormName }}" action="{{ oViewConf.getSelfActionLink()|raw }}" method="post" class="d-flex w-100 h-100">

            {% block widget_product_listitem_griditem_form_params %}
                {{ oViewConf.getNavFormParams()|raw }}
                {{ oViewConf.getHiddenSid()|raw }}
                <input type="hidden" name="pgNr" value="{{ oView.getActPage() }}">
                {% if recommid %}
                    <input type="hidden" name="recommid" value="{{ recommid }}">
                {% endif %}
                {% 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="{{ oProduct.oxarticles__oxid.value }}">
                    <input type="hidden" name="anid" value="{{ oProduct.oxarticles__oxnid.value }}">
                    <input type="hidden" name="am" value="1">
                {% endhasrights %}
            {% endblock %}
    {% endif %}

        {% block widget_product_listitem_griditem_card %}
            <div class="card c4s-article-grid-card">
                <a href="{% if oParentArticle %}{{ oParentArticle.getLink()|add_url_parameters("anid=" ~ sArticleId) }}{% else %}{{ sProductLink|raw }}{% endif %}"
                   class="card-link"
                   aria-label="{{ oProduct.oxarticles__oxtitle.value|replace({"\n": " "})|striptags }} {{ oProduct.oxarticles__oxvarselect.value }}"
                >
                    {% block widget_product_listitem_griditem_card_image %}
                        <img src="{{ oProduct.getThumbnailUrl() }}" alt="{{ oProduct.oxarticles__oxtitle.value|replace({"\n": ""})|striptags }} {{ oProduct.oxarticles__oxvarselect.value }}" class="card-img-top">
                    {% endblock %}

                    {% block widget_product_listitem_griditem_card_body %}
                        <div class="card-body" data-match-height="article-grid-card-body">

                            {% block widget_product_listitem_griditem_title %}
                                <div class="card-title">
                                    <strong>{{ oProduct.oxarticles__oxtitle.value|truncate(60, "&hellip;", false) }}{# {{ oProduct.oxarticles__oxvarselect.value }} #}</strong>
                                </div>
                            {% endblock %}

                            {% block widget_product_listitem_grid_shortdesc %}
                                {% if blDisplayShortDesc %}
                                    <div class="card-text">
                                        {{ oProduct.oxarticles__oxshortdesc.rawValue }}
                                    </div>
                                {% endif %}
                            {% endblock %}

                            {% block widget_product_listitem_grid_artnum %}
                                {% if blShowArticleNumber %}
                                    <div class="artnum">
                                        {{ translate({ ident: "C4S_ARTNUM_SHORT", suffix: "COLON" }) }} {{ oProduct.oxarticles__oxartnum.value }}
                                    </div>
                                {% endif %}
                            {% endblock %}

                            {% block widget_product_listitem_griditem_price %}
                                {% if blPerfLoadPrice and blDisplayPrice %}
                                    {% hasrights { ident: "SHOWARTICLEPRICE" } %}
                                        <div class="price"{% block widget_product_listitem_griditem_price_data %}{% endblock %}>
                                            {% set oUnitPrice = oProduct.getUnitPrice() %}
                                            {% set oTPrice = oProduct.getTPrice() %}
                                            {% set oPrice = oProduct.getPrice() %}

                                            {% if oTPrice and oTPrice.getBruttoPrice() > oPrice.getBruttoPrice() %}
                                                <span class="oldPrice text-muted">
                                                    <del>{{ oProduct.getFTPrice() }} {{ oCurrency.sign }}</del>
                                                </span>
                                            {% endif %}

                                            {% block widget_product_listitem_griditem_price_value %}
                                                {% if oProduct.getFPrice() %}
                                                    <span class="lead text-nowrap">
                                                        {% if oProduct.isRangePrice() %}
                                                            {{ translate({ ident: "PRICE_FROM" }) }}
                                                            {% if not oProduct.isParentNotBuyable() %}
                                                                {{ oProduct.getFMinPrice() }}
                                                            {% else %}
                                                                {{ oProduct.getFVarMinPrice() }}
                                                            {% endif %}
                                                        {% else %}
                                                            {% if not oProduct.isParentNotBuyable() %}
                                                                {{ oProduct.getFPrice() }}
                                                            {% else %}
                                                                {{ oProduct.getFVarMinPrice() }}
                                                            {% endif %}
                                                        {% endif %}
                                                        {{ oCurrency.sign }}
                                                        {% if oView.isVatIncluded() %}
                                                            {% if not (oProduct.hasMdVariants() or (oViewConf.showSelectListsInList() and oProduct.getSelections(1)) or oProduct.getVariants()) %}*{% endif %}
                                                        {% endif %}
                                                    </span>
                                                {% endif %}
                                            {% endblock %}
                                            {% if oUnitPrice %}
                                                <span id="productPricePerUnit_{{ testid }}" class="pricePerUnit">
                                                    {{ oProduct.oxarticles__oxunitquantity.value }} {{ oProduct.getUnitName() }} | {{ format_price(oUnitPrice, { currency: oCurrency }) }}/{{ oProduct.getUnitName() }}
                                                </span>
                                            {% elseif oProduct.oxarticles__oxweight.value  %}
                                                <span id="productPricePerUnit_{{ testid }}" class="pricePerUnit">
                                                    <span title="weight">{{ translate({ ident: "WEIGHT" }) }}</span>
                                                    <span class="value">{{ oProduct.oxarticles__oxweight.value }} {{ translate({ ident: "KG" }) }}</span>
                                                </span>
                                            {% endif %}
                                        </div>
                                    {% endhasrights %}
                                {% endif %}
                            {% endblock %}
                        </div>
                    {% endblock %}
                </a>

                {% if blDisplayBuyBox %}
                    {% block widget_product_listitem_griditem_card_footer %}
                        <div class="card-footer">
                            {% block widget_product_listitem_griditem_tobasket %}
                                <div class="btn-group" role="group">
                                    {% hasrights { ident: "TOBASKET" } %}
                                        {% if blCanBuyNotLoggedIn or oxcmp_user %}
                                            <button type="submit" class="btn btn-secondary float-start c4s-article-grid-basket-button"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-placement="bottom"
                                                    data-bs-container="body"
                                                    title="{{ translate({ ident: "TO_CART" }) }}"
                                            >
                                                <i class="fa-solid fa-cart-shopping"></i>
                                            </button>
                                        {% else %}
                                            <button type="button" class="btn btn-secondary float-start" data-bs-toggle="modal" data-bs-target="#c4s-login-modal">
                                                <i class="fa-solid fa-cart-shopping"></i>
                                            </button>
                                        {% endif %}
                                    {% endhasrights %}
                                    <a class="btn btn-primary" href="{{ sProductLink }}">
                                        {{ translate({ ident: "C4S_DISPLAY_ITEM" }) }}
                                    </a>
                                </div>
                            {% endblock %}
                        </div>
                    {% endblock %}
                {% endif %}
            </div>
        {% endblock %}

    {% if blDisplayBuyBox %}
        </form>
    {% endif %}
{% endblock %}