<nav
  class="container"
  ng-if="ctrl.attributeValues.length">

  <div class="row">
    <div class="col-12">
      <ul
        ng-if="ctrl.mode === 'tabs'">
        <li
          ng-repeat="attributeValue in ctrl.attributeValues"
          class="h6 light"
          ng-class="{active: ctrl.selectedAttributeValue === attributeValue}">
          <a
            href=""
            ng-click="ctrl.setActive(attributeValue)">{{ attributeValue }}</a>
        </li>
      </ul>

      <select
        class="form-select"
        ng-if="ctrl.mode === 'carousel'"
        ng-model="ctrl.selectedAttributeValue"
        ng-options="attributeValue for attributeValue in ctrl.attributeValues"
        ng-change="ctrl.initCarousel()">
      </select>
    </div>
  </div>
</nav>

<div
  class="bg-champagne-25">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="container-fluid">
          <h2>{{ ctrl.headline }}</h2>
          <wave-spinner champagne ng-if="!ctrl.products.length"></wave-spinner>
          <div
            ng-class="{'carousel slide': ctrl.mode === 'carousel'}">
            <ol
              class="product-items row carousel-inner">

              <li
                class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3"
                ng-repeat="product in ctrl.products"
                ng-class="{active: $index === 0, 'carousel-item': ctrl.mode === 'carousel'}">
                
                <product-component
                  prices="ctrl.prices"
                  class="no-action"
                  product="product">
                </product-component>

              </li>

            </ol>

            <a
              class="carousel-control-prev"
              ng-if="ctrl.mode === 'carousel' && ctrl.products.length"
              ng-click="ctrl.carouselPrev()">
              <beyer-icon
                medium
                name="Left-2">
              </beyer-icon>
            </a>
            <a
              class="carousel-control-next"
              ng-if="ctrl.mode === 'carousel' && ctrl.products.length"
              ng-click="ctrl.carouselNext()">
              <beyer-icon
                medium
                name="Right-2">
              </beyer-icon>
            </a>
          </div>

          <div
            class="container-show-more"
            layout="row"
            layout-align="center center"
            ng-if="ctrl.screensize !== 'xs' && ctrl.screensize !== 'sm' && ctrl.productsRaw.length > ctrl.stepLength">
            <span
              ng-click="ctrl.toggleList()"
              class="h6 light toggle-list">
              {{ ctrl.getToggleButtonText() }}
              <beyer-icon
                small
                iconset="material"
                ng-attr-name="{{ctrl.getToggleButtonIcon()}}"></beyer-icon>
            </span>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>