<form [formGroup]="formGroup" [bitSubmit]="submit" bit-dialog>
  <span bitDialogTitle class="tw-font-medium">
    {{ "helpUsImprove" | i18n }}
  </span>
  <div bitDialogContent>
    @if (isBusiness) {
      <bit-radio-group formControlName="reason" [block]="true">
        @for (reason of businessReasons; track reason.value) {
          <bit-radio-button [value]="reason.value">
            <bit-label>{{ reason.labelKey | i18n }}</bit-label>
            @if (reason.hintKey) {
              <bit-hint>{{ reason.hintKey | i18n }}</bit-hint>
            }
          </bit-radio-button>
        }
      </bit-radio-group>
      @if (annualUpgradeOffer(); as offer) {
        @if (reason() === annualOfferReasonValue) {
          <div data-testid="annual-upgrade-offer" class="tw-mt-3">
            <bit-callout
              type="info"
              [icon]="null"
              [title]="'switchToAnnualAndSave' | i18n: formatCurrency(offer.savings)"
            >
              <div>
                <div class="tw-flex tw-mb-1">
                  <span class="tw-text-muted tw-min-w-52">{{
                    "currentCostMonthlyBilling" | i18n
                  }}</span>
                  <span class="tw-font-medium">{{ formatCurrency(offer.currentAnnualCost) }}</span>
                </div>
                <div class="tw-flex">
                  <span class="tw-text-muted tw-min-w-52">{{ "annualBillingCost" | i18n }}</span>
                  <span class="tw-font-medium">{{ formatCurrency(offer.newAnnualCost) }}</span>
                </div>
              </div>
              <p class="tw-text-muted tw-text-xs tw-mt-2">{{ "annualSwitchDisclaimer" | i18n }}</p>
              @if (annualUpgradeRedeemError()) {
                <p class="tw-text-danger">{{ annualUpgradeRedeemError() }}</p>
              }
              <button
                type="button"
                bitButton
                bitFormButton
                buttonType="primary"
                [bitAction]="switchToAnnualBilling"
                [loading]="annualUpgradeRedeemLoading()"
                [disabled]="cancellationLoading()"
              >
                {{ "switchToAnnualBilling" | i18n }}
              </button>
            </bit-callout>
          </div>
        }
      }
    } @else {
      <bit-form-field>
        <bit-label>
          {{ "selectCancellationReason" | i18n }}
        </bit-label>
        <select bitInput formControlName="reason">
          <option *ngFor="let reason of reasons" [ngValue]="reason.value">
            {{ reason.text }}
          </option>
        </select>
      </bit-form-field>
    }
    @if (isOtherReason()) {
      <bit-form-field class="-tw-mt-1">
        <input
          bitInput
          formControlName="otherFeedback"
          [placeholder]="'cancelSurveyOtherPlaceholder' | i18n"
        />
      </bit-form-field>
    }
    <bit-form-field>
      <bit-label>
        {{ "additionalDetails" | i18n }}
      </bit-label>
      <textarea rows="3" bitInput formControlName="feedback"></textarea>
    </bit-form-field>
  </div>
  <ng-container bitDialogFooter>
    <button
      bitButton
      bitFormButton
      buttonType="primary"
      type="submit"
      [disabled]="!reason() || annualUpgradeRedeemLoading()"
    >
      {{ "completeCancellation" | i18n }}
    </button>
    <button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Closed">
      {{ "close" | i18n }}
    </button>
  </ng-container>
</form>
