Error fixing and debugging implementation.

- Implement /student_card_class_barcode_download route to filter student cards by class
- Dynamically extract unique class names from the database for frontend selection
- Update student_cards_admin.html to replace the text input with a class selection dropdown

Web/modules/database/items.py

@@ -25,6 +25,7 @@ import datetime
 import Web.modules.database.settings as cfg
 from Web.modules.database.settings import MongoClient
 import Web.modules.inventarsystem.data_protection as dp
+import logging
 
 
 def is_library_item(item):
@@ -1292,4 +1293,137 @@ def sync_group_codes(primary_obj_id, base_code, individual_codes_list):
         return True
     except Exception as e:
         print(f"Error syncing group codes: {e}")
-        return False
+        return False
+
+
+logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
+
+
+def cleanup_orphaned_images(fs, dry_run=True):
+    """
+    Finds images in GridFS that are no longer referenced by any item
+    and optionally deletes them.
+
+    Supported item fields:
+        - book_cover_image
+        - image
+        - images
+
+    The fields are expected to contain GridFS file ObjectIds.
+
+    :param fs: GridFS instance, e.g. gridfs.GridFS(db)
+    :param dry_run: If True, only reports what would be deleted.
+                    If False, actually deletes the files.
+    """
+
+    logging.info("Starte Cleanup-Skript...")
+
+    client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
+
+    try:
+        db = client[cfg.MONGODB_DB]
+        items_collection = db["items"]
+
+        referenced_files = set()
+
+        for item in items_collection.find(
+            {},
+            {
+                "Images": 1
+            }
+        ):
+            images = item.get("Images")
+
+            if isinstance(images, list):
+                for img in images:
+                    if img:
+                        referenced_files.add(img)
+
+        referenced_files.discard(None)
+
+        logging.info(
+            f"{len(referenced_files)} referenzierte GridFS-Dateien gefunden."
+        )
+
+        orphaned_files = []
+
+        for grid_file in fs.find():
+            file_id = grid_file._id
+            filename = grid_file.filename or ""
+
+            if not filename.lower().endswith(
+                (".jpg", ".jpeg", ".png", ".gif", ".webp")
+            ):
+                continue
+
+            if file_id not in referenced_files:
+                orphaned_files.append(
+                    {
+                        "_id": file_id,
+                        "filename": filename,
+                        "upload_date": grid_file.upload_date,
+                    }
+                )
+
+        logging.info(
+            f"Gefundene verwaiste Bilder: {len(orphaned_files)}"
+        )
+
+        if dry_run:
+            logging.info(
+                "--- DRY RUN AKTIV - Es wird nichts gelöscht ---"
+            )
+
+            for file in orphaned_files:
+                logging.info(
+                    f"Würde löschen: "
+                    f"{file['filename']} "
+                    f"(ID: {file['_id']}, "
+                    f"Hochgeladen: {file['upload_date']})"
+                )
+
+            logging.info(
+                "--- Setze dry_run=False, um physisch zu löschen ---"
+            )
+
+        else:
+            logging.warning("--- LÖSCHVORGANG AKTIV ---")
+
+            deleted_count = 0
+            failed_count = 0
+
+            for file in orphaned_files:
+                try:
+                    fs.delete(file["_id"])
+
+                    deleted_count += 1
+
+                    logging.info(
+                        f"Gelöscht: {file['filename']} "
+                        f"(ID: {file['_id']})"
+                    )
+
+                except Exception as e:
+                    failed_count += 1
+
+                    logging.error(
+                        f"Fehler beim Löschen von "
+                        f"{file['filename']} "
+                        f"(ID: {file['_id']}): {e}"
+                    )
+
+            logging.info(
+                f"Cleanup beendet. "
+                f"{deleted_count} Bilder gelöscht, "
+                f"{failed_count} Fehler."
+            )
+
+        return {
+            "status": "success",
+            "referenced_count": len(referenced_files),
+            "orphaned_count": len(orphaned_files),
+            "dry_run": dry_run,
+        }
+
+    finally:
+        client.close()

Web/modules/database/user.py

@@ -211,6 +211,7 @@ PERMISSION_PRESETS = {
         },
         'pages': {
             'home': True,
+            'home_admin': True,
             'tutorial_page': True,
             'my_borrowed_items': True,
             'notifications_view': True,
@@ -369,10 +370,10 @@ def update_user_permissions(username, preset_key, action_permissions=None, page_
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['users']
-    result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': update_data})
+    result = users.update_one({'Username': username}, {'$set': update_data})
 
     if result.matched_count == 0:
-        result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': update_data})
+        result = users.update_one({'username': username}, {'$set': update_data})
 
     client.close()
     return result.matched_count > 0
@@ -384,7 +385,7 @@ def get_favorites(username):
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['users']
-    user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
+    user = users.find_one({'Username': username}) or users.find_one({'username': username})
     client.close()
     if not user:
         return []
@@ -399,7 +400,7 @@ def add_favorite(username, item_id):
         db = _get_tenant_db(client)
         users = db['users']
         users.update_one(
-            {'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]},
+            {'$or': [{'Username': username}, {'username': username}]},
             {'$addToSet': {'favorites': ObjectId(item_id)}}
         )
         client.close()
@@ -414,7 +415,7 @@ def remove_favorite(username, item_id):
         db = _get_tenant_db(client)
         users = db['users']
         users.update_one(
-            {'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]},
+            {'$or': [{'Username': username}, {'username': username}]},
             {'$pull': {'favorites': ObjectId(item_id)}}
         )
         client.close()
@@ -496,7 +497,7 @@ def check_nm_pwd(username, password):
         db = client[db_name]
         users = db['users']
 
-        query = {'$or': [{'Username': dp.encrypt_text(username)}, {'username': dp.encrypt_text(username)}]}
+        query = {'$or': [{'Username': username}, {'username': username}]}
         user_record = users.find_one(query)
 
         if user_record is None:
@@ -507,8 +508,6 @@ def check_nm_pwd(username, password):
                     default_users = client[cfg.MONGODB_DB]['users']
                     user_record_fallback = default_users.find_one(
                         {'$or': [
-                            {'Username': dp.encrypt_text(username)},
-                            {'username': dp.encrypt_text(username)},
                             {'Username': username},
                             {'username': username},
                         ]}
@@ -711,9 +710,9 @@ def make_admin(username):
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['users']
-    result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': {'Admin': True}})
+    result = users.update_one({'Username': username}, {'$set': {'Admin': True}})
     if result.matched_count == 0:
-        result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': {'Admin': True}})
+        result = users.update_one({'username': username}, {'$set': {'Admin': True}})
     client.close()
     return result.matched_count > 0
 
@@ -723,9 +722,9 @@ def remove_admin(username):
     client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
     db = _get_tenant_db(client)
     users = db['users']
-    result = users.update_one({'Username': dp.encrypt_text(username)}, {'$set': {'Admin': False}})
+    result = users.update_one({'Username': username}, {'$set': {'Admin': False}})
     if result.matched_count == 0:
-        result = users.update_one({'username': dp.encrypt_text(username)}, {'$set': {'Admin': False}})
+        result = users.update_one({'username': username}, {'$set': {'Admin': False}})
     client.close()
     return result.matched_count > 0
 
@@ -737,7 +736,7 @@ def get_user(username):
         def find_in_db(database_name):
             db = client[database_name]
             users = db['users']
-            return users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)}) or users.find_one({'username': username}) or users.find_one({'Username': username})
+            return users.find_one({'Username': username}) or users.find_one({'username': username}) or users.find_one({'username': username}) or users.find_one({'Username': username})
 
         tenant_db, tenant_id = _resolve_request_tenant_db()
         if tenant_db:
@@ -773,12 +772,12 @@ def update_active_ausleihung(username, id_item, ausleihung):
     users = db['users']
 
     result = users.update_one(
-        {'Username': dp.encrypt_text(username)},
+        {'Username': username},
         {'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
     )
     if result.matched_count == 0:
         users.update_one(
-            {'username': dp.encrypt_text(username)},
+            {'username': username},
             {'$set': {'active_ausleihung': {'Item': id_item, 'Ausleihung': ausleihung}}}
         )
     client.close()
@@ -791,7 +790,7 @@ def get_active_ausleihung(username):
     db = _get_tenant_db(client)
     users = db['users']
 
-    user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
+    user = users.find_one({'Username': username}) or users.find_one({'username': username})
     client.close()
 
     if not user:
@@ -806,7 +805,7 @@ def has_active_borrowing(username):
         db = _get_tenant_db(client)
         users = db['users']
 
-        user = users.find_one({'username': dp.encrypt_text(username)}) or users.find_one({'Username': dp.encrypt_text(username)})
+        user = users.find_one({'username': username}) or users.find_one({'Username': username})
         client.close()
 
         if not user:
@@ -823,9 +822,9 @@ def delete_user(username):
     db = _get_tenant_db(client)
     users = db['users']
 
-    result = users.delete_one({'username': dp.encrypt_text(username)})
+    result = users.delete_one({'username': username})
     if result.deleted_count == 0:
-        result = users.delete_one({'Username': dp.encrypt_text(username)})
+        result = users.delete_one({'Username': username})
 
     client.close()
     return result.deleted_count > 0
@@ -840,9 +839,9 @@ def update_active_borrowing(username, item_id, status):
 
         update_data = {'$set': {'active_borrowing': status, 'borrowed_item': item_id if status else None}}
 
-        result = users.update_one({'username': dp.encrypt_text(username)}, update_data)
+        result = users.update_one({'username': username}, update_data)
         if result.matched_count == 0:
-            result = users.update_one({'Username': dp.encrypt_text(username)}, update_data)
+            result = users.update_one({'Username': username}, update_data)
 
         client.close()
         return result.modified_count > 0
@@ -856,7 +855,7 @@ def get_name(username):
     db = _get_tenant_db(client)
     users = db['users']
 
-    user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
+    user = users.find_one({'Username': username}) or users.find_one({'username': username})
     client.close()
 
     if not user or not user.get("name"):
@@ -871,7 +870,7 @@ def get_last_name(username):
     db = _get_tenant_db(client)
     users = db['users']
 
-    user = users.find_one({'Username': dp.encrypt_text(username)}) or users.find_one({'username': dp.encrypt_text(username)})
+    user = users.find_one({'Username': username}) or users.find_one({'username': username})
     client.close()
 
     if not user or not user.get("last_name"):
@@ -906,12 +905,12 @@ def update_password(username, new_password):
         hashed_password = hashing(new_password)
 
         result = users.update_one(
-            {'Username': dp.encrypt_text(username)},
+            {'Username': username},
             {'$set': {'Password': hashed_password}}
         )
         if result.matched_count == 0:
             result = users.update_one(
-                {'username': dp.encrypt_text(username)},
+                {'username': username},
                 {'$set': {'Password': hashed_password}}
             )
 
@@ -933,12 +932,12 @@ def update_user_name(username, name, last_name):
         safe_last_name = dp.encrypt_text(last_name.strip()) if last_name else ''
 
         result = users.update_one(
-            {'Username': dp.encrypt_text(username)},
+            {'Username': username},
             {'$set': {'name': safe_name, 'last_name': safe_last_name}}
         )
         if result.matched_count == 0:
             result = users.update_one(
-                {'username': dp.encrypt_text(username)},
+                {'username': username},
                 {'$set': {'name': safe_name, 'last_name': safe_last_name}}
             )
 

Web/templates/library.html

@@ -1,752 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Bibliothek - {{ APP_VERSION }}{% endblock %}
-
-{% block content %}
-<div class="content-container">
-    <!-- Header Section -->
-    <div class="header-section">
-        <div class="header-title-group">
-            <h1>📚 Bibliothek</h1>
-            <p class="subtitle">Bücher, CDs und weitere Medien</p>
-        </div>
-    </div>
-
-    <!-- Search & Filter Section -->
-    <div class="search-filter-section">
-        <input type="text" id="searchInput" placeholder="Nach Titel, Autor, ISBN suchen..." class="search-input">
-        
-        <div class="filter-group" id="filterGroup">
-            <button class="filter-btn" id="filterBtn" aria-expanded="false" aria-label="Filter öffnen">
-                🔍 Filter <span class="filter-arrow">▼</span>
-            </button>
-            <div class="filter-dropdown" id="filterDropdown" style="display: none;">
-                <div class="filter-section">
-                    <h4>Medientyp</h4>
-                    <div class="filter-options">
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="book"> Buch</label>
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="cd"> CD/DVD</label>
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="other"> Sonstige</label>
-                    </div>
-                </div>
-                <div class="filter-section">
-                    <h4>Status</h4>
-                    <div class="filter-options">
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="available"> Verfügbar</label>
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="borrowed"> Ausgeliehen</label>
-                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="reserved"> Reserviert</label>
-                    </div>
-                </div>
-                <button id="clearFiltersBtn" class="button">Filter zurücksetzen</button>
-            </div>
-        </div>
-
-        <!-- Barcode Scanner -->
-        <button id="scannerBtn" class="scan-button" aria-expanded="false" aria-label="Scanner öffnen">
-            📱 Scanner <span class="scanner-arrow">▼</span>
-        </button>
-    </div>
-
-    <!-- Scanner Panel -->
-    <div id="qrContainer" class="qr-container" style="display: none;">
-        <div id="qr-reader" style="width: auto; height: 300px;"></div>
-        <span id="qr-result" style="display: none;"></span>
-    </div>
-
-    <!-- Table Header (only in table mode) -->
-    <div class="library-table-wrapper">
-    <div class="table-header" id="tableHeader" style="display: none;">
-        <div class="table-row">
-            <div class="table-cell title-cell">Titel</div>
-            <div class="table-cell author-cell">Autor/Künstler</div>
-            <div class="table-cell isbn-cell">ISBN/Code</div>
-            <div class="table-cell type-cell">Typ</div>
-            <div class="table-cell status-cell">Status</div>
-            <div class="table-cell actions-cell">Aktionen</div>
-        </div>
-    </div>
-
-    <!-- Items Container -->
-    <div id="itemsContainer" class="items-container">
-        {% if library_items %}
-            {% for item in library_items %}
-                <div class="item-card library-item" data-item-id="{{ item._id }}" data-type="{{ item.get('ItemType', 'book') }}" data-status="{{ 'borrowed' if item.get('Verfuegbar') == False else 'available' }}">
-                    <!-- Card Mode View -->
-                    <div class="item-content card-mode">
-                        <div class="item-image-wrapper">
-                            {% if item.get('Image') %}
-                                <img src="/uploads/{{ item.Image }}" alt="{{ item.Name }}" class="item-image">
-                            {% else %}
-                                <div class="placeholder-image">📚</div>
-                            {% endif %}
-                        </div>
-                        
-                        <div class="item-details">
-                            <h3 class="item-name">{{ item.Name }}</h3>
-                            
-                            {% if item.get('Author') %}
-                                <p class="item-author">Von: {{ item.Author }}</p>
-                            {% endif %}
-                            
-                            {% if item.get('ISBN') %}
-                                <p class="item-isbn">ISBN: {{ item.ISBN }}</p>
-                            {% endif %}
-                            
-                            <div class="item-meta">
-                                <span class="item-type">{{ item.get('ItemType', 'Medium') }}</span>
-                                <span class="item-status {% if item.get('Verfuegbar') == False %}borrowed{% else %}available{% endif %}">
-                                    {% if item.get('Verfuegbar') == False %}Ausgeliehen{% else %}Verfügbar{% endif %}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Table Mode View -->
-                    <div class="item-content table-mode" style="display: none;">
-                        <div class="table-row">
-                            <div class="table-cell title-cell">
-                                <span class="descriptor">Titel:</span>
-                                <span class="value">{{ item.Name }}</span>
-                            </div>
-                            <div class="table-cell author-cell">
-                                <span class="descriptor">Autor:</span>
-                                <span class="value">{{ item.get('Author', '—') }}</span>
-                            </div>
-                            <div class="table-cell isbn-cell">
-                                <span class="descriptor">ISBN:</span>
-                                <span class="value">{{ item.get('ISBN', '—') }}</span>
-                            </div>
-                            <div class="table-cell type-cell">
-                                <span class="descriptor">Typ:</span>
-                                <span class="value">{{ item.get('ItemType', 'Medium') }}</span>
-                            </div>
-                            <div class="table-cell status-cell">
-                                <span class="descriptor">Status:</span>
-                                <span class="value {% if item.get('Verfuegbar') == False %}borrowed{% else %}available{% endif %}">
-                                    {% if item.get('Verfuegbar') == False %}Ausgeliehen{% else %}Verfügbar{% endif %}
-                                </span>
-                            </div>
-                            <div class="table-cell actions-cell">
-                                <button class="action-button details-btn" data-item-id="{{ item._id }}">Details</button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Action Buttons (Card Mode) -->
-                    <div class="item-actions card-mode" style="display: flex;">
-                        <button class="action-button details-btn" data-item-id="{{ item._id }}">Details</button>
-                        {% if item.get('Verfuegbar') == True %}
-                            <button class="action-button borrow-btn" data-item-id="{{ item._id }}">Ausleihen</button>
-                        {% else %}
-                            <button class="action-button return-btn" data-item-id="{{ item._id }}" disabled>Ausgeliehen</button>
-                        {% endif %}
-                    </div>
-                </div>
-            {% endfor %}
-        {% else %}
-            <div class="empty-state">
-                <p>Keine Bibliotheks-Medien gefunden</p>
-            </div>
-        {% endif %}
-    </div>
-    </div>
-</div>
-
-<!-- Detail Modal -->
-<div id="detailModal" class="modal" style="display: none;">
-    <div class="modal-content">
-        <button class="modal-close" aria-label="Schließen">✕</button>
-        
-        <div class="modal-body" id="modalBody">
-            <!-- Filled by JavaScript -->
-        </div>
-    </div>
-</div>
-
-<!-- Borrow Modal -->
-<div id="borrowModal" class="modal" style="display: none;">
-    <div class="modal-content">
-        <h2>Ausleihen</h2>
-        <form id="borrowForm">
-            <input type="hidden" id="borrowItemId" name="item_id">
-            
-            <div class="form-group">
-                <label for="studentIdInput">Schülerausweis-ID (optional):</label>
-                <input type="text" id="studentIdInput" name="student_id" placeholder="Ausweis scannen oder eingeben" class="form-input">
-            </div>
-            
-            <div class="form-group">
-                <label for="borrowDaysInput">Ausleih-Dauer (Tage):</label>
-                <input type="number" id="borrowDaysInput" name="borrow_days" min="1" max="365" class="form-input" value="14">
-            </div>
-            
-            <div class="form-actions">
-                <button type="submit" class="button primary-button">Ausleihen</button>
-                <button type="button" class="button cancel-button" onclick="document.getElementById('borrowModal').style.display='none'">Abbrechen</button>
-            </div>
-        </form>
-    </div>
-</div>
-<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
-<script>
-// View mode persistence
-const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
-const MOBILE_LIBRARY_MAX_WIDTH = 900;
-const MOBILE_LIBRARY_MIN_ITEMS = 24;
-
-function isMobileViewport() {
-    return window.matchMedia(`(max-width: ${MOBILE_LIBRARY_MAX_WIDTH}px)`).matches;
-}
-
-function setViewMode(mode) {
-    localStorage.setItem(LIBRARY_VIEW_MODE_KEY, mode);
-    const container = document.getElementById('itemsContainer');
-    const tableHeader = document.getElementById('tableHeader');
-    const renderedItems = Array.from(container.querySelectorAll('.item-card'));
-    const virtualizationState = window.mobileLibraryVirtualizationState || null;
-    const detachedItems = virtualizationState && virtualizationState.active && Array.isArray(virtualizationState.items)
-        ? virtualizationState.items.filter(item => !container.contains(item))
-        : [];
-    const items = [...renderedItems, ...detachedItems.filter(item => !container.contains(item))];
-    
-    items.forEach(item => {
-        const cardContent = item.querySelector('.item-content.card-mode');
-        const cardActions = item.querySelector('.item-actions.card-mode');
-        const tableContent = item.querySelector('.item-content.table-mode');
-        
-        if (mode === 'table') {
-            if (cardContent) cardContent.style.display = 'none';
-            if (cardActions) cardActions.style.display = 'none';
-            if (tableContent) tableContent.style.display = 'block';
-        } else {
-            if (cardContent) cardContent.style.display = 'flex';
-            if (cardActions) cardActions.style.display = 'flex';
-            if (tableContent) tableContent.style.display = 'none';
-        }
-    });
-    
-    tableHeader.style.display = mode === 'table' ? 'block' : 'none';
-    
-    document.getElementById('viewModeToggle').classList.toggle('open', mode === 'table');
-}
-
-function initMobileWindowedLibraryLoading() {
-    const container = document.getElementById('itemsContainer');
-    if (!container) {
-        return;
-    }
-
-    if (!window.mobileLibraryVirtualizationState) {
-        window.mobileLibraryVirtualizationState = {
-            active: false,
-            items: [],
-            topSpacer: null,
-            bottomSpacer: null,
-            averageItemHeight: Math.max(Math.round(window.innerHeight * 0.35), 230),
-            lastStart: -1,
-            lastEnd: -1,
-            framePending: false,
-            scrollListener: null,
-            resizeListener: null,
-            initialized: false
-        };
-    }
-    const state = window.mobileLibraryVirtualizationState;
-
-    function restoreAllImages() {
-        state.items.forEach(item => {
-            const image = item.querySelector('img.item-image');
-            if (!image) {
-                return;
-            }
-
-            const originalSrc = image.dataset.mobileSrc || '';
-            if (!image.getAttribute('src') && originalSrc) {
-                image.setAttribute('src', originalSrc);
-            }
-        });
-    }
-
-    function updateImageMemory(startIndex, endIndex) {
-        const imageBuffer = 4;
-        state.items.forEach((item, index) => {
-            const image = item.querySelector('img.item-image');
-            if (!image) {
-                return;
-            }
-
-            if (!image.dataset.mobileSrc) {
-                image.dataset.mobileSrc = image.getAttribute('src') || '';
-            }
-            image.loading = 'lazy';
-            image.decoding = 'async';
-
-            const shouldKeepLoaded = index >= startIndex - imageBuffer && index < endIndex + imageBuffer;
-            if (shouldKeepLoaded) {
-                if (!image.getAttribute('src') && image.dataset.mobileSrc) {
-                    image.setAttribute('src', image.dataset.mobileSrc);
-                }
-                return;
-            }
-
-            if (image.getAttribute('src')) {
-                image.removeAttribute('src');
-            }
-        });
-    }
-
-    function renderVisibleWindow() {
-        if (!state.active || !state.topSpacer || !state.bottomSpacer) {
-            return;
-        }
-
-        const viewportHeight = window.innerHeight || 800;
-        const scrollTop = window.scrollY || window.pageYOffset || 0;
-        const renderBuffer = viewportHeight * 1.5;
-
-        let startIndex = Math.max(0, Math.floor((scrollTop - renderBuffer) / state.averageItemHeight));
-        let endIndex = Math.min(state.items.length, Math.ceil((scrollTop + viewportHeight + renderBuffer) / state.averageItemHeight));
-
-        if (endIndex - startIndex < 14) {
-            endIndex = Math.min(state.items.length, startIndex + 14);
-        }
-
-        if (startIndex === state.lastStart && endIndex === state.lastEnd) {
-            return;
-        }
-
-        state.lastStart = startIndex;
-        state.lastEnd = endIndex;
-
-        while (state.topSpacer.nextSibling && state.topSpacer.nextSibling !== state.bottomSpacer) {
-            state.topSpacer.nextSibling.remove();
-        }
-
-        const fragment = document.createDocumentFragment();
-        for (let index = startIndex; index < endIndex; index += 1) {
-            fragment.appendChild(state.items[index]);
-        }
-        container.insertBefore(fragment, state.bottomSpacer);
-
-        let measuredHeightSum = 0;
-        let measuredCount = 0;
-        for (let index = startIndex; index < endIndex; index += 1) {
-            const height = state.items[index].getBoundingClientRect().height;
-            if (height > 0) {
-                measuredHeightSum += height;
-                measuredCount += 1;
-            }
-        }
-
-        if (measuredCount > 0) {
-            const measuredAverage = measuredHeightSum / measuredCount;
-            state.averageItemHeight = Math.round((state.averageItemHeight * 3 + measuredAverage) / 4);
-        }
-
-        state.topSpacer.style.height = `${Math.max(0, startIndex * state.averageItemHeight)}px`;
-        state.bottomSpacer.style.height = `${Math.max(0, (state.items.length - endIndex) * state.averageItemHeight)}px`;
-        updateImageMemory(startIndex, endIndex);
-    }
-
-    function scheduleWindowRender() {
-        if (!state.active || state.framePending) {
-            return;
-        }
-        state.framePending = true;
-        requestAnimationFrame(() => {
-            state.framePending = false;
-            renderVisibleWindow();
-        });
-    }
-
-    function activateVirtualization() {
-        if (state.active) {
-            return;
-        }
-
-        if (!Array.isArray(state.items) || state.items.length === 0) {
-            state.items = Array.from(container.querySelectorAll('.library-item'));
-        }
-        if (state.items.length <= MOBILE_LIBRARY_MIN_ITEMS) {
-            return;
-        }
-
-        state.topSpacer = document.createElement('div');
-        state.topSpacer.className = 'mobile-window-spacer top';
-        state.bottomSpacer = document.createElement('div');
-        state.bottomSpacer.className = 'mobile-window-spacer bottom';
-
-        state.items.forEach(item => item.remove());
-        container.appendChild(state.topSpacer);
-        container.appendChild(state.bottomSpacer);
-
-        state.lastStart = -1;
-        state.lastEnd = -1;
-        state.framePending = false;
-        state.active = true;
-
-        if (!state.scrollListener) {
-            state.scrollListener = () => scheduleWindowRender();
-            window.addEventListener('scroll', state.scrollListener, { passive: true });
-        }
-
-        scheduleWindowRender();
-    }
-
-    function deactivateVirtualization() {
-        if (!state.active) {
-            if (!Array.isArray(state.items) || state.items.length === 0) {
-                state.items = Array.from(container.querySelectorAll('.library-item'));
-            }
-            return;
-        }
-
-        if (state.scrollListener) {
-            window.removeEventListener('scroll', state.scrollListener);
-            state.scrollListener = null;
-        }
-
-        if (state.topSpacer && state.topSpacer.parentNode === container) {
-            state.topSpacer.remove();
-        }
-        if (state.bottomSpacer && state.bottomSpacer.parentNode === container) {
-            state.bottomSpacer.remove();
-        }
-
-        const fragment = document.createDocumentFragment();
-        state.items.forEach(item => fragment.appendChild(item));
-        container.appendChild(fragment);
-
-        restoreAllImages();
-
-        state.topSpacer = null;
-        state.bottomSpacer = null;
-        state.lastStart = -1;
-        state.lastEnd = -1;
-        state.framePending = false;
-        state.active = false;
-
-        const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
-        setViewMode(currentMode);
-    }
-
-    function syncVirtualizationWithViewport() {
-        if (!Array.isArray(state.items) || state.items.length === 0) {
-            state.items = Array.from(container.querySelectorAll('.library-item'));
-        }
-
-        const shouldVirtualize = isMobileViewport() && state.items.length > MOBILE_LIBRARY_MIN_ITEMS;
-        if (shouldVirtualize) {
-            activateVirtualization();
-            scheduleWindowRender();
-        } else {
-            deactivateVirtualization();
-        }
-    }
-
-    if (!state.initialized) {
-        state.resizeListener = () => syncVirtualizationWithViewport();
-        window.addEventListener('resize', state.resizeListener, { passive: true });
-        state.initialized = true;
-    }
-
-    syncVirtualizationWithViewport();
-}
-
-// Initialize view mode
-document.addEventListener('DOMContentLoaded', function() {
-    const savedMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
-    setViewMode(savedMode);
-    
-    document.getElementById('viewModeToggle').addEventListener('click', function() {
-        const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
-        const newMode = currentMode === 'card' ? 'table' : 'card';
-        setViewMode(newMode);
-    });
-    
-    // Details button handlers
-    document.querySelectorAll('.details-btn').forEach(btn => {
-        btn.addEventListener('click', function(e) {
-            e.preventDefault();
-            const itemId = this.dataset.itemId;
-            fetch(`/get_item_details/${itemId}`)
-                .then(r => r.json())
-                .then(data => {
-                    if (data.success) {
-                        displayLibraryItemDetail(data.item);
-                        document.getElementById('detailModal').style.display = 'flex';
-                    }
-                });
-        });
-    });
-    
-    // Borrow button handlers
-    document.querySelectorAll('.borrow-btn').forEach(btn => {
-        btn.addEventListener('click', function() {
-            document.getElementById('borrowItemId').value = this.dataset.itemId;
-            document.getElementById('borrowModal').style.display = 'flex';
-        });
-    });
-    
-    // Borrow form submit
-    document.getElementById('borrowForm').addEventListener('submit', function(e) {
-        e.preventDefault();
-        const itemId = document.getElementById('borrowItemId').value;
-        const studentId = document.getElementById('studentIdInput').value || null;
-        const borrowDays = document.getElementById('borrowDaysInput').value || 14;
-        
-        fetch('/borrow_item', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                item_id: itemId,
-                student_id: studentId,
-                borrow_days: borrowDays
-            })
-        })
-        .then(r => r.json())
-        .then(data => {
-            if (data.success) {
-                alert('Erfolgreich ausgeliehen!');
-                location.reload();
-            } else {
-                alert('Fehler: ' + data.message);
-            }
-        });
-    });
-    
-    // Modal close handlers
-    document.querySelectorAll('.modal-close').forEach(btn => {
-        btn.addEventListener('click', function() {
-            this.closest('.modal').style.display = 'none';
-        });
-    });
-    
-    // Close modals on outside click
-    document.querySelectorAll('.modal').forEach(modal => {
-        modal.addEventListener('click', function(e) {
-            if (e.target === this) this.style.display = 'none';
-        });
-    });
-
-    initMobileWindowedLibraryLoading();
-});
-
-function displayLibraryItemDetail(item) {
-    const modalBody = document.getElementById('modalBody');
-    const returnBtn = item.Verfuegbar === false ? `<button class="action-button return-btn" onclick="returnItem('${item._id}')">Zurückgeben</button>` : '';
-    const borrowBtn = item.Verfuegbar === true ? `<button class="action-button borrow-btn" onclick="openBorrowModal('${item._id}')">Ausleihen</button>` : '';
-    
-    modalBody.innerHTML = `
-        <h2>${item.Name}</h2>
-        <div class="detail-content">
-            ${item.Image ? `<img src="/uploads/${item.Image}" alt="${item.Name}" style="max-width: 200px; margin-bottom: 20px;">` : ''}
-            <p><strong>Autor:</strong> ${item.Author || '—'}</p>
-            <p><strong>ISBN:</strong> ${item.ISBN || '—'}</p>
-            <p><strong>Typ:</strong> ${item.ItemType || 'Medium'}</p>
-            <p><strong>Status:</strong> ${item.Verfuegbar === false ? 'Ausgeliehen' : 'Verfügbar'}</p>
-            ${item.User ? `<p><strong>Ausgeliehen von:</strong> ${item.User}</p>` : ''}
-            ${item.Beschreibung ? `<p><strong>Beschreibung:</strong> ${item.Beschreibung}</p>` : ''}
-            <div class="modal-actions">
-                ${borrowBtn}
-                ${returnBtn}
-            </div>
-        </div>
-    `;
-}
-
-function openBorrowModal(itemId) {
-    document.getElementById('borrowItemId').value = itemId;
-    document.getElementById('borrowModal').style.display = 'flex';
-    document.getElementById('detailModal').style.display = 'none';
-}
-
-function returnItem(itemId) {
-    if (confirm('Wirklich zurückgeben?')) {
-        fetch('/return_item', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({item_id: itemId})
-        })
-        .then(r => r.json())
-        .then(data => {
-            if (data.success) {
-                alert('Erfolgreich zurückgegeben!');
-                location.reload();
-            }
-        });
-    }
-}
-
-// Filter dropdown toggle with auto-close
-function closeAllFilters() {
-    document.querySelectorAll('.filter-dropdown').forEach(d => d.style.display = 'none');
-    document.getElementById('filterBtn').setAttribute('aria-expanded', 'false');
-    document.getElementById('filterBtn').classList.remove('open');
-}
-
-document.getElementById('filterBtn').addEventListener('click', function(e) {
-    e.stopPropagation();
-    const dropdown = document.getElementById('filterDropdown');
-    const isOpen = dropdown.style.display !== 'none';
-    closeAllFilters();
-    if (!isOpen) {
-        dropdown.style.display = 'block';
-        this.setAttribute('aria-expanded', 'true');
-        this.classList.add('open');
-    }
-});
-
-document.addEventListener('click', closeAllFilters);
-document.getElementById('filterDropdown').addEventListener('click', e => e.stopPropagation());
-
-// Clear filters
-document.getElementById('clearFiltersBtn').addEventListener('click', function() {
-    document.querySelectorAll('.filter-checkbox').forEach(c => c.checked = false);
-    closeAllFilters();
-});
-
-// Scanner toggle
-// Scanner state tracking
-let isScanning = false; 
-
-document.getElementById('scannerBtn').addEventListener('click', function(e) {
-    e.stopPropagation();
-    const container = document.getElementById('qrContainer');
-    const isOpen = container.style.display !== 'none';
-    const btn = this;
-    
-    if (isOpen) {
-        // Close the scanner
-        container.style.display = 'none';
-        Quagga.stop();
-        isScanning = false;
-        
-        btn.classList.remove('open');
-        btn.setAttribute('aria-expanded', 'false');
-    } else {
-        // Open the scanner
-        container.style.display = 'block';
-        btn.classList.add('open');
-        btn.setAttribute('aria-expanded', 'true');
-        
-        Quagga.init({
-            inputStream: {
-                name: "Live",
-                type: "LiveStream",
-                // Targets the element where the video stream will inject
-                target: document.querySelector('#qr-reader'), 
-                constraints: {
-                    width: 640,
-                    height: 480,
-                    facingMode: "environment" // Forces back camera
-                },
-            },
-            decoder: {
-                // Optimized for 1D barcodes (e.g., student IDs, member cards)
-                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
-            } 
-        }, function(err) {
-            if (err) {
-                console.error("Initialization error:", err);
-                alert("Kamera konnte nicht gestartet werden.");
-                return;
-            }
-            Quagga.start();
-            isScanning = true;
-        });
-    }
-});
-
-// Single Quagga event listener for successful scans
-Quagga.onDetected(function(data) {
-    const decodedText = data.codeResult.code;
-    const studentId = String(decodedText || '').trim();
-    
-    // Stop scanning immediately to prevent multiple triggers
-    Quagga.stop();
-    isScanning = false;
-    
-    // Reset UI states to closed
-    const container = document.getElementById('qrContainer');
-    const btn = document.getElementById('scannerBtn');
-    if (container) container.style.display = 'none';
-    if (btn) {
-        btn.classList.remove('open');
-        btn.setAttribute('aria-expanded', 'false');
-    }
-    
-    // Route the scanned data to your input
-    document.getElementById('studentIdInput').value = studentId;
-    alert('Ausweis gescannt: ' + studentId);
-});
-</script>
-
-<style>
-.library-item .item-image-wrapper {
-    width: 120px;
-    height: 160px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 8px;
-    overflow: hidden;
-    flex-shrink: 0;
-}
-
-.library-item .placeholder-image {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 48px;
-    color: white;
-}
-
-.library-item .item-author {
-    font-size: 0.9rem;
-    color: #666;
-    margin: 4px 0;
-}
-
-.library-item .item-isbn {
-    font-size: 0.85rem;
-    color: #999;
-    font-family: monospace;
-    margin: 4px 0;
-}
-
-.library-item .item-type {
-    display: inline-block;
-    background: #e8f0fe;
-    color: #1967d2;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.8rem;
-}
-
-.library-item .item-status.available {
-    background: #e6f4ea;
-    color: #137333;
-}
-
-.library-item .item-status.borrowed {
-    background: #fce8e6;
-    color: #b3261e;
-}
-
-/* Mobile: allow horizontal scrolling for table-mode views */
-@media (max-width: 900px) {
-    .library-table-wrapper {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        width: 100%;
-    }
-    .library-table-wrapper .table-row {
-        min-width: 720px; /* allow table to have intrinsic width and be scrolled */
-    }
-    .table-header, .item-content.table-mode {
-        display: block; /* keep rows stacked but allow horizontal scroll */
-    }
-}
-</style>
-{% endblock %}

Web/templates/main_admin.html

@@ -819,7 +819,7 @@
         flex: 0 0 auto;
     }
 
-    .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button, .damage-button {
+    .ausleihen, .edit-button, .delete-button, .details-button,  .schedule-button, .damage-button {
         padding: 10px 18px;
         border: none;
         border-radius: 5px;
@@ -942,27 +942,6 @@
         box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
     }
 
-    /* Duplicate Button */
-    .duplicate-button {
-        background-color: #6f42c1;
-        color: white;
-        border: 2px solid #6f42c1;
-    }
-
-    .duplicate-button:hover {
-        background-color: #5a32a3;
-        border-color: #4e2a8e;
-        transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(111, 66, 193, 0.3);
-        color: white;
-        text-decoration: none;
-    }
-
-    .duplicate-button:active {
-        transform: translateY(0);
-        box-shadow: 0 2px 4px rgba(111, 66, 193, 0.3);
-    }
-
     .damage-button {
         background-color: #fd7e14;
         color: white;
@@ -1645,7 +1624,7 @@
             gap: 10px !important;
         }
         
-        .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
+        .ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
             width: 100% !important;
             min-height: 44px !important;
             padding: 12px 20px !important;
@@ -1777,7 +1756,7 @@
             justify-content: flex-start;
         }
         
-        .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
+        .ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
             padding: 10px 20px;
             font-size: 0.9rem;
             min-width: 110px;
@@ -1790,7 +1769,7 @@
                 gap: 8px;
             }
             
-            .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
+            .ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
                 padding: 8px 16px;
                 font-size: 0.85rem;
                 min-width: 95px;
@@ -1808,7 +1787,7 @@
             gap: 15px;
         }
         
-        .ausleihen, .edit-button, .delete-button, .details-button, .duplicate-button, .schedule-button {
+        .ausleihen, .edit-button, .delete-button, .details-button, .schedule-button {
             padding: 12px 24px;
             font-size: 1rem;
             min-width: 120px;
@@ -1980,7 +1959,7 @@
     }
     
     /* Standardize form and document buttons */
-    .save-button, .cancel-button, .remove-book-cover-button, .remove-duplicate-image-button,
+    .save-button, .cancel-button, .remove-book-cover-button,
     .import-book-button, .fetch-isbn-button, .nav-back-button {
         display: inline-flex;
         align-items: center;
@@ -3465,9 +3444,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
                                 {% if current_permissions.actions.get('can_edit', False) %}
                                 <button class="edit-button" onclick="openEditModalForSelectedUnit('${item._id}', 'specific-item-card-${item._id}')">Bearbeiten</button>
                                 {% endif %}
-                                {% if current_permissions.actions.get('can_insert', False) %}
-                                <button class="duplicate-button" onclick="duplicateItem('${item._id}')">Duplizieren</button>
-                                {% endif %}
                                 {% if current_permissions.pages.get('admin_school_settings', False) %}
                                 ${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
                                 {% endif %}
@@ -4244,7 +4220,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
                     : `<button class="ausleihen disabled-button" disabled>Ausgeliehen</button>`
                 }
                 <button class="edit-button" onclick="openEditModalForSelectedUnit('${item._id}', 'specific-item-modal-${item._id}')">Bearbeiten</button>
-                <button class="duplicate-button" onclick="duplicateItem('${item._id}')">Duplizieren</button>
                 ${damageReports && damageReports.length > 0 ? `<button class="damage-button" onclick="markDamageAsRepaired('${item._id}')">Repariert</button>` : `<button class="damage-button" onclick="registerDamage('${item._id}')">Schaden melden</button>`}
                 ${canScheduleItem ? `<button class="schedule-button" onclick="openScheduleModal('${item._id}')">Reservieren</button>` : ''}
                 <form method="POST" action="/delete_item/${item._id}" style="display:inline;" onsubmit="return confirm('Sind Sie sicher?')">
@@ -5044,55 +5019,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
     }
 
-
-    // Duplication function
-    function duplicateItem(itemId) {
-        // Show loading indicator
-        const loadingDiv = document.createElement('div');
-        loadingDiv.innerHTML = `
-            <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
-                        background: rgba(0,0,0,0.5); z-index: 10000; display: flex; 
-                        align-items: center; justify-content: center;">
-                <div class="modal-dialog-white">
-                    <div>Element wird dupliziert...</div>
-                    <div class="modal-content-margin">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(loadingDiv);
-
-        // Create form data for the duplicate_item request
-        const formData = new FormData();
-        formData.append('original_item_id', itemId);
-
-        // Send duplication request to get item data
-        fetch('/duplicate_item', {
-            method: 'POST',
-            body: formData
-        })
-        .then(response => response.json())
-        .then(data => {
-            document.body.removeChild(loadingDiv);
-            
-            if (data.success) {
-                // Store duplication data in sessionStorage for the upload page
-                sessionStorage.setItem('duplicateItemData', JSON.stringify(data.item_data));
-                
-                // Redirect to upload admin page
-                window.location.href = '/upload_admin?duplicate=true';
-            } else {
-                alert('Fehler beim Duplizieren: ' + (data.message || 'Unbekannter Fehler'));
-            }
-        })
-        .catch(error => {
-            document.body.removeChild(loadingDiv);
-            console.error('Error duplicating item:', error);
-            alert('Fehler beim Duplizieren des Elements. Bitte versuchen Sie es erneut.');
-        });
-    }
-
     // Helper functions for appointment display
     function formatAppointmentDate(dateString) {
         if (!dateString) return '';

Web/templates/student_card_barcode_print.html

@@ -11,7 +11,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Schülerausweis - Barcode PDF Download</title>
+    <title>Bibliotheksausweis - Barcode PDF Download</title>
     <style>
         * {
             margin: 0;
@@ -123,7 +123,7 @@
 <body>
     <div class="container">
         <div class="icon">📇</div>
-        <h1>Schülerausweis-Download</h1>
+        <h1>Bibliotheksausweis-Download</h1>
         <p>Generieren Sie eine PDF mit Barcodes aller Bibliotheksausweise zum direkten Drucken</p>
 
         <div class="info-box">

Web/templates/student_cards_admin.html

@@ -232,6 +232,16 @@
             <h1>📚 Bibliotheksausweise (Bibliothek)</h1>
         </div>
         <div class="export-buttons">
+            <form method="GET" action="{{ url_for('student_card_class_barcode_download') }}" style="display: inline-flex; gap: 5px; align-items: center; background: white; padding: 2px; border-radius: 4px; border: 1px solid #ddd;">
+                <select name="class_name" required style="border: none; padding: 8px; outline: none; font-size: 14px; background: transparent; cursor: pointer;">
+                    <option value="" disabled selected>-- Klasse wählen --</option>
+                    {% for cls in available_classes %}
+                        <option value="{{ cls }}">{{ cls }}</option>
+                    {% endfor %}
+                </select>
+                <button type="submit" class="btn-print" style="background: #17a2b8; padding: 8px 12px; margin: 0;">📤 PDF</button>
+            </form>
+
             <a href="{{ url_for('student_card_barcode_download') }}" class="btn-print" style="background: #28a745;">📥 Alle Ausweise (PDF)</a>
             <a href="{{ url_for('library_admin') }}" class="btn btn-primary">← Zur Bibliotheks-Upload</a>
         </div>
@@ -249,7 +259,7 @@
 
     <!-- Add/Edit Form -->
     <div class="student-card-form">
-        <h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Schülerausweis{% endif %}</h2>
+        <h2>{% if edit_mode %}Ausweis bearbeiten{% else %}Neuer Bibliotheksausweis{% endif %}</h2>
         
         <form method="POST" action="{{ url_for('student_cards_admin') }}">
             {% if edit_mode %}
@@ -283,9 +293,15 @@
                 </div>
                 <div class="form-group">
                     <label for="class_name">Klasse</label>
-                    <input type="text" id="class_name" name="class_name"
+                    <input type="text" id="class_name" name="class_name" list="class_list"
                            value="{{ form_data.get('class_name', '') }}"
-                           placeholder="z.B. 10A">
+                           placeholder="z.B. 10A (Tippen oder Auswählen)">
+
+                    <datalist id="class_list">
+                        {% for cls in available_classes %}
+                            <option value="{{ cls }}">
+                        {% endfor %}
+                    </datalist>
                 </div>
             </div>
 

Web/templates/upload_admin.html

@@ -11,59 +11,6 @@
 {% block title %}{{ page_title|default('Artikel hochladen') }} - Inventarsystem{% endblock %}
 
 {% block content %}
-{% if duplicate_data and duplicate_data.images %}
-<!-- Hidden server-side values for duplication, will be processed by JavaScript -->
-<div id="server-duplicate-data" 
-     data-name="{{ duplicate_data.name|default('') }}"
-     data-description="{{ duplicate_data.description|default('') }}"
-     data-location="{{ duplicate_data.location|default('') }}"
-     data-room="{{ duplicate_data.room|default('') }}"
-     data-year="{{ duplicate_data.year|default('') }}"
-     data-cost="{{ duplicate_data.cost|default('') }}"
-     data-images="{{ duplicate_data.images|tojson|safe }}"
-     data-filter1="{{ duplicate_data.filter1|tojson|safe if duplicate_data.filter1 else '[]' }}"
-     data-filter2="{{ duplicate_data.filter2|tojson|safe if duplicate_data.filter2 else '[]' }}"
-     data-filter3="{{ duplicate_data.filter3|tojson|safe if duplicate_data.filter3 else '[]' }}"
-     data-original-id="{{ duplicate_data.original_id|default('') }}"
-     style="display:none;">
-</div>
-<script>
-    // Pre-initialize duplicate data from server
-    var serverDuplicateData = null;
-    const dataElement = document.getElementById('server-duplicate-data');
-    if (dataElement) {
-        // Safely parse JSON arrays with error handling
-        function safeJsonParse(jsonStr, defaultValue = []) {
-            try {
-                if (!jsonStr) return defaultValue;
-                return JSON.parse(jsonStr);
-            } catch (e) {
-                console.error("Error parsing JSON:", e, "Value was:", jsonStr);
-                return defaultValue;
-            }
-        }
-        
-        // Get images data and log it for debugging
-        const imagesData = dataElement.getAttribute('data-images') || "[]";
-        console.log("Raw images data attribute:", imagesData);
-        
-        serverDuplicateData = {
-            name: dataElement.getAttribute('data-name') || "",
-            description: dataElement.getAttribute('data-description') || "",
-            location: dataElement.getAttribute('data-location') || "",
-            room: dataElement.getAttribute('data-room') || "",
-            year: dataElement.getAttribute('data-year') || "",
-            cost: dataElement.getAttribute('data-cost') || "",
-            images: safeJsonParse(imagesData),
-            filter1: safeJsonParse(dataElement.getAttribute('data-filter1')),
-            filter2: safeJsonParse(dataElement.getAttribute('data-filter2')),
-            filter3: safeJsonParse(dataElement.getAttribute('data-filter3')),
-            original_id: dataElement.getAttribute('data-original-id') || ""
-        };
-        console.log("Server-provided duplicate data:", serverDuplicateData);
-    }
-</script>
-{% endif %}
 
 <style>
     /* Book information display styles */
@@ -296,38 +243,11 @@
         color: #721c24 !important;
     }
 
-    /* Duplicate code popup styling */
-    .popup-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.6);
-        z-index: 10000;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        animation: overlayFadeIn 0.3s ease;
-    }
-
     @keyframes overlayFadeIn {
         from { opacity: 0; }
         to { opacity: 1; }
     }
 
-    .duplicate-code-popup {
-        background-color: white;
-        padding: 30px;
-        border-radius: 8px;
-        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-        max-width: 500px;
-        width: 90%;
-        text-align: center;
-        position: relative;
-        animation: popupSlideIn 0.3s ease;
-    }
-
     @keyframes popupSlideIn {
         from { 
             opacity: 0; 
@@ -916,7 +836,7 @@
                             <!-- Options will be loaded by JavaScript -->
                         </select>
                     </div>
-                    <div class="formupload_admin-group">
+                    <div class="form-group">
                         <label for="filter2-4">Wert 4:</label>
                         <select id="filter2-4" name="filter2" class="filter-dropdown-select">
                             <option value="">-- Optional --</option>
@@ -956,12 +876,14 @@
             </div>
 
 
-            <!-- Image upload (hidden for library mode) -->
             <div class="form-group">
-                <label for="images">Bilder/Videos:</label>
+                <label>Buchcover (automatisch):</label>
-                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif, .mp4, .mov, .avi, .mkv, .webm, .flv, .m4v, .3gp" multiple>
+                <div id="book-cover-preview-container"></div>
-                <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>
+            </div>
-                <!-- Add image preview area -->
+            <div class="form-group">
+                <label for="images"> Bilder hinzufügen:</label>
+                <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif" multiple>
+                <div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF</div>
                 <div class="image-preview-container" id="image-preview-container"></div>
             </div>
 
@@ -1749,23 +1671,24 @@
         }, 3000);
     }
 
-    // Function to download book cover image
     function downloadBookCover(imageUrl) {
         if (!imageUrl) {
             console.log('No image URL provided');
             return;
         }
-        
+
-        // Show loading indicator for image download
+        const coverPreviewContainer = document.getElementById('book-cover-preview-container');
-        const imagePreviewContainer = document.getElementById('image-preview-container');
+
-        if (imagePreviewContainer) {
+        if (!coverPreviewContainer) {
-            const loadingDiv = document.createElement('div');
+            console.error('Error: "book-cover-preview-container" not found in the DOM.');
-            loadingDiv.className = 'image-loading';
+            return;
-            loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
-            imagePreviewContainer.appendChild(loadingDiv);
         }
-        
+
-        // Download the image via backend
+        const loadingDiv = document.createElement('div');
+        loadingDiv.className = 'image-loading';
+        loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
+        coverPreviewContainer.appendChild(loadingDiv);
+
         fetch('/download_book_cover', {
             method: 'POST',
             headers: {
@@ -1773,78 +1696,63 @@
             },
             body: JSON.stringify({ url: imageUrl })
         })
-        .then(response => response.json())
+            .then(response => response.json())
-        .then(data => {
+            .then(data => {
-            // Remove loading indicator
+                const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
-            const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
+                if (currentLoadingDiv) {
-            if (loadingDiv) {
+                    currentLoadingDiv.remove();
-                loadingDiv.remove();
-            }
-            
-            if (data.success) {
-                // Create a preview of the downloaded image
-                const imagePreview = document.createElement('div');
-                imagePreview.className = 'book-cover-preview';
-                imagePreview.innerHTML = `
-                    <div class="preview-item">
-                        <img src="{{ url_for('uploaded_file', filename='') }}${data.filename}" 
-                             alt="Buchcover" class="book-cover-thumbnail">
-                        <p class="book-cover-caption">Buchcover automatisch heruntergeladen</p>
-                        <input type="hidden" name="book_cover_image" value="${data.filename}">
-                        <button type="button" onclick="removeBookCover(this)" 
-                                class="remove-book-cover-button">
-                            Entfernen
-                        </button>
-                    </div>
-                `;
-                
-                if (imagePreviewContainer) {
-                    imagePreviewContainer.appendChild(imagePreview);
                 }
-                
+
-                console.log('Book cover downloaded successfully:', data.filename);
+                if (data.success) {
-            } else {
+                    coverPreviewContainer.innerHTML = '';
-                console.error('Failed to download book cover:', data.error);
+
-                // Show error message to user
+                    const imagePreview = document.createElement('div');
-                if (imagePreviewContainer) {
+                    imagePreview.className = 'book-cover-preview';
-                    const errorDiv = document.createElement('div');
+                    imagePreview.innerHTML = `
-                    errorDiv.className = 'error-message';
+                <div class="preview-item">
-                    errorDiv.textContent = 'Fehler beim Herunterladen des Buchcovers: ' + data.error;
+                    <img src="/uploads/${data.filename}"
-                    errorDiv.style.fontSize = '0.8em';
+                         alt="Buchcover" class="book-cover-thumbnail" style="max-width: 150px; border-radius: 4px;">
-                    errorDiv.style.padding = '5px';
+                    <p class="book-cover-caption" style="font-size: 0.9em; color: #555;">Buchcover automatisch heruntergeladen</p>
-                    errorDiv.style.marginTop = '5px';
+                    <input type="hidden" name="book_cover_image" value="${data.filename}">
-                    imagePreviewContainer.appendChild(errorDiv);
+                    <button type="button" onclick="removeBookCover(this)"
-                    
+                            class="remove-book-cover-button btn btn-sm btn-danger">
-                    // Remove error message after 5 seconds
+                        Entfernen
-                    setTimeout(() => errorDiv.remove(), 5000);
+                    </button>
+                </div>
+            `;
+
+                    coverPreviewContainer.appendChild(imagePreview);
+                    console.log('Book cover downloaded successfully:', data.filename);
+                } else {
+                    console.error('Failed to download book cover:', data.error);
+                    showCoverError(coverPreviewContainer, 'Fehler beim Herunterladen des Buchcovers: ' + data.error);
                 }
-            }
+            })
-        })
+            .catch(error => {
-        .catch(error => {
+                console.error('Error downloading book cover:', error);
-            console.error('Error downloading book cover:', error);
+
-            // Remove loading indicator
+                const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
-            const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
+                if (currentLoadingDiv) {
-            if (loadingDiv) {
+                    currentLoadingDiv.remove();
-                loadingDiv.remove();
+                }
-            }
+
-            
+                showCoverError(coverPreviewContainer, 'Netzwerkfehler beim Herunterladen des Buchcovers');
-            // Show error message
+            });
-            if (imagePreviewContainer) {
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'error-message';
-                errorDiv.textContent = 'Netzwerkfehler beim Herunterladen des Buchcovers';
-                errorDiv.style.fontSize = '0.8em';
-                errorDiv.style.padding = '5px';
-                errorDiv.style.marginTop = '5px';
-                imagePreviewContainer.appendChild(errorDiv);
-                
-                // Remove error message after 5 seconds
-                setTimeout(() => errorDiv.remove(), 5000);
-            }
-        });
     }
-    
+
-    // Function to remove downloaded book cover
+    function showCoverError(container, message) {
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'error-message';
+        errorDiv.textContent = message;
+        errorDiv.style.fontSize = '0.8em';
+        errorDiv.style.color = 'red';
+        errorDiv.style.padding = '5px';
+        errorDiv.style.marginTop = '5px';
+        container.appendChild(errorDiv);
+
+        setTimeout(() => errorDiv.remove(), 5000);
+    }
+
     function removeBookCover(button) {
         const previewItem = button.closest('.preview-item');
         if (previewItem) {
@@ -1852,7 +1760,6 @@
         }
     }
 
-    // Code validation functions
     function checkCodeUnique(code, excludeId, callback) {
         if (!code || code.trim() === '') {
             callback(true);
@@ -1878,11 +1785,11 @@
         if (existingPopup) {
             existingPopup.remove();
         }
-        
+
         // Create popup overlay
         const overlay = document.createElement('div');
         overlay.className = 'popup-overlay';
-        
+
         // Create popup content
         overlay.innerHTML = `
             <div class="duplicate-code-popup">
@@ -1895,9 +1802,9 @@
                 <button class="popup-close-button" onclick="this.closest('.popup-overlay').remove()">Verstanden</button>
             </div>
         `;
-        
+
         document.body.appendChild(overlay);
-        
+
         // Auto-remove after 10 seconds
         setTimeout(() => {
             if (overlay.parentNode) {
@@ -1937,28 +1844,25 @@
     function setupImagePreview() {
         const imageInput = document.getElementById('images');
         const previewContainer = document.getElementById('image-preview-container');
-        
+
         if (imageInput && previewContainer) {
             imageInput.addEventListener('change', function(e) {
                 previewContainer.innerHTML = '';
-                
+
                 const files = e.target.files;
-                
+
-                // Validate file types before preview
+                // Validate file types before preview (Strictly Images)
-                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 
+                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
-                                    'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-matroska', 
+
-                                    'video/webm', 'video/x-flv', 'video/mp4', 'video/3gpp'];
-                let hasInvalidFile = false;
-                
                 for (let i = 0; i < files.length; i++) {
                     if (!allowedTypes.includes(files[i].type)) {
-                        hasInvalidFile = true;
                         // Clear the file input to prevent submission
                         imageInput.value = '';
-                        previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF, MP4, MOV, AVI, MKV, WEBM, FLV, M4V, 3GP</div>';
+                        previewContainer.innerHTML = '<div class="error-message">Fehler: Datei "' + files[i].name + '" hat ein nicht unterstütztes Format. Erlaubte Formate: JPG, JPEG, PNG, GIF</div>';
                         return; // Stop processing
                     }
                 }
+
                 for (let i = 0; i < files.length; i++) {
                     const file = files[i];
                     if (file.type.startsWith('image/')) {
@@ -1973,17 +1877,6 @@
                             previewContainer.appendChild(preview);
                         };
                         reader.readAsDataURL(file);
-                    } else if (file.type.startsWith('video/')) {
-                        const preview = document.createElement('div');
-                        preview.className = 'image-preview video-preview';
-                        preview.innerHTML = `
-                            <div class="video-placeholder">
-                                <div class="video-icon">🎥</div>
-                                <div class="video-name">${file.name}</div>
-                            </div>
-                            <button type="button" class="remove-image" onclick="removeImagePreview(this, ${i})">×</button>
-                        `;
-                        previewContainer.appendChild(preview);
                     }
                 }
             });
@@ -2049,34 +1942,6 @@
                 }
             });
         }
-        
-        // Handle duplication data if available (from sessionStorage or server)
-        if (typeof prefillFormWithDuplicateData === 'function') {
-            setTimeout(() => {
-                prefillFormWithDuplicateData();
-            }, 500); // Wait for all dropdowns to load
-        }
     });
-
-    // Initialize duplication data - handle both server-side and sessionStorage data
-    let duplicateData = null;
-    
-    // First check if serverDuplicateData is defined by the script above
-    if (typeof serverDuplicateData !== 'undefined' && serverDuplicateData) {
-        console.log("Using server-provided duplicateData:", serverDuplicateData);
-        duplicateData = serverDuplicateData;
-        
-        // Ensure images is properly handled as an array
-        if (duplicateData.images) {
-            if (typeof duplicateData.images === 'string') {
-                try {
-                    duplicateData.images = JSON.parse(duplicateData.images);
-                } catch (e) {
-                    console.error("Error parsing duplicate images array:", e);
-                }
-            }
-            console.log("Parsed duplicate images successfully.");
-        }
-    }
 </script>
 {% endblock %}