{{#if includeContainer}}
  <div class="o-scroll-menu-container--markets-ticker">
{{/if}}

<div class="c-scroll-menu c-scroll-menu--white c-scroll-menu--markets c-scroll-menu--disabled js-markets">
  <div class="c-control c-control--white c-control--arrow c-control--arrow--left c-control--arrow--disabled">
    <button class="c-control__button js-markets-scroll-left" type="button" aria-controls="markets-content" 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>
  <div class="c-scroll-menu__nav c-scroll-menu__nav--markets">
    <ul id="markets-content" class="c-scroll-menu__list c-scroll-menu__list--markets">
      <li class="c-scroll-menu__item">
        <a class="c-markets-card" href="#">
          <div class="c-markets-card__content">
            <div class="c-markets-card__row c-markets-card__row-name">
              <span class="c-markets-card__name">TSX</span>
              <span class="c-markets-card__arrow c-markets-card__arrow--up"></span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-price">
              <span class="c-markets__price">16,136.59</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-change">
              <span class="c-markets-card__change c-markets-card__change--up">22.56 (0.14%)</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-time">
              <span class="c-markets-card__ticker--change">16:37 PM, Dec 13</span>
            </div>
          </div>
        </a>
      </li>
      <li class="c-scroll-menu__item">
        <a class="c-markets-card" href="#">
          <div class="c-markets-card__content">
            <div class="c-markets-card__row c-markets-card__row-name">
              <span class="c-markets-card__name"> S&amp;P 500 </span>
              <span class="c-markets-card__arrow c-markets-card__arrow--down"></span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-price">
              <span class="c-markets__price"> 2,662.85 </span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-change">
              <span class="c-markets-card__change c-markets-card__change--down"> -1.26 (-0.05%) </span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-time">
              <span class="c-markets-card__ticker--change"> 16:48 PM, Dec 13 </span>
            </div>
          </div>
        </a>
      </li>
      <li class="c-scroll-menu__item">
        <a class="c-markets-card" href="#">
          <div class="c-markets-card__content">
            <div class="c-markets-card__row c-markets-card__row-name">
              <span class="c-markets-card__name">DOW</span>
              <span class="c-markets-card__arrow c-markets-card__arrow--up"></span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-price">
              <span class="c-markets__price">24,585.43</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-change">
              <span class="c-markets-card__change c-markets-card__change--up">80.63 (0.33%)</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-time">
              <span class="c-markets-card__ticker--change">16:48 PM, Dec 13</span>
            </div>
          </div>
        </a>
      </li>
      <li class="c-scroll-menu__item">
        <a class="c-markets-card" href="#">
          <div class="c-markets-card__content">
            <div class="c-markets-card__row c-markets-card__row-name">
              <span class="c-markets-card__name">OIL</span>
              <span class="c-markets-card__arrow c-markets-card__arrow--down"></span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-price">
              <span class="c-markets__price">56.67</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-change">
              <span class="c-markets-card__change c-markets-card__change--down"> -0.47 (-0.82%) </span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-time">
              <span class="c-markets-card__ticker--change"> 15:59 PM, Dec 13 </span>
            </div>
          </div>
        </a>
      </li>
      <li class="c-scroll-menu__item">
        <a class="c-markets-card" href="#">
          <div class="c-markets-card__content">
            <div class="c-markets-card__row c-markets-card__row-name">
              <span class="c-markets-card__name">Dollar</span>
              <span class="c-markets-card__arrow c-markets-card__arrow--down"></span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-price">
              <span class="c-markets__price">0.77991</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-change">
              <span class="c-markets-card__change c-markets-card__change--down">-0.00019 (-0.02%)</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-time">
              <span class="c-markets-card__ticker--change">16:02 PM, Dec 13</span>
            </div>
          </div>
        </a>
      </li>
      <li class="c-scroll-menu__item">
        <a class="c-markets-card" href="#">
          <div class="c-markets-card__content">
            <div class="c-markets-card__row c-markets-card__row-name">
              <span class="c-markets-card__name">Gold</span>
              <span class="c-markets-card__arrow c-markets-card__arrow--up"></span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-price">
              <span class="c-markets__price">1,258.10</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-change">
              <span class="c-markets-card__change c-markets-card__change--up">16.40 (1.32%)</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-time">
              <span class="c-markets-card__ticker--change">15:59 PM, Dec 13</span>
            </div>
          </div>
        </a>
      </li>
      <li class="c-scroll-menu__item">
        <a class="c-markets-card" href="#">
          <div class="c-markets-card__content">
            <div class="c-markets-card__row c-markets-card__row-name">
              <span class="c-markets-card__name">Venture</span>
              <span class="c-markets-card__arrow c-markets-card__arrow--up"></span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-price">
              <span class="c-markets__price">798.57</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-change">
              <span class="c-markets-card__change c-markets-card__change--up">0.86 (0.11%)</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-time">
              <span class="c-markets-card__ticker--change">16:37 PM, Dec 13</span>
            </div>
          </div>
        </a>
      </li>
      <li class="c-scroll-menu__item">
        <a class="c-markets-card" href="#">
          <div class="c-markets-card__content">
            <div class="c-markets-card__row c-markets-card__row-name">
              <span class="c-markets-card__name">Nasdaq</span>
              <span class="c-markets-card__arrow c-markets-card__arrow--up"></span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-price">
              <span class="c-markets__price">823.01</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-change">
              <span class="c-markets-card__change c-markets-card__change--up">1.24 (0.61%)</span>
            </div>
            <div class="c-markets-card__row c-markets-card__row-time">
              <span class="c-markets-card__ticker--change">16:37 PM, Dec 13</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="c-control c-control--white c-control--arrow c-control--arrow--right c-control--arrow--disabled">
    <button class="c-control__button js-markets-scroll-right" type="button" aria-controls="markets-content" 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>
</div>

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