<div class="main-container container-fluid">
  <ng-container *transloco="let t; prefix: 'collection-detail'">
    <div #companionBar>
      @if (series()) {
        <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive()">
          <ng-container title>
            @if (collectionTag()) {
              <h4>
                <app-promoted-icon [promoted]="collectionTag()!.promoted" />
                <span class="ms-2">{{collectionTag()!.title}}</span>
                <app-card-actionables [entity]="collectionTag()!" [disabled]="actionInProgress()" [actions]="collectionTagActions()"
                                      [labelBy]="collectionTag()!.title" iconClass="fa-ellipsis-v" (actionHandler)="handleActionCallback($event)" />
              </h4>
            }
            <h5 subtitle class="ms-2 subtitle-with-actionables">{{t('item-count', {num: series().length})}}</h5>
          </ng-container>
        </app-side-nav-companion-bar>
      }

    </div>

    @if (collectionTag()) {
      <div class="container-fluid">
        @if (summary().length > 0 || collectionTag()!.source !== ScrobbleProvider.Kavita) {
          <div class="row mb-3">
            <div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
              <app-image [styles]="{'max-width': '481px'}" [imageUrl]="imageService.getCollectionCoverImage(collectionTag()!.id)" />

              @if (collectionTag()!.source !== ScrobbleProvider.Kavita && collectionTag()!.missingSeriesFromSource !== null
              && series().length !== collectionTag()!.totalSourceCount && collectionTag()!.totalSourceCount > 0) {
                <div class="under-image">
                  <app-image [imageUrl]="collectionTag()!.source | providerImage"
                             width="16px" height="16px"
                             [ngbTooltip]="collectionTag()!.source | scrobbleProviderName" tabindex="0" />
                  <span class="ms-2 me-2">{{t('sync-progress', {title: series().length + ' / ' + collectionTag()!.totalSourceCount})}}</span>
                  <i class="fa-solid fa-question-circle" aria-hidden="true" [ngbTooltip]="t('last-sync', {date: collectionTag()!.lastSyncUtc | date: 'short' | defaultDate })"></i>
                </div>
              }
            </div>
            <div class="col-md-10 col-xs-8 col-sm-6 mt-2">
              @if (summary().length > 0) {
                <div class="mb-2">
                  <app-read-more [text]="summary()" [useResponsiveLength]="true" />
                </div>

                @if (collectionTag()!.source !== ScrobbleProvider.Kavita) {
                  <div class="mt-2 mb-2">
                    <button class="btn btn-outline-primary" (click)="openSyncDetailDrawer()">Sync Details</button>
                  </div>
                }
              }
            </div>
            <hr>
          </div>
        }

        @if (filter()) {
          <app-card-detail-layout
                                  [isLoading]="isLoading()"
                                  [items]="series()"
                                  [pagination]="pagination()"
                                  [filterSettings]="filterSettings()"
                                  [filterOpen]="filterOpen"
                                  [trackByIdentity]="trackByIdentity"
                                  [jumpBarKeys]="jumpbarKeys()"
                                  (applyFilter)="updateFilter($event)">

            <ng-template #topBar>
              <app-bulk-operations />
            </ng-template>

            <ng-template #cardItem let-item let-position="idx">
              <app-series-card [series]="item" (reload)="loadPage()" (dataChanged)="updateSeries($event)"
                               [index]="position" [maxIndex]="series().length" [allowSelection]="true"
               />
            </ng-template>

            @if(!filterActive() && series().length === 0) {
              <div>
                <ng-template #noData>
                  {{t('no-data')}}
                </ng-template>
              </div>
            }

            @if(filterActive() && series().length === 0) {
              <div>
                <ng-template #noData>
                  {{t('no-data-filtered')}}
                </ng-template>
              </div>
            }

          </app-card-detail-layout>
        }

      </div>
    }

  </ng-container>
</div>
