@if(securityService.isEditingSecurity) {
<app-security-edit></app-security-edit>
} @else if(securityService.isEditingPassword) {
<app-epp-password-edit></app-epp-password-edit>
} @else {
<div class="settings-security">
  <mat-card appearance="outlined">
    <mat-card-content>
      <mat-list role="list">
        <!-- IP Allowlist Start -->
        <mat-list-item role="listitem">
          <div class="settings-security__section-header">
            <h2>EPP Password</h2>
            <button
              mat-flat-button
              color="primary"
              aria-label="Edit EPP Password"
              (click)="editEppPassword()"
            >
              <mat-icon>edit</mat-icon>
              Edit
            </button>
          </div>
        </mat-list-item>
        <mat-list-item role="listitem" lines="3">
          <span class="console-app__list-value"
            >Change the password used for EPP logins</span
          >
        </mat-list-item>
        <mat-list-item role="listitem">
          <span class="console-app__list-key">Password</span>
          <span class="console-app__list-value">••••••••••••••</span>
        </mat-list-item>
        @if(dataSource.eppPasswordLastUpdated) {
        <mat-divider></mat-divider>
        <mat-list-item role="listitem">
          <span class="console-app__list-key">Last Changed</span>
          <span class="console-app__list-value">{{
            dataSource.eppPasswordLastUpdated
          }}</span>
        </mat-list-item>
        }
      </mat-list>
    </mat-card-content>
  </mat-card>
  <mat-card appearance="outlined">
    <mat-card-content>
      <mat-list role="list">
        <!-- IP Allowlist Start -->
        <mat-list-item role="listitem">
          <div class="settings-security__section-header">
            <h2>IP Allowlist</h2>
            <button
              mat-flat-button
              color="primary"
              aria-label="Edit security settings"
              (click)="editSecurity()"
            >
              <mat-icon>edit</mat-icon>
              Edit
            </button>
          </div>
        </mat-list-item>
        <mat-list-item role="listitem" lines="3">
          <span class="console-app__list-value"
            >Restrict access to EPP production servers to the following IP/IPv6
            addresses, or ranges like 1.1.1.0/24</span
          >
        </mat-list-item>
        <mat-divider></mat-divider>
        @for (item of dataSource.ipAddressAllowList; track item.value) {
        <mat-list-item role="listitem">
          <span class="console-app__list-value">{{ item.value }}</span>
        </mat-list-item>
        <mat-divider></mat-divider>
        } @empty {
        <mat-list-item role="listitem">
          <span class="console-app__list-value">No IP addresses on file.</span>
        </mat-list-item>
        }
        <mat-list-item role="listitem"></mat-list-item>
        <!-- IP Allowlist End -->

        <!-- SSL Certificate Start -->
        <mat-list-item role="listitem">
          <h2>SSL Certificate</h2>
        </mat-list-item>
        <mat-list-item role="listitem">
          <span class="console-app__list-value"
            >X.509 PEM certificate for EPP production access</span
          >
        </mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item role="listitem" lines="10">
          <span class="console-app__list-value">{{
            dataSource.clientCertificate || "No client certificate on file."
          }}</span>
        </mat-list-item>
        <mat-list-item role="listitem"> </mat-list-item>
        <!-- SSL Certificate End -->

        <!-- Failover SSL Certificate Start -->
        <mat-list-item role="listitem">
          <h2>Failover SSL Certificate</h2>
        </mat-list-item>
        <mat-list-item role="listitem">
          <span class="console-app__list-value"
            >X.509 PEM backup certificate for EPP production access</span
          >
        </mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item role="listitem" lines="10">
          <span class="console-app__list-value">{{
            dataSource.failoverClientCertificate ||
              "No failover certificate on file."
          }}</span>
        </mat-list-item>
        <!-- Failover SSL Certificate End -->
      </mat-list>
    </mat-card-content>
  </mat-card>
</div>
}