<ng-container *transloco="let t; prefix: 'readerEbook.sidebar'">
@if (isOpen) {
  <div class="sidebar-overlay" (click)="onOverlayClick()" [class.closing]="closing">
    <aside class="sidebar" (click)="$event.stopPropagation()" [class.closing]="closing">
      <!-- Header with book info -->
      <header class="sidebar-header">
        @if (bookInfo.coverUrl) {
          <img
            [src]="bookInfo.coverUrl"
            [alt]="t('bookCoverAlt')"
            class="book-cover"
            (click)="onCoverClick()"
            role="button"
            tabindex="0"
            (keydown.enter)="onCoverClick()"
          />
        }
        <div class="book-meta">
          <h2 class="book-title">{{ bookInfo.title }}</h2>
          @if (bookInfo.authors) {
            <p class="book-authors">{{ bookInfo.authors }}</p>
          }
        </div>
      </header>

      <!-- Tab navigation -->
      <nav class="tabs">
        <button
          class="tab"
          [class.active]="activeTab === 'chapters'"
          (click)="setActiveTab('chapters')">
          <app-reader-icon name="book" class="tab-icon"></app-reader-icon>
          <span>{{ t('contentsTab') }}</span>
        </button>
        <button
          class="tab"
          [class.active]="activeTab === 'bookmarks'"
          (click)="setActiveTab('bookmarks')">
          <app-reader-icon name="bookmark" class="tab-icon"></app-reader-icon>
          <span>{{ t('bookmarksTab') }}</span>
          @if (bookmarks.length > 0) {
            <span class="badge">{{ bookmarks.length }}</span>
          }
        </button>
        <button
          class="tab"
          [class.active]="activeTab === 'highlights'"
          (click)="setActiveTab('highlights')">
          <app-reader-icon name="edit" class="tab-icon"></app-reader-icon>
          <span>{{ t('highlightsTab') }}</span>
          @if (annotations.length > 0) {
            <span class="badge">{{ annotations.length }}</span>
          }
        </button>
      </nav>

      <!-- Tab content -->
      <div class="content">
        @switch (activeTab) {
          @case ('chapters') {
            <ul class="chapter-list" role="tree">
              @for (chapter of chapters; track chapter.href) {
                <ng-container *ngTemplateOutlet="chapterItem; context: { $implicit: chapter, depth: 0 }"/>
              }
            </ul>

            <ng-template #chapterItem let-chapter let-depth="depth">
              <li role="treeitem">
                <button
                  class="chapter-row"
                  [class.active]="isChapterActive(chapter.href)"
                  [class.expandable]="chapter.subitems?.length"
                  [style.--depth]="depth"
                  (click)="onChapterClick(chapter)">
                  <span class="chapter-label">{{ chapter.label }}</span>
                  @if (chapter.subitems?.length) {
                    <app-reader-icon
                      name="chevron-right"
                      class="expand-icon"
                      [class.expanded]="isChapterExpanded(chapter.href)"
                      [size]="16">
                    </app-reader-icon>
                  }
                </button>
                @if (chapter.subitems?.length && isChapterExpanded(chapter.href)) {
                  <ul class="subchapter-list" role="group">
                    @for (sub of chapter.subitems; track sub.href) {
                      <ng-container *ngTemplateOutlet="chapterItem; context: { $implicit: sub, depth: depth + 1 }"/>
                    }
                  </ul>
                }
              </li>
            </ng-template>
          }

          @case ('bookmarks') {
            @if (bookmarks.length > 0) {
              <ul class="item-list">
                @for (bookmark of bookmarks; track bookmark.id) {
                  <li class="list-item" (click)="onBookmarkClick(bookmark.cfi!)">
                    <div class="item-content">
                      <span class="item-title">{{ bookmark.title }}</span>
                      <span class="item-meta">{{ bookmark.createdAt | date: 'MMM d, y' }}</span>
                    </div>
                    <button class="delete-btn" (click)="onDeleteBookmark($event, bookmark.id)" [attr.aria-label]="t('deleteBookmark')">
                      <app-reader-icon name="trash" [size]="16"></app-reader-icon>
                    </button>
                  </li>
                }
              </ul>
            } @else {
              <div class="empty-state">
                <app-reader-icon name="bookmark" class="empty-icon" [size]="48" [strokeWidth]="1.5"></app-reader-icon>
                <p>{{ t('noBookmarksYet') }}</p>
                <span class="empty-hint">{{ t('noBookmarksHint') }}</span>
              </div>
            }
          }

          @case ('highlights') {
            @if (annotations.length > 0) {
              <ul class="item-list">
                @for (annotation of annotations; track annotation.id) {
                  <li class="list-item highlight-item" (click)="onAnnotationClick(annotation.cfi)">
                    <div class="highlight-bar" [style.background-color]="annotation.color"></div>
                    <div class="item-content">
                      <span class="highlight-text">"{{ annotation.text }}"</span>
                      @if (annotation.chapterTitle) {
                        <span class="item-chapter">{{ annotation.chapterTitle }}</span>
                      }
                      <span class="item-meta">{{ annotation.createdAt | date: 'MMM d, y' }}</span>
                    </div>
                    <button class="delete-btn" (click)="onDeleteAnnotation($event, annotation.id)" [attr.aria-label]="t('deleteHighlight')">
                      <app-reader-icon name="trash" [size]="16"></app-reader-icon>
                    </button>
                  </li>
                }
              </ul>
            } @else {
              <div class="empty-state">
                <app-reader-icon name="edit" class="empty-icon" [size]="48" [strokeWidth]="1.5"></app-reader-icon>
                <p>{{ t('noHighlightsYet') }}</p>
                <span class="empty-hint">{{ t('noHighlightsHint') }}</span>
              </div>
            }
          }
        }
      </div>
    </aside>
  </div>
}
</ng-container>
