<div>
    <h3>{{'APP_LAYOUT.EXTENDED_SEARCH_QUERY_BODY' | translate}}</h3>
    <mat-checkbox [(ngModel)]="useServiceApproach">
            {{'APP_LAYOUT.SEARCH_SERVICE_APPROACH' | translate}}
    </mat-checkbox>

    <div id="container-for-custom-input" class="search-extended-input-containers">
        <mat-form-field>
            <label>{{'APP_LAYOUT.WORD_TO_SEARCH' | translate}}</label>
            <input type="text" matInput
                    id="custom-input" [(ngModel)]="searchedWord" [searchAutocomplete]="auto">
        </mat-form-field>
    </div>
    <div>
      <adf-search #auto="searchAutocomplete"
                  [queryBody]="generateQueryBody(searchedWord)"
                  class="example-card-search-container">
          <ng-template let-data>
            <mat-card class="example-card"
                 *ngFor="let item of data?.list?.entries; let idx = index" (click)="onClick(item)">
                <mat-card-header>
                    <div mat-card-avatar class="example-header-image"></div>
                    <mat-card-title>{{ item?.entry.name }}</mat-card-title>
                    <mat-card-subtitle>{{ item?.entry.createdAt }}</mat-card-subtitle>
                </mat-card-header>
                <img mat-card-image [src]="getMimeTypeIcon(item)">
                <mat-card-content>
                    <p>
                        {{'APP_LAYOUT.SEARCH_CREATED_BY' | translate}}: {{item?.entry.createdByUser?.displayName}}
                    </p>
                </mat-card-content>
            </mat-card>
            <mat-card class="example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
                <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
            </mat-card>
        </ng-template>
      </adf-search>
    </div>
</div>
