From 4bc7a842b5f6cb8dfa90b349b1147a12203373c8 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sun, 1 Feb 2026 00:52:45 -0500
Subject: [PATCH] feat(collections): add collection-specific search/filter
 (Limitation #3)

Add search and filter within a collection:

Frontend Implementation:
- Search input box in collection detail toolbar
- filterCollectionBooks() JavaScript function
- Real-time filtering of books by title and author
- Case-insensitive search
- Hides non-matching book cards
- Shows all books when search is cleared

How It Works:
- AllBooks array contains book data from server render
- On keyup, filters books by title and author
- Toggles display property on book cards
- Empty state has ID and is not hidden
- Pure client-side filtering (no server round-trips)

User Experience:
- Instant search results as user types
- No page reload required
- Works with existing multi-select for bulk operations
- Search box always visible in toolbar

Resolves Limitation #3: Collection-Specific Search
---
 templates/collections.templ    | 42 +++++++++++++++++++++++++++++++++-
 templates/collections_templ.go | 10 ++++----
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/templates/collections.templ b/templates/collections.templ
index b464f61..a17d48c 100644
--- a/templates/collections.templ
+++ b/templates/collections.templ
@@ -247,6 +247,12 @@ templ CollectionDetail(user User, collection CollectionDetailData, books []BookD
                     </span>
                 </div>
                 <div class="flex gap-3">
+                    <div class="flex-1 max-w-md">
+                        <input type="text" id="collection-search" placeholder="Search within collection..."
+                               onkeyup="filterCollectionBooks()"
+                               class="w-full px-4 py-2 border rounded-lg"
+                               style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
+                    </div>
                     <button id="bulk-remove-btn" onclick="removeSelectedBooks()" disabled
                             class="btn-danger px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">
                         🗑️ Remove Selected
@@ -259,7 +265,7 @@ templ CollectionDetail(user User, collection CollectionDetailData, books []BookD
 
             <div id="books-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                 if len(books) == 0 {
-                    <div class="col-span-full text-center py-16" style="color: var(--text-secondary)">No books in this collection yet.</div>
+                    <div id="empty-state" class="col-span-full text-center py-16" style="color: var(--text-secondary)">No books in this collection yet.</div>
                 }
 
                 for _, book := range books {
@@ -319,11 +325,45 @@ templ CollectionDetail(user User, collection CollectionDetailData, books []BookD
             let collectionId = '{ collection.ID }';
             let selectedBooks = new Set();
             let booksToRemove = new Set();
+            let allBooks = [
+                { range books }{
+                    {
+                        id: '{ book.MediaItemID }',
+                        title: '{ book.Title }',
+                        author: '{ book.Author }',
+                        cover: '{ book.CoverImagePath }'
+                    },
+                }{ end }
+            ];
 
             function backToCollections() {
                 window.location.href = '/collections';
             }
 
+            function filterCollectionBooks() {
+                const searchTerm = document.getElementById('collection-search').value.toLowerCase();
+                const booksContainer = document.getElementById('books-container');
+                const bookCards = booksContainer.children;
+
+                let visibleCount = 0;
+                for (let i = 0; i < bookCards.length; i++) {
+                    const card = bookCards[i];
+                    if (card.id === 'empty-state') continue;
+
+                    const title = card.querySelector('.font-semibold')?.textContent.toLowerCase() || '';
+                    const author = card.querySelector('.text-sm')?.textContent.toLowerCase() || '';
+
+                    const matches = title.includes(searchTerm) || author.includes(searchTerm);
+
+                    if (matches || searchTerm === '') {
+                        card.style.display = '';
+                        visibleCount++;
+                    } else {
+                        card.style.display = 'none';
+                    }
+                }
+            }
+
             function showAddBooksModal() {
                 document.getElementById('add-books-modal').classList.remove('hidden');
                 selectedBooks.clear();
diff --git a/templates/collections_templ.go b/templates/collections_templ.go
index cbbd6ef..2024bb3 100644
--- a/templates/collections_templ.go
+++ b/templates/collections_templ.go
@@ -181,12 +181,12 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</p></div></div></div><div class=\"mb-6 flex justify-between items-center\"><div class=\"flex items-center gap-4\"><h2 class=\"text-xl font-semibold\" style=\"color: var(--text-primary)\">Books in this Collection</h2><span id=\"selected-count\" class=\"hidden px-3 py-1 text-sm rounded\" style=\"background-color: var(--accent); color: var(--bg-primary);\">0 selected</span></div><div class=\"flex gap-3\"><button id=\"bulk-remove-btn\" onclick=\"removeSelectedBooks()\" disabled class=\"btn-danger px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed\">🗑️ Remove Selected</button> <button onclick=\"showAddBooksModal()\" class=\"btn-primary px-4 py-2 rounded-lg\">➕ Add Books</button></div></div><div id=\"books-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</p></div></div></div><div class=\"mb-6 flex justify-between items-center\"><div class=\"flex items-center gap-4\"><h2 class=\"text-xl font-semibold\" style=\"color: var(--text-primary)\">Books in this Collection</h2><span id=\"selected-count\" class=\"hidden px-3 py-1 text-sm rounded\" style=\"background-color: var(--accent); color: var(--bg-primary);\">0 selected</span></div><div class=\"flex gap-3\"><div class=\"flex-1 max-w-md\"><input type=\"text\" id=\"collection-search\" placeholder=\"Search within collection...\" onkeyup=\"filterCollectionBooks()\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><button id=\"bulk-remove-btn\" onclick=\"removeSelectedBooks()\" disabled class=\"btn-danger px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed\">🗑️ Remove Selected</button> <button onclick=\"showAddBooksModal()\" class=\"btn-primary px-4 py-2 rounded-lg\">➕ Add Books</button></div></div><div id=\"books-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(books) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"col-span-full text-center py-16\" style=\"color: var(--text-secondary)\">No books in this collection yet.</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div id=\"empty-state\" class=\"col-span-full text-center py-16\" style=\"color: var(--text-secondary)\">No books in this collection yet.</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -199,7 +199,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(book.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 278, Col: 131}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 284, Col: 131}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -217,7 +217,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(book.Author)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 280, Col: 108}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 286, Col: 108}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -233,7 +233,7 @@ func CollectionDetail(user User, collection CollectionDetailData, books []BookDa
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div></div><div id=\"add-books-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add Books to Collection</h2><button onclick=\"hideAddBooksModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><p class=\"mb-4\" style=\"color: var(--text-secondary)\">Search and select books to add to this collection.</p><div class=\"mb-4\"><input type=\"text\" id=\"book-search\" placeholder=\"Search books...\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div id=\"book-results\" class=\"max-h-64 overflow-y-auto mb-4\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddBooksModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" onclick=\"addSelectedBooks()\" class=\"btn-primary px-4 py-2 rounded-lg\">Add Selected Books</button></div></div></div><script>\n            let collectionId = '{ collection.ID }';\n            let selectedBooks = new Set();\n            let booksToRemove = new Set();\n\n            function backToCollections() {\n                window.location.href = '/collections';\n            }\n\n            function showAddBooksModal() {\n                document.getElementById('add-books-modal').classList.remove('hidden');\n                selectedBooks.clear();\n                document.getElementById('book-results').innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n            }\n\n            function hideAddBooksModal() {\n                document.getElementById('add-books-modal').classList.add('hidden');\n                document.getElementById('book-search').value = '';\n                document.getElementById('book-results').innerHTML = '';\n                selectedBooks.clear();\n            }\n\n            function searchBooks() {\n                const searchTerm = document.getElementById('book-search').value;\n                const container = document.getElementById('book-results');\n\n                if (searchTerm.length < 2) {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n                    return;\n                }\n\n                container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Searching...</p>';\n\n                fetch(`/api/media-items/search?q=${encodeURIComponent(searchTerm)}`, {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.data && result.data.length > 0) {\n                        let html = '<div class=\"space-y-2\">';\n                        result.data.slice(0, 50).forEach(book => {\n                            const isSelected = selectedBooks.has(book.media_item_id);\n                            const checkedAttr = isSelected ? 'checked' : '';\n                            const authorHtml = book.author ? `<div class=\"text-xs\" style=\"color: var(--text-secondary)\">${book.author}</div>` : '';\n                            html += `\n                                <div class=\"flex items-center gap-3 p-2 rounded cursor-pointer hover:opacity-80\"\n                                     style=\"background-color: var(--bg-primary);\"\n                                     onclick=\"toggleBookSelection('${book.media_item_id}')\">\n                                    <input type=\"checkbox\" ${checkedAttr} class=\"w-4 h-4\">\n                                    <img src=\"${book.cover_image_path || '/static/placeholder-book.svg'}\"\n                                         alt=\"Cover\" class=\"w-10 h-14 object-cover rounded\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-sm font-medium\" style=\"color: var(--text-primary)\">${book.title}</div>\n                                        ${authorHtml}\n                                    </div>\n                                </div>\n                            `;\n                        });\n                        html += '</div>';\n                        if (result.data.length > 50) {\n                            html += '<p class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Showing first 50 of ' + result.data.length + ' results</p>';\n                        }\n                        container.innerHTML = html;\n                    } else {\n                        container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">No books found</p>';\n                    }\n                })\n                .catch(error => {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--error)\">Failed to search books</p>';\n                });\n            }\n\n            function toggleBookSelection(bookId) {\n                if (selectedBooks.has(bookId)) {\n                    selectedBooks.delete(bookId);\n                } else {\n                    selectedBooks.add(bookId);\n                }\n                searchBooks();\n            }\n\n            function addSelectedBooks() {\n                if (selectedBooks.size === 0) {\n                    showToast('Please select at least one book', 'error');\n                    return;\n                }\n\n                const bookIds = Array.from(selectedBooks);\n\n                fetch(`/api/collections/${collectionId}/books`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast(`Added ${bookIds.length} book(s) to collection`, 'success');\n                        hideAddBooksModal();\n                        location.reload();\n                    } else {\n                        showToast('Failed to add books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to add books', 'error');\n                });\n            }\n\n            function removeBook(bookId) {\n                if (!confirm('Remove this book from the collection?')) return;\n\n                fetch(`/api/collections/${collectionId}/books/${bookId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Book removed from collection', 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove book', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function toggleBookForRemoval(bookId) {\n                if (booksToRemove.has(bookId)) {\n                    booksToRemove.delete(bookId);\n                } else {\n                    booksToRemove.add(bookId);\n                }\n                updateSelectedCount();\n            }\n\n            function updateSelectedCount() {\n                const count = booksToRemove.size;\n                const countSpan = document.getElementById('selected-count');\n                const removeBtn = document.getElementById('bulk-remove-btn');\n\n                if (count > 0) {\n                    countSpan.textContent = count + ' selected';\n                    countSpan.classList.remove('hidden');\n                    removeBtn.disabled = false;\n                } else {\n                    countSpan.classList.add('hidden');\n                    removeBtn.disabled = true;\n                }\n            }\n\n            function removeSelectedBooks() {\n                if (booksToRemove.size === 0) {\n                    showToast('No books selected', 'error');\n                    return;\n                }\n\n                if (!confirm(`Remove ${booksToRemove.size} book(s) from the collection?`)) return;\n\n                const bookIds = Array.from(booksToRemove);\n\n                fetch(`/api/collections/${collectionId}/books/bulk-remove`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.removed > 0) {\n                        showToast(`Removed ${result.removed} book(s) from collection`, 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove books', 'error');\n                });\n            }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function logout() {\n                localStorage.removeItem('token');\n                window.location.href = '/login';\n            }\n\n            renderBooks();\n        </script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div></div><div id=\"add-books-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add Books to Collection</h2><button onclick=\"hideAddBooksModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><p class=\"mb-4\" style=\"color: var(--text-secondary)\">Search and select books to add to this collection.</p><div class=\"mb-4\"><input type=\"text\" id=\"book-search\" placeholder=\"Search books...\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div id=\"book-results\" class=\"max-h-64 overflow-y-auto mb-4\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddBooksModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" onclick=\"addSelectedBooks()\" class=\"btn-primary px-4 py-2 rounded-lg\">Add Selected Books</button></div></div></div><script>\n            let collectionId = '{ collection.ID }';\n            let selectedBooks = new Set();\n            let booksToRemove = new Set();\n            let allBooks = [\n                { range books }{\n                    {\n                        id: '{ book.MediaItemID }',\n                        title: '{ book.Title }',\n                        author: '{ book.Author }',\n                        cover: '{ book.CoverImagePath }'\n                    },\n                }{ end }\n            ];\n\n            function backToCollections() {\n                window.location.href = '/collections';\n            }\n\n            function filterCollectionBooks() {\n                const searchTerm = document.getElementById('collection-search').value.toLowerCase();\n                const booksContainer = document.getElementById('books-container');\n                const bookCards = booksContainer.children;\n\n                let visibleCount = 0;\n                for (let i = 0; i < bookCards.length; i++) {\n                    const card = bookCards[i];\n                    if (card.id === 'empty-state') continue;\n\n                    const title = card.querySelector('.font-semibold')?.textContent.toLowerCase() || '';\n                    const author = card.querySelector('.text-sm')?.textContent.toLowerCase() || '';\n\n                    const matches = title.includes(searchTerm) || author.includes(searchTerm);\n\n                    if (matches || searchTerm === '') {\n                        card.style.display = '';\n                        visibleCount++;\n                    } else {\n                        card.style.display = 'none';\n                    }\n                }\n            }\n\n            function showAddBooksModal() {\n                document.getElementById('add-books-modal').classList.remove('hidden');\n                selectedBooks.clear();\n                document.getElementById('book-results').innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n            }\n\n            function hideAddBooksModal() {\n                document.getElementById('add-books-modal').classList.add('hidden');\n                document.getElementById('book-search').value = '';\n                document.getElementById('book-results').innerHTML = '';\n                selectedBooks.clear();\n            }\n\n            function searchBooks() {\n                const searchTerm = document.getElementById('book-search').value;\n                const container = document.getElementById('book-results');\n\n                if (searchTerm.length < 2) {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n                    return;\n                }\n\n                container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Searching...</p>';\n\n                fetch(`/api/media-items/search?q=${encodeURIComponent(searchTerm)}`, {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.data && result.data.length > 0) {\n                        let html = '<div class=\"space-y-2\">';\n                        result.data.slice(0, 50).forEach(book => {\n                            const isSelected = selectedBooks.has(book.media_item_id);\n                            const checkedAttr = isSelected ? 'checked' : '';\n                            const authorHtml = book.author ? `<div class=\"text-xs\" style=\"color: var(--text-secondary)\">${book.author}</div>` : '';\n                            html += `\n                                <div class=\"flex items-center gap-3 p-2 rounded cursor-pointer hover:opacity-80\"\n                                     style=\"background-color: var(--bg-primary);\"\n                                     onclick=\"toggleBookSelection('${book.media_item_id}')\">\n                                    <input type=\"checkbox\" ${checkedAttr} class=\"w-4 h-4\">\n                                    <img src=\"${book.cover_image_path || '/static/placeholder-book.svg'}\"\n                                         alt=\"Cover\" class=\"w-10 h-14 object-cover rounded\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-sm font-medium\" style=\"color: var(--text-primary)\">${book.title}</div>\n                                        ${authorHtml}\n                                    </div>\n                                </div>\n                            `;\n                        });\n                        html += '</div>';\n                        if (result.data.length > 50) {\n                            html += '<p class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Showing first 50 of ' + result.data.length + ' results</p>';\n                        }\n                        container.innerHTML = html;\n                    } else {\n                        container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">No books found</p>';\n                    }\n                })\n                .catch(error => {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--error)\">Failed to search books</p>';\n                });\n            }\n\n            function toggleBookSelection(bookId) {\n                if (selectedBooks.has(bookId)) {\n                    selectedBooks.delete(bookId);\n                } else {\n                    selectedBooks.add(bookId);\n                }\n                searchBooks();\n            }\n\n            function addSelectedBooks() {\n                if (selectedBooks.size === 0) {\n                    showToast('Please select at least one book', 'error');\n                    return;\n                }\n\n                const bookIds = Array.from(selectedBooks);\n\n                fetch(`/api/collections/${collectionId}/books`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast(`Added ${bookIds.length} book(s) to collection`, 'success');\n                        hideAddBooksModal();\n                        location.reload();\n                    } else {\n                        showToast('Failed to add books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to add books', 'error');\n                });\n            }\n\n            function removeBook(bookId) {\n                if (!confirm('Remove this book from the collection?')) return;\n\n                fetch(`/api/collections/${collectionId}/books/${bookId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Book removed from collection', 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove book', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function toggleBookForRemoval(bookId) {\n                if (booksToRemove.has(bookId)) {\n                    booksToRemove.delete(bookId);\n                } else {\n                    booksToRemove.add(bookId);\n                }\n                updateSelectedCount();\n            }\n\n            function updateSelectedCount() {\n                const count = booksToRemove.size;\n                const countSpan = document.getElementById('selected-count');\n                const removeBtn = document.getElementById('bulk-remove-btn');\n\n                if (count > 0) {\n                    countSpan.textContent = count + ' selected';\n                    countSpan.classList.remove('hidden');\n                    removeBtn.disabled = false;\n                } else {\n                    countSpan.classList.add('hidden');\n                    removeBtn.disabled = true;\n                }\n            }\n\n            function removeSelectedBooks() {\n                if (booksToRemove.size === 0) {\n                    showToast('No books selected', 'error');\n                    return;\n                }\n\n                if (!confirm(`Remove ${booksToRemove.size} book(s) from the collection?`)) return;\n\n                const bookIds = Array.from(booksToRemove);\n\n                fetch(`/api/collections/${collectionId}/books/bulk-remove`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.removed > 0) {\n                        showToast(`Removed ${result.removed} book(s) from collection`, 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove books', 'error');\n                });\n            }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function logout() {\n                localStorage.removeItem('token');\n                window.location.href = '/login';\n            }\n\n            renderBooks();\n        </script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}