<ion-content>
  <ion-searchbar style="--background: var(--ion-color-searchbar-background); color:var(--ion-color-searchbar-text);"
  (ionInput)="updateFilter($event.detail.value)"></ion-searchbar>
  <ion-list>
    @for (entry of list; track entry) {
      <ion-item-group>
        @if (entry.filteredFactories.length>= 1) {
          <ion-item style="cursor: pointer" (click)="entry.isClicked = !entry.isClicked" lines="inset"
            >
            <ion-icon name="{{entry.category.icon}}"></ion-icon>
            <ion-label class="ion-padding-start">
              {{ entry.category.title }}
            </ion-label>
          </ion-item>
        }
      </ion-item-group>
      @if ((entry.isClicked || showAllFactories)) {
        @for (item of entry.filteredFactories; track item) {
          <ion-item lines="none" [routerLink]=[item.id]>
            <ion-label style="cursor: pointer" class="ion-text-wrap">
              <ion-text color="primary">
                <h3>{{ item.name }}</h3>
              </ion-text>
              <small class="custom-channels-text">{{ item.description }}</small>
            </ion-label>
          </ion-item>
        }
      }
    }
  </ion-list>
</ion-content>
