<stapps-context contentId="data-list"></stapps-context>
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-menu-button menu="context" auto-hide="false">
        <ion-icon name="options"></ion-icon>
      </ion-menu-button>
    </ion-buttons>
    <ion-searchbar
      (ngModelChange)="searchStringChanged($event)"
      [(ngModel)]="queryText"
      showClearButton="always"
      placeholder="{{ 'hebisSearch.search_bar.placeholder' | translate }}"
    >
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div
    [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
  >
    <ion-label class="centeredMessageContainer">
      {{ 'hebisSearch.instruction' | translate }}
    </ion-label>
  </div>
  <stapps-data-list
    id="data-list"
    [items]="items | async"
    [singleType]="singleTypeResponse"
    (loadmore)="loadMore()"
    [resetToTop]="queryChanged.asObservable()"
    [loading]="loading"
  ></stapps-data-list>
</ion-content>
