<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"
        endIcon="bwi-external-link"
      >
        {{ "learnMore" | i18n }}
      </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>
</form>
