<ng-container *transloco="let t; prefix: 'series-detail'">
  @let chapterValue = chapter();
  @let seriesValue = series();


  <div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
    @let readingProgressStatusValue = readingProgressStatus();

    @if (chapterValue && seriesValue) {
      <div class="row mb-0 mb-xl-3 info-container">
        <div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-bg' : ''" class="image-container col-5 col-sm-12 col-md-12 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]="chapterValue" [coverImage]="imageService.getChapterCoverImage(chapterValue.id)" (read)="read()" />
        </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">{{seriesValue.name}}</a>
          </h4>
          <div class="subtitle mt-2 mb-2">
            <span class="me-2">
              <app-entity-title [libraryType]="libraryType()" [entity]="chapterValue" [prioritizeTitleName]="true" [includeChapter]="true" />
            </span>
          </div>

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



          <div class="mt-2 mb-2">
            <app-external-rating [seriesId]="seriesId()"
                                 [ratings]="ratings()"
                                 [userRating]="rating()"
                                 [hasUserRated]="hasBeenRated()"
                                 [libraryType]="libraryType()"
                                 [chapterId]="chapterId()"
             />
          </div>

          <div class="mt-3 mb-3">
            <div class="row g-0">
              <div class="col-auto">
                <div class="btn-group">
                  <button type="button" class="btn btn-outline-primary" (click)="read()">
                    <span>
                      <i class="{{readingProgressStatusValue | readingProgressIconPipe}}" aria-hidden="true"></i>
                      <span class="read-btn--text ms-1">{{readingProgressStatusValue | 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)="read(true)">
                      <span>
                        <i class="fa fa-glasses" aria-hidden="true"></i>
                        <span class="read-btn--text ms-1">{{readingProgressStatusValue | readingProgressStatusPipe:true}}</span>
                      </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>



              @if (accountService.hasAdminRole()) {
                <div class="col-auto ms-2">
                  <button class="btn btn-actions" id="edit-btn--komf" (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-2k">
                <div class="card-actions" [ngbTooltip]="t('more-alt')">
                  <app-card-actionables [entity]="chapterValue" [actions]="chapterActions()" [labelBy]="series.name + ' ' + chapterValue.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]="chapterValue" [entityType]="DownloadEntityType.Chapter" [libraryId]="libraryId()" [seriesId]="seriesId()" />
              </div>

            </div>
          </div>

          <div class="mt-2 mb-3">
              <app-read-more [text]="chapterValue.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]="chapterValue.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">
                @if (chapterValue.releaseDate !== NULL_DATE && (libraryType() === LibraryType.ComicVine || libraryType() === LibraryType.Comic)) {
                  <span class="fw-bold">{{t('release-date-title')}}</span>
                  <div>
                    <a class="dark-exempt btn-icon" href="javascript:void(0);">{{chapterValue.releaseDate | utcToLocalTime: 'shortDate' | defaultDate:'—'}}</a>
                  </div>
                } @else {
                  <span class="fw-bold">{{t('cover-artists-title')}}</span>
                  <div>
                    <app-badge-expander [items]="chapterValue.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]="chapterValue.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]="chapterValue.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)">

        @if (showDetailsTab()) {
          <li [ngbNavItem]="Tabs.Details">
            <a ngbNavLink>{{Tabs.Details | tabTitle}}</a>
            <ng-template ngbNavContent>
              @defer (when activeTabId === Tabs.Details; prefetch on idle) {
                <app-details-tab [metadata]="chapterValue"
                                 [entity]="chapterValue"
                                 [genres]="chapterValue.genres"
                                 [tags]="chapterValue.tags"
                                 [webLinks]="weblinks()"
                                 [files]="chapterValue.files"
                                 [basicMetadata]="chapterBasicMetadata()"
                />
              }
            </ng-template>
          </li>
        }

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

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

        @if(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>
        }
      </ul>
      </div>
      <div [ngbNavOutlet]="nav"></div>

    }



    <app-loading [loading]="isLoading()" style="min-height: 18.75rem" />
  </div>

</ng-container>
