Kavita/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.html

<ng-container *transloco="let t; read: 'card-detail-drawer'">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">
        <span class="modal-title" id="modal-basic-title">
            <app-entity-title [libraryType]="libraryType" [entity]="data" [seriesName]="parentName"></app-entity-title>
        </span>
    </h5>
    <button type="button" class="btn-close text-reset" aria-label="Close" (click)="activeOffcanvas.dismiss()"></button>
  </div>

  <div class="offcanvas-body pb-3">
    <div class="d-flex">
      <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="vertical" style="max-width: 135px;">
        <li [ngbNavItem]="tabs[TabID.General]">
          <a ngbNavLink>{{t(tabs[TabID.General].title)}}</a>
          <ng-template ngbNavContent>
            <div class="container-fluid" style="overflow: auto">

              <div class="row g-0">
                <div class="d-none d-md-block col-md-2 col-lg-1">
                  <app-image class="me-2" width="74px" [imageUrl]="coverImageUrl"></app-image>
                </div>
                <div class="col-md-10 col-lg-11">
                  <ng-container *ngIf="summary.length > 0; else noSummary">
                    <app-read-more [text]="summary" [maxLength]="250"></app-read-more>
                  </ng-container>
                  <ng-template #noSummary>
                    {{t('no-summary')}}
                  </ng-template>
                </div>
              </div>

              <app-entity-info-cards [entity]="data" [libraryId]="libraryId"></app-entity-info-cards>


              <!-- 2 rows to show some tags-->
              <ng-container *ngIf="chapterMetadata !== undefined">
                <div class="row g-0 mb-2">
                  <div class="col-md-6 col-sm-12">
                    <h6>{{t('writers-title')}}</h6>
                    <ng-container *ngIf="chapterMetadata.writers.length > 0; else noBadges">
                      <app-badge-expander [items]="chapterMetadata.writers">
                        <ng-template #badgeExpanderItem let-item let-position="idx">
                          <app-person-badge [person]="item"></app-person-badge>
                        </ng-template>
                      </app-badge-expander>
                    </ng-container>
                  </div>
                  <div class="col-md-6 col-sm-12">
                    <h6>{{t('genres-title')}}</h6>
                    <ng-container *ngIf="chapterMetadata.genres.length > 0; else noBadges">
                      <app-badge-expander [items]="chapterMetadata.genres">
                        <ng-template #badgeExpanderItem let-item let-position="idx">
                          <app-tag-badge>{{item.title}}</app-tag-badge>
                        </ng-template>
                      </app-badge-expander>
                    </ng-container>
                  </div>
                </div>
                <div class="row g-0 mb-2">
                  <div class="col-md-6 col-sm-12">
                    <h6>{{t('publishers-title')}}</h6>
                    <ng-container *ngIf="chapterMetadata.publishers.length > 0; else noBadges">
                      <app-badge-expander [items]="chapterMetadata.publishers">
                        <ng-template #badgeExpanderItem let-item let-position="idx">
                          <app-person-badge [person]="item"></app-person-badge>
                        </ng-template>
                      </app-badge-expander>
                    </ng-container>
                  </div>
                  <div class="col-md-6 col-sm-12">
                    <h6>{{t('tags-title')}}</h6>
                    <ng-container *ngIf="chapterMetadata.tags.length > 0; else noBadges">
                      <app-badge-expander [items]="chapterMetadata.tags">
                        <ng-template #badgeExpanderItem let-item let-position="idx">
                          <app-tag-badge>{{item.title}}</app-tag-badge>
                        </ng-template>
                      </app-badge-expander>
                    </ng-container>
                  </div>
                </div>

                <ng-template #noBadges>
                  {{t('not-defined')}}
                </ng-template>
              </ng-container>

            </div>
          </ng-template>
        </li>

        <li [ngbNavItem]="tabs[TabID.Metadata]">
          <a ngbNavLink>{{t(tabs[TabID.Metadata].title)}}</a>
          <ng-template ngbNavContent>
            <app-chapter-metadata-detail [chapter]="chapterMetadata"></app-chapter-metadata-detail>
          </ng-template>
        </li>

        <li [ngbNavItem]="tabs[TabID.Cover]" [disabled]="(isAdmin$ | async) === false">
          <a ngbNavLink>{{t(tabs[TabID.Cover].title)}}</a>
          <ng-template ngbNavContent>
            <app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateCoverImageIndex($event)"
                                     (selectedBase64Url)="applyCoverImage($event)" [showReset]="chapter.coverImageLocked"
                                     (resetClicked)="resetCoverImage()"></app-cover-image-chooser>
          </ng-template>
        </li>

        <li [ngbNavItem]="tabs[TabID.Files]" [disabled]="(isAdmin$ | async) === false">
          <a ngbNavLink>{{t(tabs[TabID.Files].title)}}</a>
          <ng-template ngbNavContent>
            @if (!utilityService.isChapter(data)) {
              <h4>{{utilityService.formatChapterName(libraryType) + 's'}}</h4>
            }
            <ul class="list-unstyled">
              <li class="d-flex my-4" *ngFor="let chapter of chapters">
                <!-- TODO: Localize title -->
                <a (click)="readChapter(chapter)" href="javascript:void(0);" title="Read {{utilityService.formatChapterName(libraryType, true, false)}} {{formatChapterNumber(chapter)}}">
                  <app-image class="me-2" width="74px" [imageUrl]="imageService.getChapterCoverImage(chapter.id)"></app-image>
                </a>
                <div class="flex-grow-1">
                  <h5 class="mt-0 mb-1">
                    <span>
                        <span>
                            <app-card-actionables (actionHandler)="performAction($event, chapter)" [actions]="chapterActions"
                                                  [labelBy]="utilityService.formatChapterName(libraryType, true, true) + formatChapterNumber(chapter)"></app-card-actionables>
                            <ng-container *ngIf="chapter.minNumber !== LooseLeafOrSpecialNumber; else specialHeader">
                                {{utilityService.formatChapterName(libraryType, true, false) }} {{formatChapterNumber(chapter)}}
                            </ng-container>
                        </span>
                        <span class="badge bg-primary rounded-pill ms-1">
                            <span *ngIf="chapter.pagesRead > 0 && chapter.pagesRead < chapter.pages">{{chapter.pagesRead}} / {{chapter.pages}}</span>
                            <span *ngIf="chapter.pagesRead === 0">{{t('unread') | uppercase}}</span>
                            <span *ngIf="chapter.pagesRead === chapter.pages">{{t('read') | uppercase}}</span>
                        </span>
                    </span>
                    <ng-template #specialHeader>{{t('files')}}</ng-template>
                  </h5>
                  <ul class="list-group">
                    @for (file of chapter.files; track file.id) {
                      <li class="list-group-item no-hover">
                        <span>{{file.filePath}}</span>
                        <div class="row g-0">
                          <div class="col">
                            {{t('pages')}} {{file.pages | number:''}}
                          </div>
                          @if (data.hasOwnProperty('created')) {
                            <div class="col">
                              {{t('added')}} {{file.created | date: 'short' | defaultDate}}
                            </div>
                          }
                          <div class="col">
                            {{t('size')}} {{file.bytes | bytes}}
                          </div>
                        </div>
                      </li>
                    }
                  </ul>
                </div>
              </li>
            </ul>
          </ng-template>
        </li>
      </ul>
      <div [ngbNavOutlet]="nav" class="tab-content {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'mt-3' : 'ms-4 flex-fill'}}"></div>
    </div>
  </div>

</ng-container>