<div class="container">
  <h2>{{ ctrl.headline }}</h2>
  
  <wave-spinner
    black
    ng-if="!ctrl.products.length">
  </wave-spinner>

  <div class="carousel carousel--alpha slide">
    <div class="carousel-controls" layout="row" layout-align="end end">
      <a class="carousel-control carousel-control-prev" ng-click="ctrl.carouselPrev()">
        <beyer-icon
          medium
          bg-color="white"
          name="Left-2">
        </beyer-icon>
      </a>
      <a class="carousel-control carousel-control-next" ng-click="ctrl.carouselNext()">
        <beyer-icon
          medium
          bg-color="white"
          name="Right-2">
        </beyer-icon>
      </a>
    </div>
    <div class="carousel-inner">

      <div
        class="carousel-item"
        ng-class="{active: $index === 0}"
        ng-repeat="slide in ctrl.slides track by $index">

        <div class="container-fluid px-0">
          <div class="row">
            <div
              ng-attr-class="col-12 col-sm-12 col-md-6 col-lg-{{ 12 / ctrl.itemsPerPage }} col-xl-{{ 12 / ctrl.itemsPerPage }}"
              ng-repeat="itemHelper in ctrl.itemsHelper($index) track by $index">
              <product-component
                class="no-action"
                product="ctrl.products[ $parent.$index * ctrl.itemsPerPage + $index ]">
              </product-component>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

</div>
