<h1>Api Keys</h1>

<mat-table [dataSource]="dataSubject" class="mat-elevation-z2">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let apikey">
      <app-settings-apikey-editor
        [value]="apikey.name"
        (changed)="updateKeyName($event, apikey.id)"
      ></app-settings-apikey-editor>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="created">
    <mat-header-cell class="d-none d-lg-flex" *matHeaderCellDef>
      Created
    </mat-header-cell>
    <mat-cell class="d-none d-lg-flex" *matCellDef="let apikey">
      {{ apikey.created | amTimeAgo }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="last_used">
    <mat-header-cell class="d-none d-sm-flex" *matHeaderCellDef>
      Last Used
    </mat-header-cell>
    <mat-cell class="d-none d-sm-flex" *matCellDef="let apikey">
      {{ apikey.last_used === null ? 'Never' : (apikey.last_used | amTimeAgo) }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="actions">
    <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
    <mat-cell *matCellDef="let apikey">
      <button mat-icon-button (click)="copyKey(apikey.key)">
        <mat-icon fontSet="material-icons-outlined" aria-label="Copy Key">
          content_copy
        </mat-icon>
      </button>
      <button mat-icon-button (click)="deleteApiKey(apikey.id)">
        <mat-icon
          fontSet="material-icons-outlined"
          class="icon-red"
          aria-label="Delete"
        >
          delete
        </mat-icon>
      </button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"> </mat-row>
</mat-table>

<mat-paginator
  class="mat-elevation-z2"
  [pageSizeOptions]="pageSizeOptions"
  [pageSize]="startingPageSize"
  [showFirstLastButtons]="bootstrapService.isNotMobile() | async"
  [hidePageSize]="bootstrapService.isMobile() | async"
  [length]="totalApiKeys"
  aria-label="Select page of apikeys"
  (page)="updateSubject.next($event)"
>
</mat-paginator>

<fab
  aria-label="Add Api Key"
  (click)="addApiKey()"
  icon="add"
  tooltip="Create a new api key"
></fab>
