<div
  class="tab-container"
  [ngClass]="{
    mac: electronService.isMac,
    windows: electronService.isWin,
    linux: electronService.isLinux
  }"
  (click)="onTableBlur($event)"
>
  <div class="control-container bg-secondary-2">
    <div class="select-container">
      <app-client-selector></app-client-selector>
    </div>
    <div *ngIf="selectedAddonCategory?.category !== addonCategory.AllAddons" class="center-container text-1">
      <h4 class="m-0">
        {{
          "PAGES.GET_ADDONS.ADDON_CATEGORIES_SELECTED_TITLE"
            | translate: { category: (selectedAddonCategory?.localeKey ?? "" | translate) }
        }}
      </h4>
      <button
        class="wu-btn wu-btn-icon"
        aria-label="Clear Category"
        [matTooltip]="'PAGES.GET_ADDONS.RESET_CATEGORY_TOOLTIP' | translate"
        (click)="resetCategory()"
      >
        <mat-icon svgIcon="fas:xmark"></mat-icon>
      </button>
    </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"
            [disabled]="enableControls$ | async | invertBool"
            (keyup.enter)="onSearch()"
          />
          <button
            class="wu-btn wu-btn-flat wu-btn-icon"
            *ngIf="query"
            matSuffix
            aria-label="Clear"
            (click)="onClearSearch()"
          >
            <mat-icon svgIcon="fas:xmark"></mat-icon>
          </button>
        </mat-form-field>
      </div>
      <div class="button-container">
        <button
          class="wu-btn wu-btn-primary"
          [matTooltip]="'PAGES.GET_ADDONS.REFRESH_TOOLTIP' | translate"
          [disabled]="enableControls$ | async | invertBool"
          (click)="onRefresh()"
        >
          {{ (query ? "PAGES.GET_ADDONS.SEARCH_LABEL" : "PAGES.GET_ADDONS.REFRESH_BUTTON") | translate }}
        </button>
        <button
          class="wu-btn wu-btn-primary"
          [matTooltip]="'PAGES.GET_ADDONS.INSTALL_FROM_URL_TOOLTIP' | translate"
          [disabled]="enableControls$ | async | invertBool"
          (click)="onInstallFromUrl()"
        >
          {{ "PAGES.GET_ADDONS.INSTALL_FROM_URL_BUTTON" | translate }}
        </button>
        <button
          class="wu-btn wu-btn-primary"
          [matTooltip]="'PAGES.GET_ADDONS.ADDON_CATEGORIES_TOOLTIP' | translate"
          [disabled]="enableControls$ | async | invertBool"
          (click)="drawer.toggle()"
        >
          {{ "PAGES.GET_ADDONS.ADDON_CATEGORIES_BUTTON" | translate }}
        </button>
      </div>
    </div>
  </div>

  <mat-drawer-container class="wu-ag-table bg-secondary-2" [hasBackdrop]="true">
    <mat-drawer
      #drawer
      mode="over"
      position="end"
      [autoFocus]="false"
      style="padding-right: 0.25em; background-color: var(--background-secondary-2-fill)"
    >
      <h3 class="px-3">{{ "PAGES.GET_ADDONS.ADDON_CATEGORIES_MENU_TITLE" | translate }}</h3>
      <mat-divider></mat-divider>
      <mat-action-list>
        <button
          *ngFor="let item of addonCategories"
          mat-list-item
          [ngClass]="{ 'text-control': selectedAddonCategory === item }"
          (click)="selectedAddonCategory = item"
        >
          {{ item.localeKey | translate }}
        </button>
      </mat-action-list>
    </mat-drawer>
    <mat-drawer-content>
      <div class="spinner-container flex-grow-1" style="height: 100%" *ngIf="(showTable$ | async) === false">
        <app-progress-spinner> </app-progress-spinner>
      </div>

      <ag-grid-angular
        class="ag-theme-material"
        style="height: 100%; padding-right: 0.25em"
        [hidden]="(showTable$ | async) === false"
        [rowData]="rowData$ | async"
        [columnDefs]="columnDefs$ | async"
        [columnTypes]="columnTypes"
        [rowSelection]="'single'"
        [suppressMultiSort]="true"
        [overlayNoRowsTemplate]="overlayNoRowsTemplate"
        [rowHeight]="63"
        (rowDoubleClicked)="onRowDoubleClicked($event)"
        (rowClicked)="onRowClicked($event)"
        (gridReady)="onGridReady($event)"
      >
      </ag-grid-angular>
    </mat-drawer-content>
  </mat-drawer-container>
</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 text-1">
  <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>
