@if(registrarService.inNewRegistrarMode()) {
<app-new-registrar />
} @else {
<div class="console-app__registrars">
  <div class="console-app__registrars-header">
    <h1 class="mat-headline-4" forceFocus>Registrars</h1>
    <div class="spacer"></div>
    @if (oteButtonVisible) {
    <button
      mat-stroked-button
      (click)="createOteAccount()"
      aria-label="Generate OT&E accounts"
      [elementId]="getElementIdForOteBlock()"
    >
      Create OT&E accounts
    </button>
    }
    <button
      class="console-app__registrars-new"
      mat-flat-button
      color="primary"
      (click)="openNewRegistrar()"
      aria-label="Add new registrar"
    >
      <mat-icon>add</mat-icon>
      Add new registrar
    </button>
  </div>
  <div class="console-app__scrollable-wrapper">
    <div class="console-app__scrollable">
      <mat-form-field class="console-app__registrars-filter">
        <mat-label>Search</mat-label>
        <input
          matInput
          (keyup)="applyFilter($event)"
          placeholder="..."
          type="search"
        />
        <mat-icon matPrefix>search</mat-icon>
      </mat-form-field>
      <mat-table
        [dataSource]="dataSource"
        class="mat-elevation-z0"
        class="console-app__registrars-table"
        matSort
      >
        @for (column of columns; track column) {
        <ng-container [matColumnDef]="column.columnDef">
          <mat-header-cell *matHeaderCellDef>
            {{ column.header }}
          </mat-header-cell>
          <mat-cell
            *matCellDef="let row"
            [innerHTML]="column.cell(row)"
          ></mat-cell>
        </ng-container>
        }
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row
          *matRowDef="let row; columns: displayedColumns"
          (click)="openDetails(row.registrarId)"
          tabindex="0"
          (keyup.enter)="openDetails(row.registrarId)"
        ></mat-row>
      </mat-table>

      <mat-paginator
        class="mat-elevation-z0"
        [pageSizeOptions]="[5, 10, 20]"
        showFirstLastButtons
      ></mat-paginator>
    </div>
  </div>
</div>

}