<!--
  ~ Copyright (C) 2023 StApps
  ~ This program is free software: you can redistribute it and/or modify it
  ~ under the terms of the GNU General Public License as published by the Free
  ~ Software Foundation, version 3.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT
  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  ~ more details.
  ~
  ~ You should have received a copy of the GNU General Public License along with
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

<stapps-context contentId="data-list"></stapps-context>
<ion-header>
  <ion-toolbar color="primary" mode="ios" *ngIf="showDrawer">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ title | translate }}</ion-title>
  </ion-toolbar>
  <ion-toolbar color="primary">
    <ion-searchbar
      (ngModelChange)="searchStringChanged($event)"
      (keyup.enter)="hideKeyboard()"
      (search)="hideKeyboard()"
      [(ngModel)]="queryText"
      showClearButton="always"
      placeholder="{{ 'search.search_bar.placeholder' | translate }}"
      mode="md"
      type="search"
      enterkeyhint="search"
      class="filterable"
      [autofocus]="!showDefaultData"
    >
      <ion-menu-button menu="context" auto-hide="false">
        <ion-icon name="tune"></ion-icon>
      </ion-menu-button>
    </ion-searchbar>
  </ion-toolbar>
  <ion-toolbar color="primary" class="category-tab" *ngIf="showNavigation && isHebisAvailable">
    <ion-buttons class="ion-justify-content-between">
      <ion-button class="button-active" size="large">{{ 'search.type' | translate }}</ion-button>
      <ion-button
        [routerLink]="['/hebis-search']"
        queryParamsHandling="merge"
        [routerAnimation]="routeAnimation"
        fill="outline"
        size="large"
        >{{ 'hebisSearch.type' | translate }}
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="content">
  <div
    [class.no-results]="!showDefaultData && !items && !loading"
    [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
  >
    <ion-label class="centeredMessageContainer">
      {{ 'search.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>
