<div class="header">
  <h2>Providers for {{ injector().name }}</h2>
  <button ng-button btnType="icon" class="close-btn" title="Close details" (click)="close.emit()">
    <mat-icon>close</mat-icon>
  </button>
</div>
@if (injector()) {
  <div class="filter">
    <div class="token-filter">
      <label for="search-by-token">Search by token</label>
      <input
        id="search-by-token"
        type="text"
        class="ng-input"
        placeholder="Provider token"
        (input)="searchToken.set($any($event.target).value)"
        [value]="searchToken()"
      />
      @if (searchToken().length) {
        <button
          class="clear-filter"
          ng-button
          btnType="icon"
          (click)="searchToken.set('')"
          title="Clear provider token filter"
        >
          <mat-icon>close</mat-icon>
        </button>
      }
    </div>
    <div class="type-filter">
      <label for="search-by-type">Search by type</label>
      <select
        id="search-by-type"
        #filterTypeSelect
        (change)="searchType.set(filterTypeSelect.value !== 'all' ? filterTypeSelect.value : '')"
        class="ng-select"
      >
        <option value="all">All</option>
        @for (type of providerTypes; track type) {
          <option [value]="type">{{ $any(providerTypeToLabel)[type] }}</option>
        }
      </select>
    </div>
  </div>
  @if (visibleProviders().length > 0) {
    <table mat-table [dataSource]="visibleProviders()" class="mat-elevation-z4">
      <ng-container matColumnDef="token">
        <th mat-header-cell *matHeaderCellDef>Token</th>
        <td mat-cell *matCellDef="let provider" class="token-cell" [attr.title]="provider.token">
          {{ provider.token }}
        </td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>Type</th>
        <td mat-cell *matCellDef="let provider">
          @if (provider.type === 'multi') {
            multi (x{{ provider.index.length }})
          } @else {
            {{ $any(providerTypeToLabel)[provider.type] }}
          }
        </td>
      </ng-container>

      <ng-container matColumnDef="isViewProvider">
        <th mat-header-cell *matHeaderCellDef>Is View Provider</th>
        <td mat-cell *matCellDef="let provider">
          <mat-icon>{{ provider.isViewProvider ? 'check_circle' : 'cancel' }}</mat-icon>
        </td>
      </ng-container>

      <ng-container matColumnDef="log">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let provider">
          <button ng-button btnType="icon" (click)="select(provider)">
            <mat-icon matTooltipPosition="left" matTooltip="Log provider in console" class="select"
              >code</mat-icon
            >
          </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  } @else {
    <p class="no-providers-label">No such providers</p>
  }
}
