@if(registrarService.inNewRegistrarMode()) {
<app-new-registrar />
} @else {
<div class="console-app__registrars">
  <div class="console-app__registrars-header">
    <h1 class="mat-headline-4">Registrars</h1>
    <button
      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
      >
        <ng-container
          *ngFor="let column of columns"
          [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)"
        ></mat-row>
      </mat-table>

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

}