@if (isOpen) {
  <div class="sidebar-overlay" (click)="onOverlayClick()" [class.closing]="closing">
    <aside class="sidebar" (click)="$event.stopPropagation()" [class.closing]="closing">
      <header class="sidebar-header">
        @if (bookInfo.coverUrl) {
          <img
            [src]="bookInfo.coverUrl"
            alt="Book cover"
            class="book-cover"
          />
        }
        <div class="book-meta">
          <h2 class="book-title">{{ bookInfo.title }}</h2>
          @if (bookInfo.authors) {
            <p class="book-authors">{{ bookInfo.authors }}</p>
          }
        </div>
      </header>

      <nav class="tabs">
        <button
          class="tab"
          [class.active]="activeTab === 'pages'"
          (click)="setActiveTab('pages')">
          <app-reader-icon name="book" class="tab-icon"></app-reader-icon>
          <span>{{ 'readerCbx.sidebar.contentTab' | transloco }}</span>
        </button>
        <button
          class="tab"
          [class.active]="activeTab === 'bookmarks'"
          (click)="setActiveTab('bookmarks')">
          <app-reader-icon name="bookmark" class="tab-icon"></app-reader-icon>
          <span>{{ 'readerCbx.sidebar.bookmarksTab' | transloco }}</span>
          @if (bookmarks.length > 0) {
            <span class="badge">{{ bookmarks.length }}</span>
          }
        </button>
        <button
          class="tab"
          [class.active]="activeTab === 'notes'"
          (click)="setActiveTab('notes')">
          <app-reader-icon name="note" class="tab-icon"></app-reader-icon>
          <span>{{ 'readerCbx.sidebar.notesTab' | transloco }}</span>
          @if (notes.length > 0) {
            <span class="badge">{{ notes.length }}</span>
          }
        </button>
      </nav>

      <div class="content">
        @switch (activeTab) {
          @case ('pages') {
            <ul class="page-list">
              @for (page of pages; track page.pageNumber) {
                <li>
                  <button
                    class="page-row"
                    [class.active]="isPageActive(page.pageNumber)"
                    (click)="onPageClick(page.pageNumber)">
                    <span class="page-number">{{ page.pageNumber }}</span>
                    <span class="page-label">{{ page.displayName }}</span>
                  </button>
                </li>
              }
            </ul>
            @if (pages.length === 0) {
              <div class="empty-state">
                <app-reader-icon name="book" class="empty-icon" [size]="48" [strokeWidth]="1.5"></app-reader-icon>
                <p>{{ 'readerCbx.sidebar.noPagesFound' | transloco }}</p>
              </div>
            }
          }
          @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]="'readerCbx.sidebar.deleteBookmark' | transloco">
                      <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>{{ 'readerCbx.sidebar.noBookmarksYet' | transloco }}</p>
                <span class="empty-hint">{{ 'readerCbx.sidebar.bookmarkHint' | transloco }}</span>
              </div>
            }
          }
          @case ('notes') {
            <div class="notes-container">
              @if (notes.length > 0) {
                <div class="notes-search-wrapper">
                  <app-reader-icon name="search" class="search-icon" [size]="16"></app-reader-icon>
                  <input
                    type="text"
                    class="search-input"
                    [placeholder]="'readerCbx.sidebar.searchNotesPlaceholder' | transloco"
                    [(ngModel)]="notesSearchQuery"
                    (ngModelChange)="onNotesSearchInput($event)"
                  />
                  @if (notesSearchQuery) {
                    <button class="clear-btn" (click)="clearNotesSearch()" [attr.aria-label]="'readerCbx.sidebar.clearSearch' | transloco">
                      <app-reader-icon name="close" [size]="14"></app-reader-icon>
                    </button>
                  }
                </div>
              }

              @if (filteredNotes.length > 0) {
                <ul class="item-list">
                  @for (note of filteredNotes; track note.id) {
                    <li class="list-item note-item" (click)="onNoteClick(note.cfi)">
                      <div class="note-bar" [style.background-color]="note.color"></div>
                      <div class="item-content">
                        <span class="note-text">{{ note.noteContent }}</span>
                        @if (note.chapterTitle) {
                          <span class="item-chapter">{{ note.chapterTitle }}</span>
                        }
                        <span class="item-meta">{{ note.createdAt | date: 'MMM d, y' }}</span>
                      </div>
                      <div class="action-buttons">
                        <button class="edit-btn" (click)="onEditNote($event, note)" [attr.aria-label]="'readerCbx.sidebar.editNote' | transloco">
                          <app-reader-icon name="edit" [size]="16"></app-reader-icon>
                        </button>
                        <button class="delete-btn" (click)="onDeleteNote($event, note.id)" [attr.aria-label]="'readerCbx.sidebar.deleteNote' | transloco">
                          <app-reader-icon name="trash" [size]="16"></app-reader-icon>
                        </button>
                      </div>
                    </li>
                  }
                </ul>
              } @else if (notes.length > 0 && notesSearchQuery) {
                <div class="empty-state">
                  <app-reader-icon name="search" class="empty-icon" [size]="48" [strokeWidth]="1.5"></app-reader-icon>
                  <p>{{ 'readerCbx.sidebar.noMatchingNotes' | transloco }}</p>
                  <span class="empty-hint">{{ 'readerCbx.sidebar.tryDifferentSearch' | transloco }}</span>
                </div>
              } @else {
                <div class="empty-state">
                  <app-reader-icon name="note" class="empty-icon" [size]="48" [strokeWidth]="1.5"></app-reader-icon>
                  <p>{{ 'readerCbx.sidebar.noNotesYet' | transloco }}</p>
                  <span class="empty-hint">{{ 'readerCbx.sidebar.notesHint' | transloco }}</span>
                </div>
              }
            </div>
          }
        }
      </div>
    </aside>
  </div>
}
