<div class="mx-4 mb-4">
  <p class="text-sm font-semibold mb-2 text-[var(--primary-color)]">
    {{ booksToShow.length }} Books Selected
  </p>
  <div class="max-h-24 overflow-auto border border-gray-500 rounded p-2 text-sm">
    <ul class="list-disc pl-5 space-y-1">
      @for (book of booksToShow; track book.id) {
        <li>
          <span class="text-gray-400">#{{ book.id }}</span>: {{ book.metadata?.title || 'Untitled' }}
        </li>
      }
    </ul>
  </div>
</div>

<app-metadata-fetch-options></app-metadata-fetch-options>
