<clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
  <clr-dg-column class="col-id">
    <ng-container>ID</ng-container>
  </clr-dg-column>
  <clr-dg-column [clrDgField]="'name'">
    <ng-container *clrDgHideableColumn="showState['name']">{{'TITLE.NAME' | translate}}</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['role']">{{'TITLE.ROLE' | translate}}</ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-time">
    <ng-container *clrDgHideableColumn="showState['create_time']">{{'TITLE.CREATE_TIME' | translate}}</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['expire_time']">{{'TITLE.EXPIRE_TIME' | translate}}(s)</ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-user">
    <ng-container *clrDgHideableColumn="showState['create_user']">{{'TITLE.CREATE_USER' | translate}}</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['description']">{{'TITLE.DESCRIPTION' | translate}}</ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-operate">
    <ng-container *clrDgHideableColumn="showState['action']">{{'TITLE.ACTION' | translate}}</ng-container>
  </clr-dg-column>

  <clr-dg-row *ngFor="let apiKey of apiKeys" [clrDgItem]="apiKey">
    <clr-dg-cell class="col-id">{{apiKey.id}}</clr-dg-cell>
    <clr-dg-cell class="copy">{{apiKey.name}}</clr-dg-cell>
    <clr-dg-cell class="copy">{{apiKey.group?.name}}</clr-dg-cell>
    <clr-dg-cell class="col-time">{{apiKey.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
    <clr-dg-cell>{{apiKey.expireIn === 0 ? "permanent valid" : apiKey.expireIn}}</clr-dg-cell>
    <clr-dg-cell class="col-user">{{apiKey.user}}</clr-dg-cell>
    <clr-dg-cell>{{apiKey.description}}</clr-dg-cell>
    <clr-dg-cell class="col-operate">
      <button class="wayne-button text"
              *ngIf="authService.currentNamespacePermission.apiKey.read || authService.currentUser.admin"
              (click)="tokenDetail(apiKey)">{{'ACTION.DETAIL' | translate}}</button>
      <button class="wayne-button text"
              *ngIf="authService.currentNamespacePermission.apiKey.delete || authService.currentUser.admin"
              (click)="deleteApiKey(apiKey)">{{'ACTION.DELETE' | translate}}</button>
    </clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    <wayne-paginate
      [(currentPage)]="currentPage"
      [total]="page.totalCount"
      [pageSizes]="[10, 20, 50]"
      (sizeChange)="pageSizeChange($event)"
    >
    </wayne-paginate>
  </clr-dg-footer>
</clr-datagrid>
<token-detail></token-detail>
