<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, packages)" [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; let i = index;">{{ 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; let i = index;">{{ package.title }}
      <mat-icon *ngIf="isUpgradeable[i]" matTooltip="Upgrade available" color="accent">
        unarchive
      </mat-icon>
    </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
    class="remote-button"
    color="accent"
    matTooltip="Uninstall packages"
    [matTooltipPosition]="tableUtility?.tooltipPosition"
    (click)="onUninstallPackages()"
    [disabled]="!selection?.selected?.length || !packages?.length"
  >
    <mat-icon>
      delete
    </mat-icon>
  </button>
</div>
