<ion-content>
  <ion-searchbar style="--background: var(--ion-color-searchbar-background); color:var(--ion-color-searchbar-text);"
  (ionChange)="updateFilter($event.detail.value)"></ion-searchbar>

  <ion-list>
    @for (entry of list; track entry) {
      <ion-item-group>
        @if (entry.filteredComponents.length>= 1) {
          <ion-item 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>
      @for (item of entry.filteredComponents; track item) {
        <ion-item lines="none" [routerLink]=item.id>
          <ion-label style="cursor: pointer" class="ion-text-wrap">
            <ion-text color="primary">
              <h3>{{ item.alias }}
                @if (item.id !== item.alias) {
                  <span> ({{ item.id }})</span>
                }
                @if (!item.isEnabled) {
                  <small> (<span translate>GENERAL.COMPONENT_INACTIVE</span>)</small>
                }
              </h3>
            </ion-text>
            @if (config.factories[item.factoryId]; as factory) {
              <p class="custom-channels-text">{{ factory.name }} <small>({{ factory.description }})</small></p>
            }
          </ion-label>
        </ion-item>
      }
    }
  </ion-list>
</ion-content>
