<c8y-modal
  title="{{ 'Configure icon conditions' | translate }}"
  (onClose)="onClose($event)"
  (onDismiss)="onDismiss($event)"
  [labels]="labels"
  [disabled]="isAnyFormInvalid()"
  [headerClasses]="'dialog-header'"
>
  <ng-container c8y-modal-title>
    <span c8yIcon="c8y-circle-star"></span>
  </ng-container>
  <form class="p-24 p-t-0">
    @for (form of forms; track form; let i = $index) {
      <fieldset
        class="c8y-fieldset"
        [formGroup]="form"
      >
        <legend>
          {{ 'If condition' | translate }}
          @if (forms.length > 1) {
            <button
              class="btn-dot btn-dot--danger"
              title="{{ 'Remove condition' | translate }}"
              type="button"
              (click)="removeCondition(i)"
            >
              <i c8yIcon="minus-circle"></i>
            </button>
          }
        </legend>
        <!-- Data type selection -->
        <div class="row tight-grid">
          <div class="col-md-4 col-12">
            <label
              for="dataType-{{ i }}"
              translate
            >
              Data type
            </label>
            <c8y-select
              aria-label="{{ 'Data type select' | translate }}"
              id="dataType-{{ i }}"
              [items]="dataTypes"
              [placeholder]="'Select data type…' | translate"
              formControlName="dataType"
            ></c8y-select>
          </div>

          <!-- Comparison dropdown -->
          <div class="col-md-4 col-12">
            <label
              for="comparison-{{ i }}"
              translate
            >
              Comparison
            </label>
            <c8y-select
              aria-label="{{ 'Comparison select' | translate }}"
              id="comparison-{{ i }}"
              [items]="comparisonOptions[form.get('dataType')?.value?.value] || []"
              formControlName="comparison"
              [placeholder]="'Select comparison type…' | translate"
              labelProp="label"
              valueProp="value"
            ></c8y-select>
          </div>
          <!-- Value input based on type -->
          <div class="col-md-4 col-12">
            <label
              for="value-{{ i }}"
              translate
            >
              Value
            </label>
            @switch (form.get('dataType')?.value?.value) {
              @case ('number') {
                <input
                  class="form-control"
                  id="value-{{ i }}"
                  type="number"
                  formControlName="value"
                />
              }
              @case ('date') {
                <c8y-date-time-picker
                  aria-label="{{ 'Date and time picker' | translate }}"
                  placeholder="{{ 'Select date…' | translate }}"
                  formControlName="value"
                  size="sm"
                  (onDateSelected)="onDateSelected($event, i)"
                ></c8y-date-time-picker>
              }
              @case ('string') {
                <input
                  class="form-control"
                  id="value-{{ i }}"
                  type="text"
                  formControlName="value"
                />
              }
              @case ('boolean') {
                <c8y-select
                  aria-label="{{ 'Boolean select' | translate }}"
                  [items]="booleanOptions"
                  [placeholder]="'Select value…' | translate"
                  formControlName="value"
                  labelProp="label"
                  valueProp="value"
                ></c8y-select>
              }
            }
          </div>
        </div>
        <div class="d-flex gap-16 m-t-8 m-b-8">
          <!-- Icon field -->
          <div class="d-flex a-i-center">
            <label
              class="m-b-0 m-r-4"
              for="icon-{{ i }}"
              translate
            >
              Icon
            </label>
            <c8y-icon-selector-wrapper
              [selectedIcon]="form.get('icon')?.value || 'c8y-cockpit'"
              [iconSize]="24"
              (onSelect)="iconSelectionChange($event, i)"
            ></c8y-icon-selector-wrapper>
          </div>

          <!-- Color field -->
          <div class="d-flex a-i-center m-l-8">
            <label
              class="m-b-0 m-r-4 text-nowrap"
              for="color-{{ i }}"
              translate
            >
              Icon color
            </label>
            <input
              class="form-control"
              style="width: 100%; min-width: 40px"
              id="color-{{ i }}"
              type="color"
              formControlName="color"
            />
          </div>
        </div>
      </fieldset>
    }
    <button
      class="btn btn-default m-t-16"
      title="{{ 'Add condition' | translate }}"
      type="button"
      (click)="addCondition()"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Add condition' | translate }}
    </button>
  </form>
</c8y-modal>