<form [bitSubmit]="submit" [formGroup]="migrationPasswordForm">
  <bit-dialog>
    <div class="tw-font-semibold" bitDialogTitle>
      {{ "updateEncryptionSettingsTitle" | i18n }}
    </div>
    <div bitDialogContent>
      <p>
        {{ "updateEncryptionSettingsDesc" | i18n }}
        <a
          bitLink
          href="https://bitwarden.com/help/kdf-algorithms/"
          target="_blank"
          rel="noreferrer"
          aria-label="external link"
        >
          {{ "learnMore" | i18n }}
          <i class="bwi bwi-external-link" aria-hidden="true"></i>
        </a>
      </p>
      <bit-form-field>
        <bit-label>{{ "masterPass" | i18n }}</bit-label>
        <bit-hint>{{ "confirmIdentityToContinue" | i18n }}</bit-hint>
        <input
          class="tw-font-mono"
          bitInput
          type="password"
          formControlName="masterPassword"
          [attr.title]="'masterPass' | i18n"
        />
        <button
          type="button"
          bitIconButton
          bitSuffix
          bitPasswordInputToggle
          [attr.title]="'toggleVisibility' | i18n"
          [attr.aria-label]="'toggleVisibility' | i18n"
        ></button>
      </bit-form-field>
    </div>
    <ng-container bitDialogFooter>
      <button
        type="submit"
        bitButton
        bitFormButton
        buttonType="primary"
        [disabled]="migrationPasswordForm.invalid"
      >
        <span>{{ "updateSettings" | i18n }}</span>
      </button>
      <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
        {{ "later" | i18n }}
      </button>
    </ng-container>
  </bit-dialog>
</form>
