{{#if includeContainer}}
  <div class="o-scroll-menu-container{{#if modifierClass}} o-scroll-menu-container{{modifierClass}}{{/if}}{{#if isSubNav}} o-scroll-menu-container--subnav{{else}} o-scroll-menu-container--footer{{/if}}">
{{/if}}

    <div class="c-scroll-menu{{#if modifierClass}} c-scroll-menu{{modifierClass}}{{/if}}">

      {{#if showArrows}}
        <div class="c-control {{#if modifierClass}}c-control{{modifierClass}}{{/if}} c-control--arrow c-control--arrow--left">
          <button class="c-control__button" type="button" aria-hidden="true" tabindex="-1">
            <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
              <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-left"></use>
            </svg>
            <span class="c-control__button-text u-visually-hidden">scroll menu left</span>
          </button>
        </div>
      {{/if}}

      <nav class="c-scroll-menu__nav">
        <ul class="c-scroll-menu__list {{#if center}}c-scroll-menu__list--center{{/if}}">
          {{#each items}}
            <li class="c-scroll-menu__item">
              <a class="c-scroll-menu__link{{#if ../footer}} c-scroll-menu__link--footer{{/if}}" href="#">{{this}}</a>
            </li>
          {{/each}}
        </ul>
      </nav>

      {{#if showArrows}}
        <div class="c-control {{#if modifierClass}}c-control{{modifierClass}}{{/if}} c-control--arrow c-control--arrow--right">
          <button class="c-control__button" type="button" aria-hidden="true" tabindex="-1">
            <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
              <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-right"></use>
            </svg>
            <span class="c-control__button-text u-visually-hidden">scroll menu right</span>
          </button>
        </div>
      {{/if}}

    </div>

{{#if includeContainer}}
  </div>
{{/if}}
