@if (contactService.contactInEdit) {
<div class="console-app__contact" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
  <div class="console-app__contact-controls">
    <button
      mat-icon-button
      aria-label="Back to contacts list"
      (click)="goBack()"
    >
      <mat-icon>arrow_back</mat-icon>
    </button>
    <div class="spacer"></div>
    @if(!isEditing && !contactService.isContactNewView) {
    <button
      mat-flat-button
      color="primary"
      aria-label="Edit Contact"
      (click)="isEditing = true"
    >
      <mat-icon>edit</mat-icon>
      Edit
    </button>
    <button
      mat-icon-button
      aria-label="Delete Contact"
      (click)="deleteContact()"
    >
      <mat-icon>delete</mat-icon>
    </button>
    }
  </div>
  @if(isEditing || contactService.isContactNewView) {
  <h1>Contact Details</h1>
  <form (ngSubmit)="save($event)">
    <section>
      <mat-form-field appearance="outline">
        <mat-label>Name: </mat-label>
        <input
          matInput
          [required]="true"
          [(ngModel)]="contactService.contactInEdit.name"
          [ngModelOptions]="{ standalone: true }"
        />
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Primary account email: </mat-label>
        <input
          type="email"
          matInput
          [email]="true"
          [required]="true"
          [(ngModel)]="contactService.contactInEdit.emailAddress"
          [ngModelOptions]="{ standalone: true }"
          [disabled]="emailAddressIsDisabled()"
          [matTooltip]="
            emailAddressIsDisabled()
              ? 'Reach out to registry customer support to update email address'
              : ''
          "
        />
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Phone: </mat-label>
        <input
          matInput
          [(ngModel)]="contactService.contactInEdit.phoneNumber"
          [ngModelOptions]="{ standalone: true }"
          placeholder="+0.0000000000"
        />
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Fax: </mat-label>
        <input
          matInput
          [(ngModel)]="contactService.contactInEdit.faxNumber"
          [ngModelOptions]="{ standalone: true }"
        />
      </mat-form-field>
    </section>
    <section>
      <h1>Contact Type</h1>
      <p class="console-app__contact-required">
        <mat-icon color="accent">error</mat-icon>Required to select at least one
        (primary contact can't be updated)
      </p>
      <div class="">
        @for (contactType of contactTypeToTextMap | keyvalue; track contactType)
        { @if (shouldDisplayCheckbox(contactType.key)) {
        <mat-checkbox
          [checked]="checkboxIsChecked(contactType.key)"
          (change)="checkboxOnChange($event, contactType.key)"
          [disabled]="checkboxIsDisabled(contactType.key)"
        >
          {{ contactType.value }}
        </mat-checkbox>
        } }
      </div>
    </section>
    <section>
      <h1>RDAP Preferences</h1>
      <div>
        <mat-checkbox
          [(ngModel)]="contactService.contactInEdit.visibleInRdapAsAdmin"
          [ngModelOptions]="{ standalone: true }"
          >Show in Registrar RDAP record as admin contact</mat-checkbox
        >
      </div>
      <div>
        <mat-checkbox
          [(ngModel)]="contactService.contactInEdit.visibleInRdapAsTech"
          [ngModelOptions]="{ standalone: true }"
          >Show in Registrar RDAP record as technical contact</mat-checkbox
        >
      </div>
      <div>
        <mat-checkbox
          [(ngModel)]="contactService.contactInEdit.visibleInDomainRdapAsAbuse"
          [ngModelOptions]="{ standalone: true }"
          >Show Phone and Email in Domain RDAP Record as registrar abuse contact
          (per CL&D requirements)</mat-checkbox
        >
      </div>
    </section>
    <button
      class="console-app__contact-submit"
      mat-flat-button
      color="primary"
      type="submit"
      aria-label="Save contact updates"
    >
      Save
    </button>
  </form>
  } @else {
  <h1>{{ contactService.contactInEdit.name }}</h1>
  <mat-card appearance="outlined">
    <mat-card-content>
      <mat-list role="list">
        <mat-list-item role="listitem">
          <h2>Contact details</h2>
        </mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item role="listitem">
          <span class="console-app__list-key">Email</span>
          <span class="console-app__list-value">{{
            contactService.contactInEdit.emailAddress
          }}</span>
        </mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item role="listitem">
          <span class="console-app__list-key">Phone</span>
          <span class="console-app__list-value">{{
            contactService.contactInEdit.phoneNumber
          }}</span>
        </mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item role="listitem">
          <span class="console-app__list-key">Fax</span>
          <span class="console-app__list-value">{{
            contactService.contactInEdit.faxNumber
          }}</span>
        </mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item role="listitem">
          <span class="console-app__list-key">Type:</span>
          <span class="console-app__list-value">{{
            contactService.contactInEdit.userFriendlyTypes.join(", ")
          }}</span>
        </mat-list-item>
      </mat-list>
    </mat-card-content>
  </mat-card>
  <mat-card appearance="outlined">
    <mat-card-content>
      <mat-list role="list">
        <mat-list-item role="listitem">
          <h2>RDAP Preferences</h2>
        </mat-list-item>
        @if(contactService.contactInEdit.visibleInRdapAsAdmin) {
        <mat-divider></mat-divider>
        <mat-list-item role="listitem">
          <span class="console-app__list-value"
            >Show in Registrar RDAP record as admin contact</span
          >
        </mat-list-item>
        } @if(contactService.contactInEdit.visibleInRdapAsTech) {
        <mat-divider></mat-divider>
        @if (contactService.contactInEdit.visibleInRdapAsTech) {
        <mat-list-item role="listitem">
          <span class="console-app__list-value"
            >Show in Registrar RDAP record as technical contact</span
          >
        </mat-list-item>
        } } @if(contactService.contactInEdit.visibleInDomainRdapAsAbuse) {
        <mat-divider></mat-divider>
        <mat-list-item role="listitem">
          <span class="console-app__list-value"
            >Show Phone and Email in Domain RDAP Record as registrar abuse
            contact (per CL&D requirements)</span
          >
        </mat-list-item>
        }
      </mat-list>
    </mat-card-content>
  </mat-card>
  }
</div>
}