{if !empty($crosssellpro_products)}
{assign var='crosssellpro_is_checkout' value=(isset($crosssellpro_mode) && $crosssellpro_mode == 'checkout')}
<section
  class="crosssellpro-block{if isset($crosssellpro_mode) && $crosssellpro_mode == 'cart'} card{/if}"
  data-crosssellpro-block="1"
  data-crosssellpro-mode="{if isset($crosssellpro_mode)}{$crosssellpro_mode|escape:'htmlall':'UTF-8'}{else}cart{/if}"
  data-cart-url="{$crosssellpro_cart_url}"
  data-return-url="{$crosssellpro_return_url}"
  data-token="{$static_token}"
>
  <div class="card-block">
    <div class="crosssellpro-header">
      <h2 class="h4 crosssellpro-title">
        {if $crosssellpro_is_checkout}
          {l s='Ostatnia szansa na pełen komfort snu:' mod='crosssellpro'}
        {else}
          {l s='Klienci, którzy kupili ten materac, wybierali też:' mod='crosssellpro'}
        {/if}
      </h2>
      <div class="crosssellpro-nav" aria-hidden="true">
        <button type="button" class="crosssellpro-nav-btn js-crosssellpro-prev" aria-label="{l s='Poprzednie produkty' mod='crosssellpro'}">&lsaquo;</button>
        <button type="button" class="crosssellpro-nav-btn js-crosssellpro-next" aria-label="{l s='Nastepne produkty' mod='crosssellpro'}">&rsaquo;</button>
      </div>
    </div>

    <div class="crosssellpro-viewport js-crosssellpro-viewport"{if $crosssellpro_is_checkout} style="overflow-x:auto;overflow-y:hidden;"{/if}>
      <div class="crosssellpro-track js-crosssellpro-track"{if $crosssellpro_is_checkout} style="display:flex;flex-direction:row;flex-wrap:nowrap;gap:0;align-items:stretch;"{/if}>
        {foreach from=$crosssellpro_products item=product}
          <article class="crosssellpro-item"{if $crosssellpro_is_checkout} style="flex:0 0 100%;width:100%;max-width:100%;padding:0;border:0;background:transparent;border-radius:0;"{/if}>
            <a href="{$product.url}" class="crosssellpro-image-link" title="{$product.name|escape:'htmlall':'UTF-8'}">
              {if !empty($product.cover.bySize.home_default.url)}
                <img
                  class="img-fluid"
                  src="{$product.cover.bySize.home_default.url}"
                  alt="{$product.name|escape:'htmlall':'UTF-8'}"
                  loading="lazy"
                >
              {else}
                <span class="crosssellpro-image-placeholder"></span>
              {/if}
            </a>

            <h3 class="crosssellpro-name">
              <a href="{$product.url}">{$product.name}</a>
            </h3>

            <div class="crosssellpro-price">{$product.price}</div>

            {if $product.crosssellpro_requires_selection}
              <a
                href="{$product.crosssellpro_cta_url}"
                class="btn btn-primary crosssellpro-cta"
                rel="nofollow"
              >
                {$product.crosssellpro_cta_label}
              </a>
            {else}
              <a
                href="{$crosssellpro_return_url}"
                class="btn btn-primary crosssellpro-cta"
                data-crosssellpro-add="1"
                data-id-product="{$product.id_product|intval}"
                data-qty="{if isset($product.minimal_quantity) && $product.minimal_quantity > 0}{$product.minimal_quantity|intval}{else}1{/if}"
                data-post-add-url="{$product.crosssellpro_post_add_url}"
                rel="nofollow"
              >
                {$product.crosssellpro_cta_label}
              </a>
            {/if}
          </article>
        {/foreach}
      </div>
    </div>
  </div>
</section>
{/if}