<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()"
          [indeterminate]="selection.hasValue() && !tableUtility?.isAllSelected()"
          [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 }}
      </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
    class="remote-button"
    color="primary"
    style="margin-right: 5em"
    matTooltip="Add external package"
    [matTooltipPosition]="tableUtility?.tooltipPosition"
    (click)="onAddExternalPackage()"
  >
    <mat-icon> add </mat-icon>
  </button>

  <button
    mat-raised-button
    class="remote-button"
    color="accent"
    matTooltip="{{ selection?.selected?.length === 1 ? 'Remove external module source' : 'Remove external module sources' }}"
    [matTooltipPosition]="tableUtility?.tooltipPosition"
    (click)="onRemoveExternalPackage()"
    [disabled]="!selection.selected.length || !packages.length"
  >
    <mat-icon> delete </mat-icon>
  </button>
</div>
