<div class="option">
  <ng-template [(tuiDialog)]="changePasswordDialogOpen"
               [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changePasswordDialog.'+ (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate}">
    <form [formGroup]="changeEmailForm" style="display: flex; flex-direction: column; gap: 10px">
      @if (serviceManager.currentSession()!.userData.passwordSet) {
        <tui-textfield iconStart="@tui.key">
          <label
            tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.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.changePasswordDialog.errors.currentPasswordRequired'|translate"></tui-error>
          }

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

      @if (!changePasswordRemoveMode()) {
        <tui-textfield iconStart="@tui.badge-plus">
          <label tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.newPassword"|translate }}</label>
          <input formControlName="newPassword" tuiInput type="password">
        </tui-textfield>

        <tui-textfield iconStart="@tui.badge-plus">
          <label
            tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.newPasswordRepeat"|translate }}</label>
          <input formControlName="newPasswordRepeat" tuiInput type="password">
        </tui-textfield>
      }
    </form>

    <footer>
      <button tuiButton iconStart="@tui.check" [loading]="changePasswordPending()"
              [disabled]="changeEmailForm.invalid || changePasswordPending()"
              (click)="changePassword(changeEmailForm.controls['currentPassword'].value, changeEmailForm.controls['newPassword'].value)">
        {{ ('chat.userSettingsDialog.security.changePasswordDialog.' + (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
      </button>
    </footer>
  </ng-template>

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

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

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