feat(templates): add wrapper div and pagination to BookShelf

Add books-grid wrapper div and pagination controls to BookShelf
template to fix HTMX targeting issue.

Changes:
- Add id="books-grid" wrapper div around BooksGrid component
- Add pagination section with Previous/Next buttons
- Pagination uses HTMX to target #books-grid for updates
- Include #filter-form in HTMX requests to preserve filters

Fixes pagination displaying inside the grid instead of below it.
The wrapper div ensures HTMX replaces only the grid content,
not the pagination controls.

Related: Issue #2 - Fix pagination display location

templates/bookshelf.templ

@@ -320,13 +320,44 @@ templ BookShelf(
 					</form>
 				</div>
 				<!-- Books Grid -->
-				@BooksGrid(books, limit, offset, count, currentLibraryID)
-				<!-- Error Message -->
-				if errorMessage != "" {
-					<div class="mt-6 p-4 rounded-lg border bg-red-500/10 border-red-500">
-						<p style="color: var(--text-primary)">{ errorMessage }</p>
-					</div>
-				}
+				<div id="books-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
+					@BooksGrid(books, limit, offset, count, currentLibraryID)
+					<!-- Error Message -->
+					if errorMessage != "" {
+						<div class="mt-6 p-4 rounded-lg border bg-red-500/10 border-red-500">
+							<p style="color: var(--text-primary)">{ errorMessage }</p>
+						</div>
+					}
+				</div>
+				<!-- Pagination -->
+				<div id="pagination" class="mt-6 flex justify-center gap-2">
+					if count > 0 {
+						<button
+							type="button"
+							class="px-4 py-2 rounded-lg border disabled:opacity-50"
+							style="border-color: var(--border); color: var(--text-primary);"
+							hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset - limit }"
+							hx-target="#books-grid"
+							hx-include="#filter-form"
+							disabled?={ offset <= 0 }
+						>
+							← Previous
+						</button>
+						<span class="px-4 py-2" style="color: var(--text-secondary);">
+							Page { offset / limit + 1 }
+						</span>
+						<button
+							class="px-4 py-2 rounded-lg border disabled:opacity-50"
+							style="border-color: var(--border); color: var(--text-primary);"
+							hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset + limit }"
+							hx-target="#books-grid"
+							hx-include="#filter-form"
+							disabled?={ offset+limit >= count }
+						>
+							Next →
+						</button>
+					}
+				</div>
 			</div>
 			<!-- Save Filter Modal -->
 			<div