<ng-container *transloco="let t; prefix: 'stream-list-item'">
  <div class="row pt-2 g-0 list-item">
    <div class="g-0">
      <h5 class="mb-1 pb-0" id="item().id--{{position()}}">
        @if (item().isProvided) {
          {{item().name | streamName }}
        } @else {
          {{item().name}}
        }

        <span class="float-end">
          <button class="btn btn-icon p-0" (click)="hide.emit(item())">
            <i class="me-1" [ngClass]="{'fas fa-eye': item().visible, 'fa-solid fa-eye-slash': !item().visible}" aria-hidden="true"></i>
            <span class="visually-hidden">{{t('remove')}}</span>
          </button>
          @if (item().streamType===SideNavStreamType.SmartFilter) {
            <button class="btn btn-danger-text btn-icon" (click)="delete.emit(item())">
              <i class="fa-solid fa-trash" aria-hidden="true"></i>
              <span class="visually-hidden">{{t('delete')}}</span>
            </button>
          }
        </span>
      </h5>
      <div class="meta">
        <div class="ps-1">
          @if (item().isProvided) {
            {{t('provided')}}
          } @else {
            @switch (item().streamType) {
              @case (SideNavStreamType.Library) {
                {{t('library')}}
              }
              @case (SideNavStreamType.SmartFilter) {
                {{t('smart-filter')}}
              }
              @case (SideNavStreamType.ExternalSource) {
                {{t('external-source')}}
              }
            }
          }
        </div>
        @if (!item().isProvided) {
          <div class="ps-1">
            @switch (item().streamType) {
              @case (SideNavStreamType.Library) {
                <a [href]="baseUrl + 'library/' + this.item().libraryId" target="_blank">{{item().library?.name}}</a>
              }
              @case (SideNavStreamType.SmartFilter) {
                <a [href]="loadFilterUrl()">{{t('load-filter')}}</a>
              }
              @case (SideNavStreamType.ExternalSource) {
                <a [href]="externalUrl()" target="_blank" rel="noopener noreferrer">{{item().externalSource!.host!}}</a>
              }
          }
        </div>
      }
      </div>
    </div>
  </div>
</ng-container>
