<div class="why-not-add {{modifier}} {{#if isSingleProduct}}why-not-add--single{{/if}}" data-why-not-add>
  <div class="why-not-add__header">
    <h3 class="why-not-add__title">{{title}}</h3>

    {{#unless isSingleProduct}}
      <div class="why-not-add__arrows">
        <button
            class="why-not-add__arrow why-not-add__arrow-prev"
            type="button"
            aria-label="Previous slide"
            data-why-not-add-prev
        >
          <i class="fas fa-chevron-left"></i>
        </button>

        <button
            class="why-not-add__arrow why-not-add__arrow-next"
            type="button"
            aria-label="Next slide"
            data-why-not-add-next
        >
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    {{/unless}}
  </div>

  <div class="swiper-container why-not-add__slider" data-why-not-add-slider>
    <div class="swiper-wrapper">
      {{#each products}}
        <div class="swiper-slide why-not-add__slide">
          {{> bloomreach/why-not-add-card this}}
        </div>
      {{/each}}
    </div>
  </div>

  {{#unless isSingleProduct}}
    <div class="why-not-add__pagination" data-why-not-add-pagination></div>
  {{/unless}}
</div>
