<div class="tab-container" [ngClass]="{
    mac: electronService.isMac,
    windows: electronService.isWin,
    linux: electronService.isLinux
  }">
  <div class="control-container">
    <div class="select-container">
      <mat-form-field>
        <mat-label>{{ "PAGES.GET_ADDONS.CLIENT_TYPE_SELECT_LABEL" | translate }}</mat-label>
        <mat-select class="select" [(value)]="selectedClient" (selectionChange)="onClientChange()"
          [disabled]="isBusy === true">
          <mat-option [value]="clientType.value" *ngFor="let clientType of warcraftService.installedClientTypesSelectItems$ | async">
            {{ clientType.display | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="right-container">
      <div class="search-container">
        <mat-form-field>
          <mat-label>{{ "PAGES.GET_ADDONS.SEARCH_LABEL" | translate }}</mat-label>
          <input matInput type="text" [(ngModel)]="query" (keyup.enter)="onSearch()" />
          <button mat-button color="accent" *ngIf="query" matSuffix mat-icon-button aria-label="Clear"
            (click)="onClearSearch()">
            <mat-icon svgIcon="fas:times"></mat-icon>
          </button>
        </mat-form-field>
      </div>
      <div class="button-container">
        <button mat-flat-button color="primary" (click)="onRefresh()" appUserActionTracker category="GetAddons"
          action="Refresh">
          {{ "PAGES.GET_ADDONS.REFRESH_BUTTON" | translate }}
        </button>
        <button mat-flat-button color="primary" (click)="onInstallFromUrl()" appUserActionTracker category="GetAddons"
          action="InstallFromUrl">
          {{ "PAGES.GET_ADDONS.INSTALL_FROM_URL_BUTTON" | translate }}
        </button>
      </div>
    </div>
  </div>

  <div class="spinner-container flex-grow-1" *ngIf="isBusy === true">
    <app-progress-spinner> </app-progress-spinner>
  </div>

  <div *ngIf="isBusy === false && dataSource.data.length === 0" class="no-addons-container flex-grow-1 text-1">
    <h1>{{ "COMMON.SEARCH.NO_ADDONS" | translate }}</h1>
  </div>

  <div class="table-container flex-grow-1" [hidden]="isBusy === true || dataSource.data.length === 0">
    <table #table mat-table matSort (matSortChange)="onSortChange()" [dataSource]="dataSource"
      [matSortActive]="activeSort" [matSortDirection]="activeSortDirection" class="mat-elevation-z8">
      <ng-container matColumnDef="name">
        <th mat-header-cell mat-sort-header *matHeaderCellDef>
          {{ "PAGES.GET_ADDONS.TABLE.ADDON_COLUMN_HEADER" | translate }}
        </th>
        <td mat-cell *matCellDef="let element">
          <app-potential-addon-table-column [addon]="element" [channel]="defaultAddonChannel"
            [clientType]="selectedClient" (onViewDetails)="onAddonColumnDetailDialog($event)">
          </app-potential-addon-table-column>
        </td>
      </ng-container>

      <ng-container matColumnDef="downloadCount">
        <th mat-header-cell mat-sort-header *matHeaderCellDef>
          {{ "PAGES.GET_ADDONS.TABLE.DOWNLOAD_COUNT_COLUMN_HEADER" | translate }}
        </th>
        <td mat-cell *matCellDef="let element" class="cell-padding">
          {{ element.downloadCount | downloadCount }}
        </td>
      </ng-container>

      <ng-container matColumnDef="releasedAt">
        <th mat-header-cell mat-sort-header *matHeaderCellDef>
          {{ "PAGES.GET_ADDONS.TABLE.RELEASED_AT_COLUMN_HEADER" | translate }}
        </th>
        <td mat-cell *matCellDef="let element">
          <ng-template let-releasedAt [ngTemplateOutletContext]="{
              $implicit: element | getAddonListItemFileProp: 'releaseDate':defaultAddonChannel
            }" [ngTemplateOutlet]="t" #t>
            <div [matTooltip]="'COMMON.DATES.DATETIME_SHORT' | translate: { d: releasedAt }" matTooltipPosition="above"
              matTooltipShowDelay="500">
              {{ releasedAt | relativeDuration }}
            </div>
          </ng-template>
        </td>
      </ng-container>

      <ng-container matColumnDef="providerName">
        <th mat-header-cell mat-sort-header *matHeaderCellDef class="provider-column">
          {{ "PAGES.GET_ADDONS.TABLE.PROVIDER_COLUMN_HEADER" | translate }}
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element.providerName }}
        </td>
      </ng-container>

      <ng-container matColumnDef="author">
        <th mat-header-cell mat-sort-header *matHeaderCellDef>
          <div class="author-column">
            {{ "PAGES.GET_ADDONS.TABLE.AUTHOR_COLUMN_HEADER" | translate }}
          </div>
        </th>
        <td mat-cell *matCellDef="let element" class="cell-padding">
          <div class="author-column">
            {{ element.author }}
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>
          {{ "PAGES.GET_ADDONS.TABLE.STATUS_COLUMN_HEADER" | translate }}
        </th>
        <td mat-cell *matCellDef="let element">
          <app-get-addon-status-column [addonSearchResult]="element.searchResult"
            (onInstallViewUpdated)="onStatusColumnUpdated()"></app-get-addon-status-column>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="hover-bg-secondary-2"
        (contextmenu)="onHeaderContext($event); $event.preventDefault()"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" class="hover-bg-secondary-2"
        (dblclick)="onDoubleClickRow(row)"></tr>
    </table>
  </div>
</div>

<!-- COLUMNS CONTEXT MENU -->
<div style="visibility: hidden; position: fixed" #columnContextMenuTrigger="matMenuTrigger"
  [style.left]="contextMenuPosition.x" [style.top]="contextMenuPosition.y" [matMenuTriggerFor]="columnContextMenu">
</div>
<mat-menu #columnContextMenu="matMenu" class="addon-context-menu">
  <ng-template matMenuContent let-columns="columns">
    <div class="addon-context-menu-header">
      <div class="addon-name">
        {{ "PAGES.MY_ADDONS.COLUMNS_CONTEXT_MENU.TITLE" | translate }}
      </div>
    </div>
    <mat-divider></mat-divider>
    <mat-checkbox *ngFor="let column of columns" class="mat-menu-item" [checked]="column.visible"
      (change)="onColumnVisibleChange($event, column)">
      {{ column.display | translate }}
    </mat-checkbox>
  </ng-template>
</mat-menu>