<div class="sky-padding-even-lg">
  <form [formGroup]="formGroup">
    <sky-date-range-picker
      formControlName="lastDonation"
      [calculatorIds]="customCalculators"
      [helpPopoverContent]="inlineHelpPopover"
      [hintText]="hintText"
      [labelText]="labelText"
    >
      @if (
        lastDonation.errors?.['skyDateRange']?.errors?.['dateIsAfterToday']
      ) {
        <sky-form-error
          errorName="dateIsAfterToday"
          errorText="Enter a date before today."
        />
      }
    </sky-date-range-picker>
  </form>
  <p>
    Selected calculator: {{ selectedCalculator()?.shortDescription$ | async }}
  </p>
</div>

<ng-template #inlineHelpPopover>
  By default, donations include one-time gifts, pledges, and matching gifts. To
  customize, see <a>Giving settings</a>.
</ng-template>
