<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"
              [disabled]="type.value === 'package'"
              label="Status:">
  </aio-select>

  <div class="form-search">
    <input #filter placeholder="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"><a [href]="section.path">{{section.title}}</a></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> {{item.title}}</a>
        </li>
      </ng-container>
    </ul>
  </div>
</article>