<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="{{@root.prefix}}--type-omega">Carousel Title</div>
<div class="{{@root.prefix}}--carousel" data-carousel>
  <button class="{{@root.prefix}}--carousel__btn" data-scroll-left>
    <svg class="{{@root.prefix}}--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
      <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
    </svg>
  </button>
  <div class="{{@root.prefix}}--carousel-container">
    <div class="{{@root.prefix}}--filmstrip" tabindex="-1">
      {{#each items}}
        <button class="{{@root.prefix}}--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="{{@index}}">
          <img src="{{filmstripImageUrl}}">
        </button>
      {{/each}}
    </div>
  </div>
  <button class="{{@root.prefix}}--carousel__btn" data-scroll-right>
    <svg class="{{@root.prefix}}--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
      <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
    </svg>
  </button>
</div>

<div id="carousel-lightbox" class="{{@root.prefix}}--modal" data-modal>
  <div class="{{@root.prefix}}--lightbox" data-lightbox data-lightbox-index="0">
    <div class="{{@root.prefix}}--lightbox__main">
      <button class="{{@root.prefix}}--lightbox__btn" data-scroll-left>
        <svg class="{{@root.prefix}}--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
        </svg>
      </button>
      {{#each items}}
        <img src="{{lightboxImageUrl}}" class="{{@root.prefix}}--lightbox__item">
      {{/each}}
      <button class="{{@root.prefix}}--lightbox__btn" data-scroll-right>
        <svg class="{{@root.prefix}}--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>
