<div id="o-panel" class="o-panel{{#if panelOpen}} o-panel--open{{/if}}"{{#unless panelOpen}} hidden{{/unless}}>

  <div class="o-panel-scrollable o-panel-scrollable--search">

    <div class="c-control c-control--close c-control--close-top">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
        <span class="c-control__button-text u-visually-hidden">close panel</span>
      </button>
    </div>

    <div class="o-panel-search{{#ifCond panelOpen "==" "search"}} o-panel-search--open{{/ifCond}}">

      <div class="o-panel-search__section">
        {{> search-box displayStyle=searchFieldProps.displayStyle searchButton=searchFieldProps.searchButton }}
      </div>

      <div class="o-panel-search__section">

        <h3 class="o-panel__h3">Top results in Stocks, EFTS and Commodities</h3>

        {{!-- See search table pattern --}}

      </div>

      <div class="o-panel-search__section">

        <div class="c-control c-control--autowidth c-control--panel c-control--grey-700-border">
          <a class="c-control__button" href="#">
            <span class="c-control__label">See More Stocks Results</span>
          </a>
        </div>

        <div class="c-control c-control--autowidth c-control--panel c-control--grey-800-border">
          <a class="c-control__button" href="#">
            <span class="c-control__label">Search in Articles</span>
          </a>
        </div>
      </div>

    </div>

  </div>

  <div class="o-panel-scrollable o-panel-scrollable--categories">

    <div class="c-control c-control--close c-control--close-top">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
        <span class="c-control__button-text u-visually-hidden">close panel</span>
      </button>
    </div>

    <div class="o-panel-categories{{#ifCond panelOpen "==" "categories"}} o-panel-categories--open{{/ifCond}}">

      {{!-- first column --}}
      <div class="o-panel-categories__section o-panel-categories__section--accordion">
        {{> accordion items=items}}
      </div>

      {{!-- second column --}}
      <div class="o-panel-categories__section o-panel-categories__section--flex">

        {{!-- quick links --}}
        <div class="o-panel-categories__sub-section">
          <h3 class="o-panel__h3 o-panel__h3--categories">Quick Links</h3>
          <div class="o-panel-ql">
            <a class="o-panel-ql__a" href="#">Horoscopes</a>
            <a class="o-panel-ql__a" href="#">Puzzles</a>
          </div>
        </div>

        {{!-- my custom --}}
        <div class="o-panel-categories__sub-section">
          <h3 class="o-panel__h3 o-panel__h3--categories">Customer Service</h3>
          <ul class="c-accordion">
            <li class="c-accordion__item">
              <div class="c-accordion__item__container">
                <a class="c-accordion__item__link" href="#">My Account</a>
              </div>
            </li>
            <li class="c-accordion__item">
              <div class="c-accordion__item__container">
                <a class="c-accordion__item__link" href="#">Customer Help</a>
              </div>
            </li>
            <li class="c-accordion__item">
              <div class="c-accordion__item__container">
                <a class="c-accordion__item__link" href="#">Contact Us</a>
              </div>
            </li>
            <li class="c-accordion__item">
              <div class="c-accordion__item__container">
                <a class="c-accordion__item__link" href="#">Subscribe</a>
              </div>
            </li>
            <li class="c-accordion__item">
              <div class="c-accordion__item__container">
                <a class="c-accordion__item__link" href="#">Log In</a>
              </div>
            </li>
          </ul>
        </div>

        {{!-- text resizer --}}
        <div class="o-panel-categories__sub-section">
          {{> text-resizer}}
        </div>
      </div>

    </div>

    <div class="c-control c-control--close c-control--close-bottom">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
        <span class="c-control__button-text u-visually-hidden">close panel</span>
      </button>
    </div>

  </div>

  <nav class="c-scroll-menu__static-nav">
    <ul class="c-scroll-menu__list c-scroll-menu__list--center">
      <li class="c-scroll-menu__item">
        <a class="c-scroll-menu__link" href="#">Privacy Policy</a>
      </li>
      <li class="c-scroll-menu__item">
        <a class="c-scroll-menu__link" href="#">Terms &amp; Conditions</a>
      </li>
    </ul>
  </nav>

</div>
