@if (hasContainer) {
  <w-panel>
    <ng-container *ngTemplateOutlet="cronComponent"></ng-container>
  </w-panel>
} @else {
  <form [formGroup]="formGroup" class="col-12">
    <w-panel-grid class="col-12">
      <w-edit-select class="col-12"
        [label]="translationsObject.periodicityLabel"
        [required]="true"
        [options]="periodicities"
        [optionValue]="'value'"
        [optionLabel]="'name'"
        [formControl]="formControlService.convertToFormControl(formGroup.get('periodicity'))"
        (onChange)="onPeriodicitySelected()">
      </w-edit-select>
      @if (allowMonths()) {
        <w-edit-multiselect
          class="col-12"
          [label]="translationsObject.monthsLabel"
          [required]="true"
          [options]="months"
          [optionValue]="'value'"
          [optionLabel]="'name'"
          [formControl]="formControlService.convertToFormControl(formGroup.get('months'))"
          (onChange)="onMonthsSelected($event)">
        </w-edit-multiselect>
      }
      @if (allowMonthDays()) {
        <w-edit-multiselect
          class="col-12"
          [label]="translationsObject.daysLabel"
          [required]="isMonthDaysRequired()"
          [options]="monthDays"
          [optionValue]="'value'"
          [optionLabel]="'value'"
          [formControl]="formControlService.convertToFormControl(formGroup.get('monthDays'))"
          (onChange)="onMonthDaysSelected($event)">
        </w-edit-multiselect>
      }
      @if (allowMonthDay()) {
        <w-edit-select
          class="col-12"
          [label]="translationsObject.daysLabel"
          [required]="true"
          [options]="monthDays"
          [optionValue]="'value'"
          [optionLabel]="'value'"
          [formControl]="formControlService.convertToFormControl(formGroup.get('monthDay'))"
          (onChange)="onMonthDaysSelected($event)">
        </w-edit-select>
      }
      @if (allowWeekDays()) {
        <w-edit-multiselect
          class="col-12"
          [label]="translationsObject.weekDaysLabel"
          [required]="true"
          [options]="weekDays"
          [optionValue]="'value'"
          [optionLabel]="'name'"
          [formControl]="formControlService.convertToFormControl(formGroup.get('weekDays'))"
          (onChange)="onWeekDaysSelected($event)">
        </w-edit-multiselect>
      }
      @if (allowHours()) {
        <w-edit-select
          class="col-6"
          [label]="translationsObject.hourLabel"
          [required]="true"
          [options]="hours"
          [formControl]="formControlService.convertToFormControl(formGroup.get('hours'))"
          (onChange)="onHoursSelected($event)">
        </w-edit-select>
      }
      @if (allowMinutes()) {
        <w-edit-select
          [ngClass]="{'col-6': allowHours(), 'col-12': !allowHours()}"
          [label]="translationsObject.minuteLabel"
          [required]="true"
          [options]="minutes"
          [formControl]="formControlService.convertToFormControl(formGroup.get('minutes'))"
          (onChange)="onMinuteSelected($event)">
        </w-edit-select>
      }
      @if (allowSeconds()) {
        <w-edit-input-number
          class="col-6"
          [label]="'Segundos'"
          [required]="true"
          [min]="0"
          [max]="59">
        </w-edit-input-number>
      }
      <w-view-text class="col-12"
        [label]="translationsObject.descriptionLabel"
        [value]="description"
        [layout]="'vertical'">
      </w-view-text>
      <w-view-text class="col-12"
        [label]="translationsObject.occurrencesLabel"
        [value]="occurrences"
        [layout]="'vertical'">
      </w-view-text>
    </w-panel-grid>
  </form>
}

<ng-template #cronComponent>
  <form [formGroup]="formGroup" class="col-12">
    <w-panel-grid class="col-12">
      <w-edit-select class="col-12"
        [label]="translationsObject.periodicityLabel"
        [required]="true"
        [options]="periodicities"
        [optionValue]="'value'"
        [optionLabel]="'name'"
        [formControl]="formControlService.convertToFormControl(formGroup.get('periodicity'))"
        (onChange)="onPeriodicitySelected()">
      </w-edit-select>
      @if (allowMonths()) {
        <w-edit-multiselect
          class="col-12"
          [label]="translationsObject.monthsLabel"
          [required]="true"
          [options]="months"
          [optionValue]="'value'"
          [optionLabel]="'name'"
          [formControl]="formControlService.convertToFormControl(formGroup.get('months'))"
          (onChange)="onMonthsSelected($event)">
        </w-edit-multiselect>
      }
      @if (allowMonthDays()) {
        <w-edit-multiselect
          class="col-12"
          [label]="translationsObject.daysLabel"
          [required]="isMonthDaysRequired()"
          [options]="monthDays"
          [optionValue]="'value'"
          [optionLabel]="'value'"
          [formControl]="formControlService.convertToFormControl(formGroup.get('monthDays'))"
          (onChange)="onMonthDaysSelected($event)">
        </w-edit-multiselect>
      }
      @if (allowMonthDay()) {
        <w-edit-select
          class="col-12"
          [label]="translationsObject.daysLabel"
          [required]="true"
          [options]="monthDays"
          [optionValue]="'value'"
          [optionLabel]="'value'"
          [formControl]="formControlService.convertToFormControl(formGroup.get('monthDay'))"
          (onChange)="onMonthDaysSelected($event)">
        </w-edit-select>
      }
      @if (allowWeekDays()) {
        <w-edit-multiselect
          class="col-12"
          [label]="translationsObject.weekDaysLabel"
          [required]="true"
          [options]="weekDays"
          [optionValue]="'value'"
          [optionLabel]="'name'"
          [formControl]="formControlService.convertToFormControl(formGroup.get('weekDays'))"
          (onChange)="onWeekDaysSelected($event)">
        </w-edit-multiselect>
      }
      @if (allowHours()) {
        <w-edit-select
          class="col-6"
          [label]="translationsObject.hourLabel"
          [required]="true"
          [options]="hours"
          [formControl]="formControlService.convertToFormControl(formGroup.get('hours'))"
          (onChange)="onHoursSelected($event)">
        </w-edit-select>
      }
      @if (allowMinutes()) {
        <w-edit-select
          [ngClass]="{'col-6': allowHours(), 'col-12': !allowHours()}"
          [label]="translationsObject.minuteLabel"
          [required]="true"
          [options]="minutes"
          [formControl]="formControlService.convertToFormControl(formGroup.get('minutes'))"
          (onChange)="onMinuteSelected($event)">
        </w-edit-select>
      }
      @if (allowSeconds()) {
        <w-edit-input-number
          class="col-6"
          [label]="'Segundos'"
          [required]="true"
          [min]="0"
          [max]="59">
        </w-edit-input-number>
      }
      <w-view-text class="col-12"
        [label]="translationsObject.descriptionLabel"
        [value]="description"
        [layout]="'vertical'">
      </w-view-text>
      <w-view-text class="col-12"
        [label]="translationsObject.occurrencesLabel"
        [value]="occurrences"
        [layout]="'vertical'">
      </w-view-text>
    </w-panel-grid>
  </form>
</ng-template>