<mat-form-field>
  <mat-icon matPrefix style="vertical-align: middle;">search</mat-icon> <input matInput id="searchbar" (keyup)="tableUtility?.searchFilter($event)"/>
</mat-form-field>

<div class="table-container">
  <table
    mat-table
    matSort
    (matSortChange)="tableUtility?.onSort($event, allPackages)"
    [dataSource]="dataSource"
    class="mat-elevation-z8"
    style="margin: 0 auto; width: 90vw; position: relative;"
    >

    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox
          color="primary"
          (change)="$event ? tableUtility?.toggleSelectAll() : null"
          [checked]="selection.hasValue() && tableUtility?.isAllSelected(dataSource.filteredData?.length ? dataSource.filteredData : dataSource.data)"
          [indeterminate]="selection.hasValue() && !tableUtility?.isAllSelected(dataSource?.filteredData?.length ? dataSource.filteredData : dataSource.data)"
          [aria-label]="tableUtility?.checkboxLabel()"
          >
        </mat-checkbox>
      </th>

    <td mat-cell *matCellDef="let row">
      <mat-checkbox
        color="primary"
        (click)="$event.stopPropagation()"
        (change)="$event ? selection.toggle(row) : null"
        [checked]="selection.isSelected(row)"
        [aria-label]="tableUtility?.checkboxLabel(row)"
        >
      </mat-checkbox>
    </td>
  </ng-container>

  <ng-container matColumnDef="category">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
    <td mat-cell *matCellDef="let package">{{package.category}}</td>
  </ng-container>

  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
    <td mat-cell *matCellDef="let package">{{package.title}}
  </ng-container>

  <ng-container matColumnDef="repository">
    <th mat-header-cell *matHeaderCellDef>Repository</th>
    <td mat-cell *matCellDef="let package">
      <a href="{{package.repository}}" target="_blank">
        {{package.repository}}
      </a>
    </td>
  </ng-container>

  <ng-container matColumnDef="author">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Author</th>
    <td mat-cell *matCellDef="let package">{{package.author}}</td>
  </ng-container>

  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef>Description</th>
    <td
      style="max-width: 275px;"
      mat-cell
      *matCellDef="let package"
      matTooltip="Click for more details"
      matTooltipClass="matTooltipClass"
      >
      <button mat-button style="font-weight: normal" (click)="tableUtility?.showPackageDetails(package)">
        {{ tableUtility?.trimDescription(package.description) }}
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="tableUtility?.displayedColumns; sticky: true"></tr>

  <tr
    mat-row
    *matRowDef="let row; columns: tableUtility?.displayedColumns;"
    (click)="selection.toggle(row)"
    ></tr>
  </table>

  <mat-paginator
    (page)="setPaginationCookie($event)"
    [pageSizeOptions]="[5, 10]"
    showFirstLastButtons
    style="width: 100%;"
    >
  </mat-paginator>

    <button
      mat-raised-button
      color="primary"
      class="remote-button"
      [disabled]="!selection?.selected?.length || !allPackages?.length"
      matTooltip="Install packages"
      [matTooltipPosition]="tableUtility?.tooltipPosition"
      (click)="onInstallPackages()"
      >
      <mat-icon>get_app</mat-icon>
    </button>

    <button
      class="remote-button"
      color="accent"
      mat-raised-button
      matTooltip="Refresh marketplace"
      [matTooltipPosition]="tableUtility?.tooltipPosition"
      style="margin-left: 5em;"
      (click)="onRefreshPackages()"
      >
      <mat-icon>refresh</mat-icon>
    </button>
</div>
