nomulus/console-webapp/src/app/registrar/registrarDetails.component.html

<div
  class="console-app__registrar-view"
  cdkTrapFocus
  [cdkTrapFocusAutoCapture]="true"
>
  <h1 class="mat-headline-4">Registrars</h1>
  <mat-divider></mat-divider>
  <div class="console-app__registrar-view-content">
    <div class="console-app__registrar-view-controls">
      <button mat-icon-button aria-label="Back to registrars list" backButton>
        <mat-icon>arrow_back</mat-icon>
      </button>
      <div class="spacer"></div>
      @if(!inEdit && !registrarNotFound) {
      <button
        *ngIf="oteButtonVisible"
        mat-stroked-button
        (click)="checkOteStatus()"
        aria-label="Check OT&E account status"
        [elementId]="getElementIdForOteBlock()"
      >
        Check OT&E Status
      </button>
      <button
        mat-flat-button
        color="primary"
        aria-label="Edit Registrar"
        (click)="inEdit = true"
      >
        <mat-icon>edit</mat-icon>
        Edit
      </button>
      <button mat-icon-button aria-label="Delete Registrar">
        <mat-icon>delete</mat-icon>
      </button>
      }
    </div>
    @if(registrarNotFound) {
    <h1>Registrar not found</h1>
    } @else {
    <h1>{{ registrarInEdit.registrarId }}</h1>
    <h2 *ngIf="registrarInEdit.registrarName !== registrarInEdit.registrarId">
      {{ registrarInEdit.registrarName }}
    </h2>
    @if(inEdit) {
    <form (ngSubmit)="saveAndClose()">
      <div>
        <mat-form-field appearance="outline">
          <mat-label>Registry Lock:</mat-label>
          <mat-select
            [(ngModel)]="registrarInEdit.registryLockAllowed"
            name="registryLockAllowed"
          >
            <mat-option [value]="true">True</mat-option>
            <mat-option [value]="false">False</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div>
        <mat-form-field appearance="outline">
          <mat-label>Onboarded TLDs: </mat-label>
          <mat-chip-grid #chipGrid aria-label="Enter TLD">
            <mat-chip-row
              *ngFor="let tld of registrarInEdit.allowedTlds"
              (removed)="removeTLD(tld)"
            >
              {{ tld }}
              <button matChipRemove aria-label="'remove ' + tld">
                <mat-icon>cancel</mat-icon>
              </button>
            </mat-chip-row>
          </mat-chip-grid>
          <input
            placeholder="New tld..."
            [matChipInputFor]="chipGrid"
            (matChipInputTokenEnd)="addTLD($event)"
          />
        </mat-form-field>
      </div>
      <button
        mat-flat-button
        color="primary"
        aria-label="Edit Registrar"
        type="submit"
      >
        Save
      </button>
    </form>
    } @else {
    <mat-card appearance="outlined">
      <mat-card-content>
        <mat-list role="list">
          <mat-list-item role="listitem">
            <h2>Registrar details</h2>
          </mat-list-item>
          <mat-divider></mat-divider>
          @for (column of columns; track column.columnDef) {
          <mat-list-item role="listitem">
            <span class="console-app__list-key">{{ column.header }} </span>
            <span
              class="console-app__list-value"
              [innerHTML]="column.cell(registrarInEdit).replace('<br/>', ' ')"
            ></span>
          </mat-list-item>
          <mat-divider></mat-divider>
          }
        </mat-list>
      </mat-card-content>
    </mat-card>
    } }
  </div>
</div>