<aca-page-layout>
  <aca-page-layout-header>
    <adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE"> </adf-breadcrumb>
    <adf-toolbar class="adf-toolbar--inline">
      <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
        <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
      </ng-container>
    </adf-toolbar>
  </aca-page-layout-header>

  <aca-page-layout-content>
    <div class="main-content">
      <div class="adf-search-results">
        <adf-search-filter
          #searchFilter
          [ngClass]="{
            'adf-search-filter--hidden':
              hideSearchFilter() || !(showFacetFilter$ | async)
          }"
        ></adf-search-filter>
        <div class="adf-search-results__content">
          <mat-progress-bar
            *ngIf="isLoading"
            color="primary"
            mode="indeterminate"
          >
          </mat-progress-bar>
          <div
            class="adf-search-results__content-header content"
            *ngIf="data?.list.entries.length"
          >
            <div class="content__side--left">
              <div
                class="adf-search-results--info-text"
                *ngIf="totalResults !== 1"
              >
                {{
                  'APP.BROWSE.SEARCH.FOUND_RESULTS'
                    | translate: { number: totalResults }
                }}
              </div>
              <div
                class="adf-search-results--info-text"
                *ngIf="totalResults === 1"
              >
                {{
                  'APP.BROWSE.SEARCH.FOUND_ONE_RESULT'
                    | translate: { number: totalResults }
                }}
              </div>

              <div class="adf-search-results__facets">
                <adf-search-chip-list
                  [searchFilter]="searchFilter"
                ></adf-search-chip-list>
              </div>
            </div>

            <adf-search-sorting-picker
              class="content__side--right"
            ></adf-search-sorting-picker>
          </div>

          <adf-document-list
            #documentList
            acaDocumentList
            acaContextActions
            [showHeader]="false"
            [selectionMode]="'multiple'"
            [sortingMode]="'server'"
            [sorting]="sorting"
            [imageResolver]="imageResolver"
            [node]="data"
            (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
          >
            <data-columns>
              <data-column
                [key]="'$thumbnail'"
                [type]="'image'"
                [sr-title]="'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL'"
                [sortable]="false"
              >
              </data-column>

              <data-column key type="text">
                <ng-template let-context>
                  <aca-search-results-row
                    [context]="context"
                  ></aca-search-results-row>
                </ng-template>
              </data-column>
            </data-columns>

            <adf-custom-empty-content-template>
              <ng-container *ngIf="data">
                <div class="empty-search__block">
                  <p class="empty-search__text">
                    {{ 'APP.BROWSE.SEARCH.NO_RESULTS' | translate }}
                  </p>
                </div>
              </ng-container>
            </adf-custom-empty-content-template>
          </adf-document-list>

          <adf-pagination
            *ngIf="!documentList.isEmpty()"
            acaPagination
            [target]="documentList"
            (change)="onPaginationChanged($event)"
          >
          </adf-pagination>
        </div>
      </div>
    </div>
    <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
      <aca-info-drawer [node]="selection.last"></aca-info-drawer>
    </div>
  </aca-page-layout-content>
</aca-page-layout>
