<aca-page-layout>
  <div class="aca-page-layout-header">
    <aca-search-input />
    <div class="aca-search-toolbar-spacer"></div>
    <aca-toolbar [items]="actions" />
  </div>

  <div class="aca-page-layout-content">
    <div class="aca-main-content">
      <div class="adf-search-results">
        <div class="adf-search-results__content">
          <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" />
          <div class="adf-search-results__content-header aca-content-lib" *ngIf="data?.list.entries.length">
            <div class="aca-content__side--left">
              <div class="adf-search-results--info-text" *ngIf="totalResults !== 1">
                {{ 'APP.BROWSE.SEARCH_LIBRARIES.FOUND_RESULTS' | translate: { number: totalResults } }}
              </div>
              <div class="adf-search-results--info-text" *ngIf="totalResults === 1">
                {{ 'APP.BROWSE.SEARCH_LIBRARIES.FOUND_ONE_RESULT' | translate: { number: totalResults } }}
              </div>
            </div>
          </div>

          <adf-document-list
            #documentList
            acaContextActions
            acaDocumentList
            [showHeader]="showHeader"
            [selectionMode]="'multiple'"
            [multiselect]="true"
            [sorting]="['name', 'asc']"
            [node]="data"
            [displayCheckboxesOnHover]="true"
            [imageResolver]="imageResolver"
            [isResizingEnabled]="true"
            [blurOnResize]="false"
            (node-dblclick)="handleNodeClick($event)"
            (name-click)="handleNodeClick($event)"
          >
            <data-columns>
              <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
                <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
                  <data-column
                    [id]="column.id"
                    [key]="column.key"
                    [title]="column.title"
                    [type]="column.type"
                    [format]="column.format"
                    [class]="column.class"
                    [sortable]="column.sortable"
                    [draggable]="column.draggable"
                    [resizable]="column.resizable"
                  >
                    <ng-template let-context>
                      <adf-dynamic-column [id]="column.template" [context]="context" />
                    </ng-template>
                  </data-column>
                </ng-container>

                <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
                  <data-column
                    [id]="column.id"
                    [key]="column.key"
                    [title]="column.title"
                    [type]="column.type"
                    [format]="column.format"
                    [class]="column.class"
                    [sortable]="column.sortable"
                    [draggable]="column.draggable"
                    [resizable]="column.resizable"
                  />
                </ng-container>
              </ng-container>
            </data-columns>

            <adf-custom-empty-content-template>
              <ng-container *ngIf="data">
                <div class="empty-search__block" aria-live="polite">
                  <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="totalResults > 0" acaPagination [target]="documentList" (change)="onPaginationChanged($event)" />
        </div>
      </div>
    </div>
    <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
      <aca-info-drawer [node]="selection.last" />
    </div>
  </div>
</aca-page-layout>
