<ul class="c-accordion c-accordion-top-level">
  {{#each items}}
    <li class="c-accordion__item">

      <div class="c-accordion__item__container">
        <a href="#" class="c-accordion__item__link">{{this.label}}</a>
        <div class="c-control c-control--accordion">
          <button class="c-control__button" type="button" aria-controls="subcategory-level-2-A" aria-expanded="false">
            <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-down"></use>
            </svg>
            <span class="c-control__button-text u-visually-hidden">open sub categories</span>
          </button>
        </div>
      </div>

      {{#if this.subItems}}
        <ul id="subcategory-level-2-A" class="c-accordion c-accordion--level-2">
          {{#each this.subItems}}
            <li class="c-accordion__item">
              <div class="c-accordion__item__container">
                <a href="#" class="c-accordion__item__link">{{this.label}}</a>
                <div class="c-control c-control--accordion">
                  <button class="c-control__button" type="button">
                    <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-down"></use>
                    </svg>
                    <span class="c-control__button-text u-visually-hidden">open sub categories</span>
                  </button>
                </div>
              </div>

              {{#if this.subItems}}
                <ul class="c-accordion c-accordion--level-3">
                  {{#each this.subItems}}
                    <li class="c-accordion__item">
                      <div class="c-accordion__item__container">
                        <a href="#" class="c-accordion__item__link">{{this.label}}</a>
                        <div class="c-control c-control--accordion">
                          <button class="c-control__button" type="button">
                            <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-down"></use>
                            </svg>
                            <span class="c-control__button-text u-visually-hidden">open sub categories</span>
                          </button>
                        </div>
                      </div>

                      {{#if this.subItems}}
                        <ul class="c-accordion c-accordion--level-4">
                          {{#each this.subItems}}
                            <li class="c-accordion__item">
                              <div class="c-accordion__item__container">
                                <a href="#" class="c-accordion__item__link">{{this.label}}</a>
                                <div class="c-control c-control--accordion">
                                  <button class="c-control__button" type="button">
                                    <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-down"></use>
                                    </svg>
                                    <span class="c-control__button-text u-visually-hidden">open sub categories</span>
                                  </button>
                                </div>
                              </div>
                            </li>
                          {{/each}}
                        </ul>
                      {{/if}}

                    </li>
                  {{/each}}
                </ul>
              {{/if}}

            </li>
          {{/each}}
        </ul>
      {{/if}}

    </li>
  {{/each}}
</ul>
