<div class="l-flex-wrap api-filter">

  <aio-select (change)="setType($event.option)"
              [options]="types"
              [selected]="type"
              [showSymbol]="true"
              label="Type:">
  </aio-select>

  <!-- <aio-select (change)="setStatus($event.option)"
              [options]="statuses"
              [selected]="status"
              label="Status:">
  </aio-select> -->

  <div class="form-search">
    <input #filter placeholder="Filter" aria-label="Filter" (input)="setQuery($event.target.value)">
    <i class="material-icons">search</i>
  </div>
</div>

<article class="api-list-container l-content-small docs-content">
  <div *ngFor="let section of filteredSections | async" >
    <h2 *ngIf="section.items">{{section.title}}</h2>
    <ul class="api-list" *ngIf="section.items?.length">
      <ng-container *ngFor="let item of section.items">
        <li class="api-item">
          <a [href]="item.path">
            <span class="symbol {{item.docType}}"></span>
            <span class="stability {{item.stability}}">{{item.title}} {{!item.stability || item.stability === 'stable' ? '' : '(' + item.stability + ')'}}</span>
          </a>
        </li>
      </ng-container>
    </ul>
  </div>
</article>