<c8y-li
  class="c8y-list__item--no-expand c8y-list__item--sticky-top c8y-list__item--dense full-w-collapse"
  [collapsed]="!section.expanded"
  #li
>
  <div class="d-flex p-r-16 fit-w">
    <button
      class="btn-clean flex-no-shrink p-r-8 flex-grow"
      type="button"
      [attr.data-cy]="section.label"
      (click)="li.collapsed = !li.collapsed"
    >
      <i
        class="p-r-4"
        [c8yIcon]="li.collapsed ? 'chevron-right' : 'chevron-down'"
      ></i>
      <span class="text-medium">
        {{ section.label | translate }}
      </span>
    </button>
    <ng-container *ngTemplateOutlet="feedbackTemplate"></ng-container>
    @for (error of section.validationErrors | keyvalue; track error.key) {
      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {
        <button
          class="btn-clean"
          [tooltip]="error.value | translate"
          type="button"
          [delay]="500"
        >
          <i
            class="status major"
            [c8yIcon]="'warning'"
          ></i>
        </button>
      }
    }
  </div>
  <c8y-list-item-collapse>
    @for (error of section.validationErrors | keyvalue; track error.key) {
      @if (parentForm.form?.errors?.[error.key] && customValidatorsTouched()) {
        <div
          class="alert alert-warning m-t-8"
          role="alert"
        >
          {{ error.value | translate }}
        </div>
      }
    }
    <ng-container
      *c8yComponentOutlet="
        section.component;
        initialState: section.initialState;
        environmentInjector: section.injector
      "
    ></ng-container>
  </c8y-list-item-collapse>
</c8y-li>