<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>
  </bit-dialog>
</form>
