<form
  [formGroup]="domainForm"
  [bitSubmit]="data.orgDomain ? verifyDomain : saveDomain"
  bit-dialog
  [dialogSize]="'default'"
>
  <span bitDialogTitle>
    <span *ngIf="!data.orgDomain">{{
      (btnTextAddCreateFeatureFlag() ? "addDomain" : "newDomain") | i18n
    }}</span>
    <span *ngIf="data.orgDomain">
      {{ "claimDomain" | i18n }}
    </span>

    <span *ngIf="data?.orgDomain && !data.orgDomain?.verifiedDate" bitBadge variant="warning">
      {{ "domainStatusPending" | i18n }}
    </span>
    <span *ngIf="data?.orgDomain && data?.orgDomain?.verifiedDate" bitBadge variant="success">
      {{ "domainStatusClaimed" | i18n }}
    </span>
  </span>
  <div bitDialogContent>
    <div *ngIf="data?.orgDomain && !data?.orgDomain?.verifiedDate" class="tw-space-y-2 tw-pb-4">
      <p bitTypography="body1">{{ "automaticDomainClaimProcess1" | i18n }}</p>
      <p bitTypography="body1">
        {{ "automaticDomainClaimProcess2" | i18n }}
        <a
          bitLink
          target="_blank"
          rel="noreferrer"
          href="https://bitwarden.com/help/claimed-accounts/"
          class="tw-inline-flex tw-items-center tw-gap-1"
          endIcon="bwi-external-link"
        >
          {{ "accountOwnershipChange" | i18n }}
        </a>
        {{ "automaticDomainClaimProcessEnd" | i18n }}
      </p>
    </div>
    <bit-form-field>
      <bit-label>{{ "domainName" | i18n }}</bit-label>
      <input bitInput appAutofocus formControlName="domainName" [readonly]="domainNameReadonly" />
    </bit-form-field>

    <bit-form-field *ngIf="data?.orgDomain">
      <bit-label>{{ "dnsTxtRecord" | i18n }}</bit-label>
      <input bitInput formControlName="txt" readonly />
      <bit-hint>{{ "dnsTxtRecordInputHint" | i18n }}</bit-hint>
      <button
        type="button"
        bitSuffix
        bitIconButton="bwi-clone"
        label="{{ 'copyDnsTxtRecord' | i18n }}"
        (click)="copyDnsTxt()"
      ></button>
    </bit-form-field>
  </div>
  <ng-container bitDialogFooter>
    <button type="submit" bitButton bitFormButton buttonType="primary">
      <span *ngIf="!data?.orgDomain">{{ "next" | i18n }}</span>
      <span *ngIf="data?.orgDomain && !data?.orgDomain?.verifiedDate">{{
        "claimDomain" | i18n
      }}</span>
      <span *ngIf="data?.orgDomain?.verifiedDate">{{ "reclaimDomain" | i18n }}</span>
    </button>
    <button bitButton buttonType="secondary" (click)="dialogRef.close()" type="button">
      {{ "cancel" | i18n }}
    </button>

    <button
      *ngIf="data.orgDomain"
      class="tw-ml-auto"
      bitIconButton="bwi-trash"
      buttonType="dangerGhost"
      size="default"
      label="{{ 'delete' | i18n }}"
      [bitAction]="deleteDomain"
      type="submit"
      bitFormButton
    ></button>
  </ng-container>
</form>
