<div class="option" [class.mobile]="breakpoint() == 'mobile'">
  <ng-template [(tuiDialog)]="changePhoneDialogOpen"
               [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changePhoneDialog.'+ (changePhoneRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.phoneSet ? 'label' : 'labelSet'))|translate}">
    <p>{{ "chat.userSettingsDialog.security.changePhoneDialog.warn"|translate }}</p>
    @if (step() == 0) {
      <form [formGroup]="changePhoneForm" style="display: flex; flex-direction: column; gap: 10px">
        @if (!changePhoneRemoveMode()) {
          <tui-textfield>
            <label
              tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.newPhone"|translate }}</label>
            <input formControlName="newNumber" tuiInputPhoneInternational [countrySearch]="true" [countries]="countries | tuiSortCountries" [(countryIsoCode)]="countryIsoCode">
          </tui-textfield>
        }

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

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

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

      <footer>
        <button tuiButton iconStart="@tui.check" [loading]="changePhonePending()"
                [disabled]="changePhonePending()"
                (click)="changePhone(changePhoneForm.controls['currentPassword'].value, changePhoneForm.controls['newNumber'].value)">
          {{ ('chat.userSettingsDialog.security.changePhoneDialog.' + (changePhoneRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
        </button>
      </footer>
    } @else {
      <form style="display: flex; flex-direction: column; gap: 10px" [formGroup]="verifyPhoneForm">
        @if (serviceManager.currentSession()!.userData.phoneSet) {
          <tui-textfield iconStart="@tui.phone">
            <label tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.oldCode"|translate }}</label>
            <input tuiInput type="number" [step]="1" formControlName="oldCode">
          </tui-textfield>
        }

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

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

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

    @if (serviceManager.currentSession()!.userData.phoneSet) {
      <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)="openChangePhoneDialog(false)"
            [iconStart]="serviceManager.currentSession()!.userData.phoneSet ? '@tui.pencil' : '@tui.plus'">
      @if (serviceManager.currentSession()!.userData.phoneSet) {
        {{ "chat.userSettingsDialog.security.changePhone"|translate }}
      } @else {
        {{ "chat.userSettingsDialog.security.setPhone"|translate }}
      }
    </button>

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