<!--
~ 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/>.
-->
<ion-header>
  @if (showDrawer && showTopToolbar) {
    <ion-toolbar color="primary" mode="ios">
      <ion-buttons slot="start">
        <ion-back-button [defaultHref]="backUrl"></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="{{ placeholder | translate }}"
      mode="md"
      type="search"
      enterkeyhint="search"
      class="filterable"
      [autofocus]="!showDefaultData"
    >
    </ion-searchbar>
    @if (showContextMenu) {
      <!-- TODO has to be fixed to md for now. ios mode displays broken/missing icon -->
      <ion-menu-button mode="md" menu="context" auto-hide="false" slot="end" (click)="openContextMenu()">
        <ion-icon name="tune"></ion-icon>
      </ion-menu-button>
    }
  </ion-toolbar>
  @if (navigation.length > 0) {
    <ion-toolbar color="primary" class="category-tab">
      <ion-buttons class="ion-justify-content-between">
        @for (target of navigation; track target) {
          @if (target.routerLink) {
            <ion-button
              [routerLink]="target.routerLink"
              queryParamsHandling="merge"
              [routerAnimation]="routeAnimation"
              fill="outline"
              size="large"
              >{{ target.label | translate }}
            </ion-button>
          } @else {
            <ion-button class="button-active" size="large">{{ target.label | 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="centered-message-container"> {{ searchInstruction | 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>
