<ng-container *transloco="let t; prefix: 'series-detail'">

  <app-bulk-operations [marginLeft]="12" [marginRight]="0" />

  <div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>

    <div class="row mb-0 mb-xl-3 info-container">
      <div [ngClass]="{'mobile-bg': mobileSeriesImgBackground}" class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3 position-relative">
        <app-cover-image [entity]="volume()" [coverImage]="coverImage()" [continueTitle]="continuePoint()" (read)="readVolume()" />
      </div>

      <div class="col-xl-10 col-lg-7 col-md-12 col-xs-12 col-sm-12">
        <h4 class="title mb-2">
          <a routerLink="/library/{{libraryId()}}/series/{{seriesId()}}" class="dark-exempt btn-icon">{{series().name}}</a>
        </h4>
        <div class="subtitle mt-2 mb-2">
            <span>
              {{t('volume-num')}}
              <app-entity-title [libraryType]="libraryType()" [entity]="volume()" [prioritizeTitleName]="true" />
            </span>
        </div>

        <app-metadata-detail-row [entity]="volumeCast()"
                                 [ageRating]="maxAgeRating()"
                                 [hasReadingProgress]="volume().pagesRead > 0"
                                 [readingTimeEntity]="volume()"
                                 [libraryType]="libraryType()"
                                 [mangaFormat]="series().format"
                                 [totalBytes]="size()"
                                 [releaseYear]="(volume().chapters.at(0)?.releaseDate | utcToLocalDate)?.getFullYear()"
                                 [totalReads]="totalReads()"
        />

        @if (volume().chapters.length === 1) {
          <div class="mt-2 mb-2">
            <app-external-rating [seriesId]="seriesId()"
                                 [ratings]="[]"
                                 [userRating]="rating()"
                                 [hasUserRated]="hasBeenRated()"
                                 [libraryType]="libraryType()"
                                 [chapterId]="volume().chapters[0].id"
            />
          </div>
        }

        <div class="mt-2 mb-3">
          <div class="row g-0">
            <div class="col-auto">
              <div class="btn-group">
                <button type="button" class="btn btn-outline-primary" (click)="readVolume()">
                    <span>
                      <i class="{{readingProgressStatus() | readingProgressIconPipe}}" aria-hidden="true"></i>
                      <span class="read-btn--text ms-1">{{readingProgressStatus() | readingProgressStatusPipe}}</span>
                    </span>
                </button>
                <div class="btn-group" ngbDropdown role="group" display="dynamic" [attr.aria-label]="t('read-options-alt')">
                  <button type="button" class="btn btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
                  <div class="dropdown-menu" ngbDropdownMenu>
                    <button ngbDropdownItem (click)="readVolume(true)">
                        <span>
                          <i class="fa fa-glasses" aria-hidden="true"></i>
                          <span class="read-btn--text ms-1">{{readingProgressStatus() | readingProgressStatusPipe:true}}</span>
                        </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>



            @if (accountService.hasAdminRole()) {
              <div class="col-auto ms-2">
                <button class="btn btn-actions" (click)="openEditModal()" [ngbTooltip]="t('edit-series-alt')">
                  <span><i class="fa fa-pen" aria-hidden="true"></i></span>
                </button>
              </div>
            }

            <div class="col-auto ms-2">
              <div class="card-actions mt-2" [ngbTooltip]="t('more-alt')">
                <app-card-actionables [entity]="volume()" [actions]="volumeActions()" [labelBy]="series.name + ' ' + volume().minNumber" iconClass="fa-ellipsis-h" btnClass="btn-actions btn" />
              </div>
            </div>

            <div class="col-auto ms-2 d-none d-md-block">
              <app-download-button [entity]="volume()" [entityType]="DownloadEntityType.Volume" [libraryId]="libraryId()" [seriesId]="seriesId()" />
            </div>

          </div>
        </div>

        <div class="mt-2 mb-3">
          <app-read-more [text]="volume().chapters[0].summary || ''" [useResponsiveLength]="true" />
        </div>

        <div class="mt-2">
          <div class="row g-0">
            <div class="col-6">
              <span class="fw-bold">{{t('writers-title')}}</span>
              <div>
                <app-badge-expander [items]="volumeCast().writers" [allowToggle]="false" (toggled)="switchTabsToDetail()">
                  <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
                    <a routerLink="/person/{{encodeURIComponent(item.name)}}/" class="dark-exempt btn-icon">{{item.name}}</a>
                  </ng-template>
                </app-badge-expander>
              </div>
            </div>
            <div class="col-6">
              <span class="fw-bold">{{t('cover-artists-title')}}</span>
              <div>
                <app-badge-expander [items]="volumeCast().coverArtists" [allowToggle]="false" (toggled)="switchTabsToDetail()">
                  <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
                    <a routerLink="/person/{{encodeURIComponent(item.name)}}/" class="dark-exempt btn-icon">{{item.name}}</a>
                  </ng-template>
                </app-badge-expander>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-3 mb-2 upper-details">
          <div class="row g-0">
            <div class="col-6 pe-5">
              <span class="fw-bold">{{t('genres-title')}}</span>
              <div>
                <app-badge-expander [items]="genres()"
                                    [itemsTillExpander]="3"
                                    [allowToggle]="false"
                                    (toggled)="switchTabsToDetail()">
                  <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
                    <a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Genres, item.id)">{{item.title}}</a>
                  </ng-template>
                </app-badge-expander>
              </div>
            </div>

            <div class="col-6">
              <span class="fw-bold">{{t('tags-title')}}</span>
              <div>
                <app-badge-expander [items]="tags()"
                                    [itemsTillExpander]="3"
                                    [allowToggle]="false"
                                    (toggled)="switchTabsToDetail()">
                  <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
                    <a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Tags, item.id)">{{item.title}}</a>
                  </ng-template>
                </app-badge-expander>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>

    <div class="carousel-tabs-container mb-2">
      <ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" (navChange)="onNavChange($event)">
        <li [ngbNavItem]="Tabs.Chapters">
          <a ngbNavLink>
            {{chapterTabName()}}
            <span class="badge rounded-pill text-bg-secondary">{{volume().chapters.length}}</span>
          </a>
          <ng-template ngbNavContent>
            @defer (when activeTabId === Tabs.Chapters; prefetch on idle) {
              <virtual-scroller #scroll [items]="chapters()" [bufferAmount]="1" [parentScroll]="scrollingBlock" [childHeight]="1">
                <div class="card-container row g-0" #container>
                  @for(item of scroll.viewPortItems; let idx = $index; track item.id + '_chapter') {
                    <app-chapter-card class="col-auto mt-2 mb-2" [chapter]="item"
                                      [seriesId]="seriesId()"
                                      [libraryId]="libraryId()"
                                      [libraryType]="libraryType()"
                                      [index]="scroll.viewPortInfo.startIndexWithBuffer + idx"
                                      [maxIndex]="volume().chapters.length"
                                      [allowSelection]="true"
                                      (dataChanged)="updateChapter($event)"
                    />
                  }
                </div>
              </virtual-scroller>
            }
          </ng-template>
        </li>

        @if (volume().chapters.length === 1 && readingLists().length > 0) {
          <li [ngbNavItem]="Tabs.Related">
            <a ngbNavLink>{{Tabs.Related | tabTitle}}</a>
            <ng-template ngbNavContent>
              @defer (when activeTabId === Tabs.Related; prefetch on idle) {
                <app-related-tab [readingLists]="readingLists()" (reload)="handleRelatedReload($event)" (dataChanged)="handleRelatedReload($event)" />
              }
            </ng-template>
          </li>
        }

        @if (volume().chapters.length === 1 && annotations().length > 0) {
          <li [ngbNavItem]="Tabs.Annotations">
            <a ngbNavLink>
              {{Tabs.Annotations | tabTitle}}
              <span class="badge rounded-pill text-bg-secondary">{{annotations().length}}</span>
            </a>
            <ng-template ngbNavContent>
              @defer (when activeTabId === Tabs.Annotations; prefetch on idle) {
                <app-annotations-tab [annotations]="annotations()" [scrollingBlock]="scrollingBlock" />
              }
            </ng-template>
          </li>
        }

        @if (volume().chapters.length === 1) {
          <li [ngbNavItem]="Tabs.Reviews">
            <a ngbNavLink>
              {{Tabs.Reviews | tabTitle}}
              <span class="badge rounded-pill text-bg-secondary">{{reviewCount()}}</span>
            </a>
            <ng-template ngbNavContent>
              @defer (when activeTabId === Tabs.Reviews; prefetch on idle) {
                <app-reviews [userReviews]="userReviews()" [plusReviews]="plusReviews()"
                             [series]="series()" [volumeId]="volumeId()" [chapter]="volume().chapters[0]" />
              }
            </ng-template>
          </li>
        }

        <li [ngbNavItem]="Tabs.Details" id="details-tab">
          <a ngbNavLink>{{Tabs.Details | tabTitle}}</a>
          <ng-template ngbNavContent>
            @defer (when activeTabId === Tabs.Details; prefetch on idle) {
              <app-details-tab [metadata]="volumeCast()"
                               [entity]="volume()"
                               [genres]="genres()"
                               [tags]="tags()"
                               [files]="files()"
                               [basicMetadata]="volumeBasicMetadata()"
              />
            }
          </ng-template>
        </li>
      </ul>
    </div>
    <!-- Min height helps with scroll jerking when switching from chapter -> related/details -->
    <div [ngbNavOutlet]="nav" style="min-height: 18.75rem"></div>


    <app-loading [loading]="isLoading()" />
  </div>

</ng-container>
