<!-- 
  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.
-->

{{#if @root.featureFlags.componentsX}}
  <div class="{{@root.prefix}}--pagination" data-pagination>
    <div class="{{@root.prefix}}--pagination__left">
      <label id="select-id-pagination-count-label{{#if disabledPaginationButton}}--disabled-example{{/if}}"
        class="{{@root.prefix}}--pagination__text"
        for="select-id-pagination-count{{#if disabledPaginationButton}}--disabled-example{{/if}}">
        Items per page:
      </label>
      <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline {{@root.prefix}}--select__item-count">
        <select class="{{@root.prefix}}--select-input"
          id="select-id-pagination-count{{#if disabledPaginationButton}}--disabled-example{{/if}}"
          aria-label="Items per page" tabindex="0" data-items-per-page>
          {{#each itemsPerPageChoices}}
            <option class="{{@root.prefix}}--select-option" value="{{value}}">
              {{label}}
            </option>
          {{/each}}
        </select>
        {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
      </div>
      <span class="{{@root.prefix}}--pagination__text">
        <span data-displayed-item-range>1-10</span> of
        <span data-total-items>
          {{#if disabledPaginationButton}}
            10
          {{else}}
            40
          {{/if}}
        </span> items
      </span>
    </div>
    <div class="{{@root.prefix}}--pagination__right">
      <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline {{@root.prefix}}--select__page-number">
        <select class="{{@root.prefix}}--select-input"
          id="select-id-pagination-page{{#if disabledPaginationButton}}--disabled-example{{/if}}"
          aria-label="page number, of {{totalPages}} pages" tabindex="0" data-page-number-input>
          {{#each pageNumberChoices}}
            <option class="{{@root.prefix}}--select-option" value="{{value}}">
              {{label}}
            </option>
          {{/each}}
        </select>
        {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow')}}
      </div>
      <label id="select-id-pagination-page-label{{#if disabledPaginationButton}}--disabled-example{{/if}}"
        class="{{@root.prefix}}--pagination__text"
        for="select-id-pagination-page{{#if disabledPaginationButton}}--disabled-example{{/if}}">
        of {{totalPages}} pages
      </label>
      <button
        class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--backward {{#if disabledPaginationButton}}{{@root.prefix}}--pagination__button--no-index{{/if}}"
        tabindex="0" data-page-backward aria-label="previous page">
        {{ carbon-icon 'CaretLeft20' class=(add @root.prefix '--pagination__nav-arrow')}}
      </button>
      <button
        class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--forward {{#if disabledPaginationButton}}{{@root.prefix}}--pagination__button--no-index{{/if}}"
        tabindex="0" data-page-forward aria-label="next page">
        {{ carbon-icon 'CaretRight20' class=(add @root.prefix '--pagination__nav-arrow')}}
      </button>
    </div>
  </div>
{{else}}
  <div class="{{@root.prefix}}--pagination" data-pagination>
    <div class="{{@root.prefix}}--pagination__left">
      <div class="{{@root.prefix}}--select{{#is version "v2"}} {{@root.prefix}}--select--inline{{/is}}">
        {{#is version "v2"}}
          <label for="select-id-pagination" id="select-id-pagination-label"
            class="{{@root.prefix}}--pagination__text">Items per page: </label>
        {{/is}}
        <select id="select-id-pagination" aria-label="select number of items per page"
          class="{{@root.prefix}}--select-input" data-items-per-page>
          {{#each itemsPerPageChoices}}
            <option class="{{@root.prefix}}--select-option" value="{{value}}" {{#if selected}} selected{{/if}}>{{label}}
            </option>
          {{/each}}
        </select>
        {{#if @root.featureFlags.componentsX}}
          {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
        {{else}}
          <svg class="{{@root.prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
            <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
          </svg>
        {{/if}}
      </div>
      {{#isnt version "v2"}}
        <span class="{{@root.prefix}}--pagination__text">Items per page&nbsp;&nbsp;|&nbsp;&nbsp;</span>
      {{/isnt}}
      <span class="{{@root.prefix}}--pagination__text">
        {{#is version "v2"}}
          <span>|&nbsp;</span>
        {{/is}}
        <span data-displayed-item-range>1-10</span> of
        <span data-total-items>40</span> items</span>
    </div>
    <div class="{{@root.prefix}}--pagination__right{{#is version "v2"}} {{@root.prefix}}--pagination--inline{{/is}}">
      <span class="{{@root.prefix}}--pagination__text">
        <span data-displayed-page-number>1</span> of
        <span data-total-pages>4</span> pages</span>
      <button class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--backward"
        data-page-backward aria-label="Backward button">
        {{#if @root.featureFlags.componentsX}}
          {{ carbon-icon 'ChevronLeft16' class=(add @root.prefix '--pagination__button-icon') }}
        {{else}}
          <svg class="{{@root.prefix}}--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
            <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z" />
          </svg>
        {{/if}}
      </button>
      <label for="page-number-input" class="{{@root.prefix}}--visually-hidden">Page number input</label>
      {{#isnt version "v2"}}
        <input id="page-number-input" type="text" class="{{@root.prefix}}--text-input" placeholder="0" value="1"
          data-page-number-input>
{{else}}
  <div class="{{@root.prefix}}--select {{@root.prefix}}--select--inline">
    <label for="select-id-pagination" class="{{@root.prefix}}--visually-hidden">Page number</label>
    <select id="select-id-pagination" class="{{@root.prefix}}--select-input" data-page-number-input>
      {{#each pageNumberChoices}}
        <option class="{{@root.prefix}}--select-option" value="{{value}}" {{#if selected}} selected{{/if}}>{{label}}
        </option>
      {{/each}}
    </select>
    {{#if @root.featureFlags.componentsX}}
      {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--select__arrow') }}
    {{else}}
      <svg class="{{@root.prefix}}--select__arrow" width="10" height="5" viewBox="0 0 10 5">
        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
      </svg>
    {{/if}}
  </div>
      {{/isnt}}
      <button class="{{@root.prefix}}--pagination__button {{@root.prefix}}--pagination__button--forward"
        data-page-forward aria-label="Forward button">
        {{#if @root.featureFlags.componentsX}}
          {{ carbon-icon 'ChevronRight16' class=(add @root.prefix '--pagination__button-icon') }}
        {{else}}
          <svg class="{{@root.prefix}}--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
            <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
          </svg>
        {{/if}}
      </button>
    </div>
  </div>
{{/if}}