<div {{ attributes }}>
   {% set squareItemThis = this %}

   <a href="{{ this.url }}" class="product-link">
      <twig:Product:Labels id_product="{{ this.id_product }}" visibility="list"/>

      <twig:Picture thumbnail="{{ this.thumbnail|default(null) }}" type="product_catalog" alt="{{ this.title }}">
         <twig:Product:Reviews:Rating id_product="{{ outerScope.this.id_product }}"/>
      </twig:Picture>

      <div class="content">
         <h3 class="heading-reset title">{{ this.title }}</h3>
         <twig:Product:Price id_product="{{ this.id_product }}"/>
         <twig:Product:DeliveryTime:Availability id_product="{{ this.id_product }}"/>
      </div>
   </a>

   <twig:Product:BuyForm id_product="{{ this.id_product }}">
      {% if squareItemThis is defined %}
         <twig:Product:SubmitBlock>
            {% if not outerScope.this.canBuy or squareItemThis.hasVariations %}
               {# todo modal AddToCart, border-radius v submit-blocku #}
               <a role="button" class="btn btn-ctr btn-block"
                  data-wpj-modal="{{ path('kupshop_components_modal_modal', {template: 'submit-block-modal', id_product: outerScope.this.id_product}) }}">
                  {{ 'add.to.cart'|trans([], 'products') }}
               </a>
            {% else %}
               <twig:Product:AddToCartButton error_text="{{ outerScope.this.error_text }}" />
            {% endif %}
            <twig:JsShop:ActionButton type="compare" id_product="{{ outerScope.this.id_product }}" class="btn btn-outline"/>
            <twig:JsShop:ActionButton type="favorites" id_product="{{ outerScope.this.id_product }}" class="btn btn-outline"/>
         </twig:Product:SubmitBlock>
      {% endif %}
   </twig:Product:BuyForm>

   {# todo matice #}
   {# {% set variations = this.variations %}
   {% if variations.variations|length > 0 %}
      {% for id, variation in variations.variations %}
         <small>{{ variation.title }}</small>&nbsp;<div data-js-cart-product="{{ this.jsCartProduct(id)|json_encode }}"></div>
      {% endfor %}
   {% else %}
      <div data-js-cart-product="{{ this.jsCartProduct|json_encode }}"></div>
   {% endif %} #}
</div>
