<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    type="button"
    (click)="reload()"
  >
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': reloading }"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-data-grid
  [title]="tableTitle | translate"
  #dataGrid
  [columns]="columns"
  [rows]="rows$ | async"
  [pagination]="pagination"
  [actionControls]="actionControls"
  [bulkActionControls]="bulkActionControls"
  [displayOptions]="displayOptions"
  [hideReload]="true"
  [selectable]="true"
>
  @if ((rows$ | async)?.length === 0) {
    <c8y-ui-empty-state
      [icon]="'certificate'"
      [title]="'No provisioned certificates to display.' | translate"
    ></c8y-ui-empty-state>
  }

  <c8y-column name="serialNumber">
    <ng-container *c8yCellRendererDef="let context">
      <span
        class="text-truncate"
        title="{{ context.property.header | translate }}: {{ context.value }}"
      >
        {{ context.value }}
      </span>
    </ng-container>
  </c8y-column>

  <c8y-column name="notBefore">
    <ng-container *c8yCellRendererDef="let context">
      <span
        class="text-truncate"
        title="{{ context.property.header | translate }}: {{ context.value | c8yDate }}"
      >
        @if (context.value) {
          <span>
            <i
              class="m-r-4"
              c8yIcon="calendar"
            ></i>
            <span>{{ context.value | c8yDate }}</span>
          </span>
        }
      </span>
    </ng-container>
  </c8y-column>

  <c8y-column name="notAfter">
    <ng-container *c8yCellRendererDef="let context">
      @let expirationHighlight = getExpirationHighlight(context.item);
      <span
        [title]="
          (context.property.header | translate) +
          ': ' +
          (context.value | c8yDate) +
          (expirationHighlight?.tooltipText
            ? ' - ' + (expirationHighlight?.tooltipText | translate)
            : '')
        "
        [ngClass]="expirationHighlight?.textClass"
      >
        @if (expirationHighlight?.expired) {
          <del>
            <ng-container *ngTemplateOutlet="expirationDateTpl"></ng-container>
          </del>
        } @else {
          <ng-container *ngTemplateOutlet="expirationDateTpl"></ng-container>
        }
        <ng-template #expirationDateTpl>
          @if (expirationHighlight?.icon) {
            <i
              class="m-r-4"
              c8yIcon="{{ expirationHighlight?.icon }}"
            ></i>
          }
          <span>{{ context.value | c8yDate }}</span>
        </ng-template>
      </span>
    </ng-container>
  </c8y-column>
</c8y-data-grid>