<ng-container *transloco="let t; prefix: 'customize-sidenav-streams'">
  <form [formGroup]="listForm">
    <app-bulk-operations />

    @if (items.length > 3) {
      <div class="row g-0 mb-2">
        <label for="sidenav-stream-filter" class="form-label">{{t('filter')}}</label>
        <div class="input-group">
          <input id="sidenav-stream-filter" autocomplete="off" class="form-control" formControlName="filterSideNavStream" type="text" aria-describedby="reset-sidenav-stream-input">
          <button class="btn btn-outline-secondary" type="button" id="reset-sidenav-stream-input" (click)="resetSideNavFilter()">{{t('clear')}}</button>
        </div>
        @if (listForm.get('filterSideNavStream')?.value) {
          <p role="alert" class="mt-2">{{t('reorder-when-filter-present')}}</p>
        }
      </div>
    }

    <div class="row g-0 mb-3 ">
      <form [formGroup]="pageOperationsForm">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="accessibility-mode" formControlName="accessibilityMode">
          <label class="form-check-label" for="accessibility-mode">{{t('order-numbers-label')}}</label>
        </div>
        <div class="form-check form-check-inline ms-2">
          <input class="form-check-input" type="checkbox" id="bulk-mode" formControlName="bulkMode" >
          <label class="form-check-label" for="bulk-mode">{{t('bulk-mode-label')}}</label>
        </div>
      </form>
    </div>


    <div style="max-height: 31.25rem; overflow-y: auto">
      <app-draggable-ordered-list [items]="items | filter: filterSideNavStreams" (orderUpdated)="orderUpdated($event)"
                                  [accessibilityMode]="pageOperationsForm.get('accessibilityMode')!.value"
                                  [showRemoveButton]="false" [disabled]="listForm.get('filterSideNavStream')!.value"
                                  [bulkMode]="pageOperationsForm.get('bulkMode')!.value"
                                  [virtualizeAfter]="virtualizeAfter"
      >
        <ng-template #draggableItem let-position="idx" let-item>
          <app-sidenav-stream-list-item [item]="item" [position]="position"
                                        (hide)="updateVisibility($event, position)"
                                        (delete)="delete($event)"
          />
        </ng-template>
      </app-draggable-ordered-list>
    </div>

    <h5 class="mt-3">{{t('smart-filters-title')}}</h5>
    @if (smartFilters.length >= 6) {
      <div class="mb-3">
        <label for="smart-filter-filter" class="form-label">{{t('filter')}}</label>
        <div class="input-group">
          <input id="smart-filter-filter" autocomplete="off" class="form-control" formControlName="filterSmartFilter" type="text" aria-describedby="reset-smart-filter-input">
          <button class="btn btn-outline-secondary" type="button" id="reset-smart-filter-input" (click)="resetSmartFilterFilter()">{{t('clear')}}</button>
        </div>
        @if (listForm.get('filterSideNavStream')?.value) {
          <p role="alert" class="mt-2">{{t('reorder-when-filter-present')}}</p>
        }
      </div>
    }

    <ul class="list-group filter-list">
      @for (filter of smartFilters | filter: filterSmartFilters; track filter.name) {
        <li class="filter list-group-item">
          {{filter.name}}
          <button class="btn btn-icon" (click)="addFilterToStream(filter)">
            <i class="fa fa-plus" aria-hidden="true"></i>
            {{t('add')}}
          </button>
        </li>
      } @empty {
        <li class="list-group-item">
          {{t('no-data')}}
        </li>
      }
    </ul>

    <h5 class="mt-4">{{t('external-sources-title')}}</h5>
    @if (externalSources.length >= 6) {
      <div class="mb-3">
        <label for="external-source-filter" class="form-label">{{t('filter')}}</label>
        <div class="input-group">
          <input id="external-source-filter" autocomplete="off" class="form-control" formControlName="filterSmartFilter" type="text" aria-describedby="reset-external-source-input">
          <button class="btn btn-outline-secondary" type="button" id="reset-external-source-input" (click)="resetExternalSourceFilter()">{{t('clear')}}</button>
        </div>
        @if (listForm.get('filterSideNavStream')?.value) {
          <p role="alert" class="mt-2">{{t('reorder-when-filter-present')}}</p>
        }
      </div>
    }

    <ul class="list-group filter-list">
      @for (source of externalSources | filter: filterExternalSources; track source.host) {
        <li class="filter list-group-item" >
          {{source.host}}
          <button class="btn btn-icon" (click)="addExternalSourceToStream(source)">
            <i class="fa fa-plus" aria-hidden="true"></i>
            {{t('add')}}
          </button>
        </li>
      } @empty {
        <li class="list-group-item">
          {{t('no-data-external-source')}}
        </li>
      }
    </ul>
  </form>
</ng-container>
