<div class="card-search-article">
  <h1 class="title">Artikelsuche</h1>
  <p class="info">
    Welchen Artikel suchen Sie?
  </p>
  <ng-container *ngIf="filter$ | async; let filter">
    <ui-filter-filter-group-main [inputGroup]="filter?.filter | group: 'main'"></ui-filter-filter-group-main>
    <ui-filter-input-group-main
      [hint]="searchboxHint$ | async"
      [loading]="fetching$ | async"
      [inputGroup]="filter?.input | group: 'main'"
      (search)="search(filter)"
      [showDescription]="false"
      [scanner]="true"
    ></ui-filter-input-group-main>

    <div class="recent-searches-wrapper">
      <h3 class="recent-searches-header">Deine letzten Suchanfragen</h3>
      <ul>
        <li class="recent-searches-items" *ngFor="let recentQuery of history$ | async">
          <button (click)="setQueryHistory(filter, recentQuery.friendlyName)">
            <ui-icon icon="search" size="15px"></ui-icon>
            <p>{{ recentQuery.friendlyName }}</p>
          </button>
        </li>
      </ul>
    </div>
  </ng-container>
</div>
