<form
  (submit)="$event.preventDefault(); save()"
  class="dialog-help-wrapper"
>
  <h1 mat-dialog-title>
    <mat-icon>repeat</mat-icon>
    {{
      isEdit()
        ? (T.F.TASK_REPEAT.D_EDIT.EDIT | translate)
        : (T.F.TASK_REPEAT.D_EDIT.ADD | translate)
    }}
  </h1>

  <mat-dialog-content>
    @if (repeatCfgId(); as cfgId) {
      <collapsible
        [title]="T.F.TASK_REPEAT.D_EDIT.HEATMAP_LABEL | translate"
        icon="bar_chart"
        (isExpandedChange)="isHeatmapExpanded = $event"
      >
        @if (isHeatmapExpanded) {
          <repeat-task-heatmap [repeatCfgId]="cfgId" />
        }
      </collapsible>
    }

    <div class="form-wrapper">
      <div class="planned-start-date-field-wrapper">
        <button
          type="button"
          mat-stroked-button
          class="planned-start-date-btn"
          (click)="openScheduleDialog()"
        >
          <span class="planned-start-date-btn-content">
            <mat-icon>today</mat-icon>
            <span class="planned-date-label">
              {{ T.F.TASK_REPEAT.F.START_DATE | translate }}:
            </span>
            <span class="planned-date-val">{{ plannedStartDateStr() }}</span>
            @if (repeatCfg().remindAt && repeatCfg().remindAt !== 'DoNotRemind') {
              <mat-icon class="reminder-badge">alarm</mat-icon>
            }
          </span>
        </button>
      </div>

      <formly-form
        (modelChange)="repeatCfg.set($event)"
        [form]="formGroup1()"
        [fields]="essentialFormFields()"
        [model]="repeatCfg()"
      ></formly-form>

      @if (isWeekdaySelectionInvalid()) {
        <div
          id="weekday-error"
          class="weekday-error"
          role="alert"
        >
          {{ T.F.TASK_REPEAT.F.WEEKDAY_REQUIRED | translate }}
        </div>
      }

      <collapsible [title]="T.F.TASK_REPEAT.D_EDIT.ADVANCED_CFG | translate">
        <chip-list-input
          (addItem)="addTag($event)"
          (addNewItem)="addNewTag($event)"
          (removeItem)="removeTag($event)"
          [label]="T.F.TASK_REPEAT.D_EDIT.TAG_LABEL | translate"
          [model]="repeatCfg().tagIds"
          [suggestions]="tagSuggestions()"
        ></chip-list-input>

        <formly-form
          (modelChange)="repeatCfg.set($event)"
          [form]="formGroup2()"
          [fields]="advancedFormFields()"
          [model]="repeatCfg()"
        ></formly-form>
      </collapsible>
    </div>
  </mat-dialog-content>

  <mat-dialog-actions align="end">
    <button
      (click)="close()"
      [attr.aria-label]="T.G.CANCEL | translate"
      class="icon-on-small"
      mat-button
      type="button"
    >
      <mat-icon class="show-on-small">close</mat-icon>
      <span class="hide-on-small">{{ T.G.CANCEL | translate }}</span>
    </button>

    @if (isEdit()) {
      @if (canRemoveInstance()) {
        <button
          (click)="deleteInstance()"
          [attr.aria-label]="skipInstanceButtonText()"
          class="icon-on-small"
          color="primary"
          mat-stroked-button
          type="button"
        >
          <mat-icon>event_busy</mat-icon>
          <span class="hide-on-small">{{ skipInstanceButtonText() }}</span>
        </button>
      }
      <button
        (click)="remove()"
        [attr.aria-label]="T.G.REMOVE | translate"
        class="icon-on-small"
        color="warn"
        mat-stroked-button
        type="button"
      >
        <mat-icon>delete_forever</mat-icon>
        <span class="hide-on-small">{{ T.G.REMOVE | translate }}</span>
      </button>
    }

    <button
      [disabled]="
        !formGroup1().valid ||
        !formGroup2().valid ||
        isLoading() ||
        isWeekdaySelectionInvalid()
      "
      [attr.aria-label]="T.G.SAVE | translate"
      [attr.aria-describedby]="isWeekdaySelectionInvalid() ? 'weekday-error' : null"
      class="icon-on-small"
      color="primary"
      mat-flat-button
      type="submit"
    >
      <mat-icon>save</mat-icon>
      <span class="hide-on-small">{{ T.G.SAVE | translate }}</span>
    </button>
  </mat-dialog-actions>
</form>
