<form bit-dialog>
  <span bitDialogTitle>{{ "addSponsorship" | i18n }}</span>

  <div bitDialogContent>
    <form [formGroup]="sponsorshipForm">
      <div class="tw-grid tw-grid-cols-12 tw-gap-4">
        <div class="tw-col-span-12">
          <bit-form-field>
            <bit-label>{{ "email" | i18n }}</bit-label>
            <input
              bitInput
              inputmode="email"
              formControlName="sponsorshipEmail"
              [attr.aria-invalid]="sponsorshipEmailControl.invalid"
              appInputStripSpaces
            />
          </bit-form-field>
        </div>
        <div class="tw-col-span-12">
          <bit-form-field>
            <bit-label>{{ "notes" | i18n }}</bit-label>
            <input
              bitInput
              inputmode="text"
              formControlName="sponsorshipNote"
              [attr.aria-invalid]="sponsorshipNoteControl.invalid"
            />
          </bit-form-field>
        </div>
      </div>
    </form>
  </div>

  <ng-container bitDialogFooter>
    <button
      bitButton
      bitFormButton
      type="button"
      buttonType="primary"
      [loading]="loading"
      [disabled]="loading"
      (click)="save()"
    >
      {{ "save" | i18n }}
    </button>
    <button bitButton type="button" buttonType="secondary" [bitDialogClose]="false">
      {{ "cancel" | i18n }}
    </button>
  </ng-container>
</form>
