@if (projectFormOptionsGroup.errors?.selectionRequired) {
  <p class="error alert-form-error">
    Please select events or uptime monitor triggers for your alert.
  </p>
}

<form
  class="flex-common"
  (ngSubmit)="onSubmit()"
  [formGroup]="projectAlertForm"
>
  <div>
    <mat-checkbox
      data-cy="error-check"
      [checked]="projectFormErrorAlert.value"
      (change)="toggleErrorAlerts()"
    >
      <span class="body-text" i18n>
        If an
        <span
          class="tooltip"
          matTooltip="An event is every occurrence of the same error (aka: issue) in your application."
          >event</span
        >
        happens</span
      >
    </mat-checkbox>
    <mat-form-field floatLabel="always" appearance="outline">
      <mat-label>Quantity</mat-label>
      <input
        matInput
        data-cy="quantity"
        min="0"
        max="10000"
        type="number"
        autocomplete="off"
        (click)="toggleFromInput()"
        formControlName="quantity"
        placeholder="#"
        [errorStateMatcher]="newAlert() ? newFormMatcher : matcher"
      />
      @if (projectFormQuantity.errors) {
        <mat-error>
          <span>Enter an integer greater than 0.</span>
        </mat-error>
      }
    </mat-form-field>
    <span i18n
      >{{ projectFormQuantity.value | i18nPlural: timesI18nMapping }} in</span
    >
    <mat-form-field floatLabel="always" appearance="outline">
      <mat-label i18n>Timespan</mat-label>
      <input
        matInput
        min="0"
        max="10000"
        type="number"
        autocomplete="off"
        (click)="toggleFromInput()"
        formControlName="timespanMinutes"
        placeholder="#"
        [errorStateMatcher]="newAlert() ? newFormMatcher : matcher"
      />
      @if (projectFormTimespan.errors) {
        <mat-error>
          <span i18n>Enter an integer greater than 0.</span>
        </mat-error>
      }
    </mat-form-field>
    <span i18n
      >{{ projectFormTimespan.value | i18nPlural: minutesI18nMapping }}, send
      an alert.</span
    >
    <div class="uptime-option" formGroupName="optionsGroup">
      <mat-checkbox data-cy="uptime-check" formControlName="uptime"
        ><span class="body-text" i18n
          >If an uptime monitor is triggered.</span
        ></mat-checkbox
      >
    </div>
  </div>
  <div class="update" data-cy="update-container">
    @if (!newAlert()) {
      <gt-loading-button
        data-cy="update-button"
        buttonText="Update"
        [disabled]="
          projectFormTimespan.value === timespan() &&
          projectFormQuantity.value === quantity() &&
          projectFormUptime.value === uptime()
        "
        buttonStyle="stroked"
        [loading]="loading() === true"
      ></gt-loading-button>
    }
  </div>
</form>