<div class="option" [class.mobile]="breakpoint() == 'mobile'">
  <ng-template [(tuiDialog)]="changeEmailDialogOpen"
               [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changeEmailDialog.'+ (changeEmailRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.emailSet ? 'label' : 'labelSet'))|translate}">
    <p>{{ "chat.userSettingsDialog.security.changeEmailDialog.warn"|translate }}</p>
    @if (step() == 0) {
      <form [formGroup]="changeEmailForm" style="display: flex; flex-direction: column; gap: 10px">
        @if (!changeEmailRemoveMode()) {
          <tui-textfield iconStart="@tui.mail">
            <label
              tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.newMail"|translate }}</label>
            <input formControlName="newAddress" tuiInput type="email">
          </tui-textfield>
        }

        <tui-textfield iconStart="@tui.key">
          <label tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.currentPassword"|translate }}</label>
          <input formControlName="currentPassword" tuiInput type="password">
        </tui-textfield>

        @if (changeEmailForm.controls['currentPassword'].dirty) {
          @if (changeEmailForm.controls['currentPassword'].hasError("required")) {
            <tui-error
              [error]="'chat.userSettingsDialog.security.changeEmailDialog.errors.currentPasswordRequired'|translate"></tui-error>
          }

          @if (changeEmailForm.controls['currentPassword'].hasError("incorrect")) {
            <tui-error
              [error]="'chat.userSettingsDialog.security.changeEmailDialog.errors.incorrectPassword'|translate"></tui-error>
          }
        }
      </form>

      <footer>
        <button tuiButton iconStart="@tui.check" [loading]="changeEmailPending()"
                [disabled]="changeEmailPending()"
                (click)="changeEmail(changeEmailForm.controls['currentPassword'].value, changeEmailForm.controls['newAddress'].value)">
          {{ ('chat.userSettingsDialog.security.changeEmailDialog.' + (changeEmailRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
        </button>
      </footer>
    } @else {
      <form style="display: flex; flex-direction: column; gap: 10px" [formGroup]="verifyEmailForm">
        @if (serviceManager.currentSession()!.userData.emailSet) {
          <tui-textfield iconStart="@tui.mail">
            <label tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.oldCode"|translate }}</label>
            <input tuiInput type="number" [step]="1" formControlName="oldCode">
          </tui-textfield>
        }

        @if (!changeEmailRemoveMode()) {
          <tui-textfield iconStart="@tui.badge-plus">
            <label tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.newCode"|translate }}</label>
            <input tuiInput type="number" [step]="1" formControlName="newCode">
          </tui-textfield>
        }
      </form>

      <footer>
        <button tuiButton iconStart="@tui.check" [loading]="verifyEmailPending()"
                [disabled]="verifyEmailForm.invalid || verifyEmailPending()"
                (click)="verifyEmail(verifyEmailForm.controls['newCode'].value, verifyEmailForm.controls['oldCode'].value)">
          {{ ('chat.userSettingsDialog.security.changeEmailDialog.' + (changeEmailRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
        </button>
      </footer>
    }
  </ng-template>

  <header>
    <tui-icon icon="@tui.mail"/>
    <span>{{ "chat.userSettingsDialog.security.email"|translate }}</span>

    @if (serviceManager.currentSession()!.userData.emailSet) {
      <div tuiBadge appearance="positive"
           iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
      </div>
    } @else {
      <div tuiBadge appearance="negative"
           iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
      </div>
    }
  </header>

  <main>
    <button tuiButton appearance="outline" (click)="openChangeEmailDialog(false)"
            [iconStart]="serviceManager.currentSession()!.userData.emailSet ? '@tui.pencil' : '@tui.plus'">
      @if (serviceManager.currentSession()!.userData.phoneSet) {
        {{ "chat.userSettingsDialog.security.changeMail"|translate }}
      } @else {
        {{ "chat.userSettingsDialog.security.setMail"|translate }}
      }
    </button>

    @if (serviceManager.currentSession()!.userData.emailSet) {
      <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x" [disabled]="!serviceManager.currentSession()!.userData.phoneSet && !serviceManager.currentSession()!.userData.phoneSet"
              (click)="openChangeEmailDialog(true)"
              style="color: var(--tui-text-negative)">
        {{ "chat.userSettingsDialog.security.removeMail"|translate }}
      </button>
    }
  </main>
</div>
