<ng-container *transloco="let t; prefix:'manage-smart-filters'">
  <form [formGroup]="listForm">
    @if (hasFilterControl()) {
      <div class="row g-1 mb-3">
        <div class="col-md-3">
          <label for="entity-type" class="form-label">{{t('entity-type-label')}}</label>
          <select class="col-auto form-select" id="entity-type" formControlName="entityType">
            @for(entityType of allFilterEntityTypes; track entityType) {
              <option [value]="entityType">{{entityType | filterEntityType}}</option>
            }
          </select>
        </div>

        <div class="col-md-9">
          <label for="filter" class="form-label">{{t('filter')}}</label>
          <div class="input-group">
            <input id="filter" autocomplete="off" class="form-control" formControlName="filterQuery" type="text" aria-describedby="reset-input">
            <button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="resetFilter()">{{t('clear')}}</button>
          </div>
        </div>
      </div>
    }
  </form>

  <ul>
    @for(stream of filteredItems(); track stream.id) {

      @if (isErrored(stream)) {
        <li class="list-group-item d-block mb-3">
          <app-card-actionables
            [entity]="stream"
            [actions]="actions()"
            (actionHandler)="handleActionCallback($event)"
          />
          <i class="fa-solid fa-triangle-exclamation red me-2">
            <span class="visually-hidden">{{t('errored')}}</span>
          </i>
          {{stream.name}} - {{t('errored')}}
        </li>
      } @else {
        @if(filterApiMap()[stream.id] | async; as data) {

          <app-carousel-reel [items]="data" [title]="stream.name" [titleLink]="getFilterLink(stream)"
                             [actionables]="actions()" [actionableEntity]="stream" (actionHandler)="handleActionCallback($event)"
                             [alwaysShow]="true"
          >
            <ng-template #carouselItem let-item let-idx>
              @switch (stream.entityType) {
                @case (FilterEntityType.Series) {
                  <app-series-card [series]="item" />
                }
                @case (FilterEntityType.ReadingList) {
                  <app-entity-card [entity]="item" [index]="idx" [maxIndex]="data.length" [config]="readingListConfig()">
                    <ng-template #title let-entity>
                      <app-promoted-icon [promoted]="entity.data.promoted" /> {{entity.data.title}}
                    </ng-template>
                  </app-entity-card>
                }
                @default {
                  Not Implemented!
                }
              }

            </ng-template>
            <ng-template #noData>
              {{t('no-content')}}
            </ng-template>
          </app-carousel-reel>
        }
      }
    } @empty {
      <li class="list-group-item">
        {{t('no-data')}}
      </li>
    }
  </ul>
</ng-container>
