<!DOCTYPE html>
<html lang="en" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AniWorld Manager</title>
    <link rel="stylesheet" href="/static/css/styles.css?v={{ static_v }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

    <!-- UX Enhancement and Mobile & Accessibility CSS -->
    <link rel="stylesheet" href="/static/css/ux_features.css?v={{ static_v }}">
</head>

<body>
    <div class="app-container">
        <!-- Header -->
        <header class="header">
            <div class="header-content">
                <div class="header-title">
                    <i class="fas fa-play-circle"></i>
                    <h1>AniWorld Manager</h1>
                </div>
                <div class="header-actions">
                    <!-- Process Status Indicators -->
                    <div class="process-status" id="process-status">
                        <div class="status-indicator" id="rescan-status" title="Scan is idle">
                            <i class="fas fa-sync-alt"></i>
                            <div class="status-dot idle"></div>
                        </div>
                        <div class="status-indicator" id="download-status" title="Download is idle">
                            <i class="fas fa-download"></i>
                            <div class="status-dot idle"></div>
                        </div>
                    </div>

                    <a href="/queue" class="btn btn-secondary" title="Download Queue">
                        <i class="fas fa-list-alt"></i>
                        <span data-text="queue">Queue</span>
                    </a>

                    <button id="logout-btn" class="btn btn-secondary" title="Logout" style="display: none;">
                        <i class="fas fa-sign-out-alt"></i>
                        <span data-text="logout">Logout</span>
                    </button>
                    <button id="config-btn" class="btn btn-secondary" title="Show configuration">
                        <i class="fas fa-cog"></i>
                        <span data-text="config-title">Config</span>
                    </button>
                    <button id="theme-toggle" class="btn btn-icon" title="Toggle theme" data-title="toggle-theme">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button id="rescan-btn" class="btn btn-primary">
                        <i class="fas fa-sync-alt"></i>
                        <span data-text="rescan">Rescan</span>
                    </button>
                </div>
            </div>
        </header>

        <!-- Main content -->
        <main class="main-content">
            <!-- Search section -->
            <section class="search-section">
                <div class="search-container">
                    <div class="search-input-group">
                        <input type="text" id="search-input" data-text="search-placeholder"
                            placeholder="Search for anime..." class="search-input">
                        <button id="search-btn" class="btn btn-primary">
                            <i class="fas fa-search"></i>
                        </button>
                        <button id="clear-search" class="btn btn-secondary">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>

                <!-- Search results -->
                <div id="search-results" class="search-results hidden">
                    <h3>Search Results</h3>
                    <div id="search-results-list" class="search-results-list"></div>
                </div>
            </section>

            <!-- Download Queue Section -->
            <section id="download-queue-section" class="download-queue-section hidden">
                <div class="queue-header">
                    <h2>
                        <i class="fas fa-download"></i>
                        <span data-text="download-queue">Download Queue</span>
                    </h2>
                    <div class="queue-stats">
                        <span id="queue-progress" class="queue-progress">0/0 series</span>
                    </div>
                </div>

                <!-- Current Download -->
                <div id="current-download" class="current-download hidden">
                    <div class="current-download-header">
                        <h3 data-text="currently-downloading">Currently Downloading</h3>
                    </div>
                    <div class="current-download-item">
                        <div class="download-info">
                            <div id="current-serie-name" class="serie-name">-</div>
                            <div id="current-episode" class="episode-info">-</div>
                        </div>
                        <div class="download-progress">
                            <div class="progress-bar-mini">
                                <div id="current-progress-fill" class="progress-fill-mini"></div>
                            </div>
                            <div id="current-progress-text" class="progress-text-mini">0%</div>
                        </div>
                    </div>
                </div>

                <!-- Queue List -->
                <div id="queue-list-container" class="queue-list-container">
                    <h3 data-text="queued-series">Queued Series</h3>
                    <div id="queue-list" class="queue-list">
                        <!-- Queue items will be populated here -->
                    </div>
                </div>
            </section>

            <!-- Series management section -->
            <section class="series-section">
                <div class="series-header">
                    <h2 data-text="series-collection">Series Collection</h2>
                    <div class="series-filters">
                        <button id="show-missing-only" class="btn btn-secondary" data-active="false">
                            <i class="fas fa-filter"></i>
                            <span data-text="show-missing-only">Missing Episodes Only</span>
                        </button>
                        <button id="sort-alphabetical" class="btn btn-secondary" data-active="false">
                            <i class="fas fa-sort-alpha-down"></i>
                            <span data-text="sort-alphabetical">A-Z Sort</span>
                        </button>
                    </div>
                    <div class="series-actions">
                        <button id="select-all" class="btn btn-secondary">
                            <i class="fas fa-check-double"></i>
                            <span data-text="select-all">Select All</span>
                        </button>
                        <button id="refresh-nfo-selected" class="btn btn-secondary" disabled title="Refresh NFO for selected series">
                            <i class="fas fa-sync-alt"></i>
                            <span>Refresh NFO</span>
                        </button>
                        <button id="download-selected" class="btn btn-success" disabled>
                            <i class="fas fa-download"></i>
                            <span data-text="download-selected">Download Selected</span>
                        </button>
                    </div>
                </div>

                <!-- Series grid -->
                <div id="series-grid" class="series-grid">
                    <!-- Series cards will be populated here -->
                </div>
            </section>
        </main>

        <!-- Status panel -->
        <div id="status-panel" class="status-panel hidden">
            <div class="status-header">
                <h3 id="status-title">Status</h3>
                <button id="close-status" class="btn btn-icon">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="status-content">
                <div id="status-message" class="status-message"></div>
                <div id="progress-container" class="progress-container hidden">
                    <div class="progress-bar">
                        <div id="progress-fill" class="progress-fill"></div>
                    </div>
                    <div id="progress-text" class="progress-text">0%</div>
                </div>
                <!-- Download controls removed - use dedicated queue page -->
            </div>
        </div>

        <!-- Configuration Modal -->
        <div id="config-modal" class="modal hidden">
            <div class="modal-overlay"></div>
            <div class="modal-content">
                <div class="modal-header">
                    <h3 data-text="config-title">Configuration</h3>
                    <button id="close-config" class="btn btn-icon">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- General Settings -->
                    <div class="config-section">
                        <h4 data-text="general-settings">General Settings</h4>
                        
                        <div class="config-item">
                            <label for="app-name-input" data-text="app-name">Application Name:</label>
                            <input type="text" id="app-name-input" class="input-field" 
                                placeholder="Aniworld">
                        </div>

                        <div class="config-item">
                            <label for="data-dir-input" data-text="data-directory">Data Directory:</label>
                            <input type="text" id="data-dir-input" class="input-field" 
                                placeholder="data">
                        </div>
                    </div>

                    <div class="config-item">
                        <label for="anime-directory-input" data-text="anime-directory">Anime Directory:</label>
                        <div class="input-group">
                            <input type="text" id="anime-directory-input" class="input-field"
                                placeholder="Enter anime directory path...">
                            <button id="browse-directory" class="btn btn-secondary">
                                <i class="fas fa-folder"></i>
                            </button>
                        </div>
                    </div>
                    <div class="config-item">
                        <label for="series-count-input" data-text="series-count">Series Count:</label>
                        <input type="number" id="series-count-input" class="input-field" readonly
                            title="This value is automatically calculated">
                    </div>
                    <div class="config-item">
                        <label data-text="connection-status">Connection Status:</label>
                        <div id="connection-status-display" class="config-value">
                            <span class="status-indicator"></span>
                            <span class="status-text">Disconnected</span>
                        </div>
                        <button id="test-connection" class="btn btn-secondary">
                            <i class="fas fa-network-wired"></i>
                            <span data-text="test-connection">Test Connection</span>
                        </button>
                    </div>

                    <!-- Main Configuration Actions -->
                    <div class="config-actions">
                        <button id="save-main-config" class="btn btn-primary">
                            <i class="fas fa-save"></i>
                            <span data-text="save-main-config">Save Configuration</span>
                        </button>
                        <button id="reset-main-config" class="btn btn-secondary">
                            <i class="fas fa-undo"></i>
                            <span data-text="reset-main-config">Reset</span>
                        </button>
                    </div>

                    <!-- Scheduler Configuration -->
                    <div class="config-section">
                        <h4 data-text="scheduler-config">Scheduled Operations</h4>

                        <div class="config-item">
                            <label class="checkbox-label">
                                <input type="checkbox" id="scheduled-rescan-enabled">
                                <span class="checkbox-custom"></span>
                                <span data-text="enable-scheduled-rescan">Enable Scheduler</span>
                            </label>
                        </div>

                        <div class="config-item" id="rescan-time-config">
                            <label for="scheduled-rescan-time" data-text="rescan-time">Run at:</label>
                            <input type="time" id="scheduled-rescan-time" value="03:00" class="input-field">
                        </div>

                        <div class="config-item" id="rescan-days-config">
                            <label data-text="rescan-days">Days of week:</label>
                            <div class="scheduler-days-container">
                                <label class="scheduler-day-toggle-label">
                                    <input type="checkbox" id="scheduler-day-mon" checked class="scheduler-day-checkbox">
                                    <span class="scheduler-day-label" data-text="day-mon">Mon</span>
                                </label>
                                <label class="scheduler-day-toggle-label">
                                    <input type="checkbox" id="scheduler-day-tue" checked class="scheduler-day-checkbox">
                                    <span class="scheduler-day-label" data-text="day-tue">Tue</span>
                                </label>
                                <label class="scheduler-day-toggle-label">
                                    <input type="checkbox" id="scheduler-day-wed" checked class="scheduler-day-checkbox">
                                    <span class="scheduler-day-label" data-text="day-wed">Wed</span>
                                </label>
                                <label class="scheduler-day-toggle-label">
                                    <input type="checkbox" id="scheduler-day-thu" checked class="scheduler-day-checkbox">
                                    <span class="scheduler-day-label" data-text="day-thu">Thu</span>
                                </label>
                                <label class="scheduler-day-toggle-label">
                                    <input type="checkbox" id="scheduler-day-fri" checked class="scheduler-day-checkbox">
                                    <span class="scheduler-day-label" data-text="day-fri">Fri</span>
                                </label>
                                <label class="scheduler-day-toggle-label">
                                    <input type="checkbox" id="scheduler-day-sat" checked class="scheduler-day-checkbox">
                                    <span class="scheduler-day-label" data-text="day-sat">Sat</span>
                                </label>
                                <label class="scheduler-day-toggle-label">
                                    <input type="checkbox" id="scheduler-day-sun" checked class="scheduler-day-checkbox">
                                    <span class="scheduler-day-label" data-text="day-sun">Sun</span>
                                </label>
                            </div>
                            <small class="config-hint" data-text="rescan-days-hint">
                                Scheduler runs at the selected time on checked days. Uncheck all to disable scheduling.
                            </small>
                        </div>

                        <div class="config-item">
                            <label class="checkbox-label">
                                <input type="checkbox" id="auto-download-after-rescan">
                                <span class="checkbox-custom"></span>
                                <span data-text="auto-download-after-rescan">Auto-download missing episodes after
                                    rescan</span>
                            </label>
                        </div>

                        <div class="config-item">
                            <label class="checkbox-label">
                                <input type="checkbox" id="folder-scan-enabled">
                                <span class="checkbox-custom"></span>
                                <span data-text="folder-scan-enabled">Run folder maintenance (NFO repair, renaming, poster checks)</span>
                            </label>
                            <small class="config-hint" data-text="folder-scan-hint">
                                Automatically repair NFOs, rename folders, and check posters during scheduled runs.
                            </small>
                        </div>


                        <div class="config-item scheduler-status" id="scheduler-status">
                            <div class="scheduler-info">
                                <div class="info-row">
                                    <span data-text="next-rescan">Next Scheduled Rescan:</span>
                                    <span id="scheduler-next-run" class="info-value">-</span>
                                </div>
                                <div class="info-row">
                                    <span data-text="last-rescan">Last Scheduled Rescan:</span>
                                    <span id="last-rescan-time" class="info-value">-</span>
                                </div>
                                <div class="info-row">
                                    <span data-text="scheduler-running">Scheduler Status:</span>
                                    <span id="scheduler-running-status" class="info-value status-badge">Stopped</span>
                                </div>
                            </div>
                        </div>

                        <div class="config-actions">
                            <button id="save-scheduler-config" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                <span data-text="save-config">Save Configuration</span>
                            </button>
                            <button id="test-scheduled-rescan" class="btn btn-secondary">
                                <i class="fas fa-play"></i>
                                <span data-text="test-rescan">Test Rescan Now</span>
                            </button>
                        </div>
                    </div>

                    <!-- Logging Configuration -->
                    <div class="config-section">
                        <h4 data-text="logging-config">Logging Configuration</h4>

                        <div class="config-item">
                            <label for="log-level" data-text="log-level">Log Level:</label>
                            <select id="log-level" class="input-field">
                                <option value="DEBUG">DEBUG</option>
                                <option value="INFO">INFO</option>
                                <option value="WARNING">WARNING</option>
                                <option value="ERROR">ERROR</option>
                                <option value="CRITICAL">CRITICAL</option>
                            </select>
                        </div>

                        <div class="config-item">
                            <label for="log-file" data-text="log-file">Log File Path (optional):</label>
                            <input type="text" id="log-file" placeholder="logs/app.log" class="input-field">
                            <small class="config-hint" data-text="log-file-hint">
                                Leave empty to log to console only
                            </small>
                        </div>

                        <div class="config-item">
                            <label for="log-max-bytes" data-text="log-max-bytes">Max File Size (bytes):</label>
                            <input type="number" id="log-max-bytes" placeholder="10485760" min="0" class="input-field">
                            <small class="config-hint" data-text="log-max-bytes-hint">
                                Maximum size before log rotation (leave empty for no rotation)
                            </small>
                        </div>

                        <div class="config-item">
                            <label for="log-backup-count" data-text="log-backup-count">Backup Count:</label>
                            <input type="number" id="log-backup-count" value="3" min="0" class="input-field">
                            <small class="config-hint" data-text="log-backup-count-hint">
                                Number of rotated log files to keep
                            </small>
                        </div>

                        <div class="config-item">
                            <div class="checkbox-container">
                                <input type="checkbox" id="enable-console-logging">
                                <label for="enable-console-logging">
                                    <span data-text="enable-console-logging">Enable Console Logging</span>
                                </label>
                            </div>
                        </div>

                        <div class="config-item">
                            <div class="checkbox-container">
                                <input type="checkbox" id="enable-console-progress">
                                <label for="enable-console-progress">
                                    <span data-text="enable-console-progress">Show Progress Bars in Console</span>
                                </label>
                            </div>
                        </div>

                        <div class="config-item">
                            <div class="checkbox-container">
                                <input type="checkbox" id="enable-fail2ban-logging">
                                <label for="enable-fail2ban-logging">
                                    <span data-text="enable-fail2ban-logging">Enable Fail2Ban Logging</span>
                                </label>
                            </div>
                        </div>

                        <div class="config-item">
                            <h5 data-text="log-files">Log Files</h5>
                            <div id="log-files-list" class="log-files-container">
                                <!-- Log files will be populated here -->
                            </div>
                        </div>

                        <div class="config-actions">
                            <button id="save-logging-config" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                <span data-text="save-logging-config">Save Logging Config</span>
                            </button>
                            <button id="test-logging" class="btn btn-secondary">
                                <i class="fas fa-bug"></i>
                                <span data-text="test-logging">Test Logging</span>
                            </button>
                            <button id="refresh-log-files" class="btn btn-secondary">
                                <i class="fas fa-refresh"></i>
                                <span data-text="refresh-logs">Refresh Log Files</span>
                            </button>
                            <button id="cleanup-logs" class="btn btn-warning">
                                <i class="fas fa-trash"></i>
                                <span data-text="cleanup-logs">Cleanup Old Logs</span>
                            </button>
                        </div>
                    </div>

                    <!-- NFO Metadata Configuration -->
                    <div class="config-section">
                        <h4 data-text="nfo-config">NFO Metadata Settings</h4>

                        <div class="config-item">
                            <label for="tmdb-api-key" data-text="tmdb-api-key">TMDB API Key:</label>
                            <input type="text" id="tmdb-api-key" placeholder="Enter your TMDB API key" class="input-field">
                            <small class="config-hint" data-text="tmdb-api-hint">
                                Required for NFO metadata. Get your API key from <a href="https://www.themoviedb.org/settings/api" target="_blank">TMDB</a>
                            </small>
                        </div>

                        <div class="config-item">
                            <label class="checkbox-label">
                                <input type="checkbox" id="nfo-auto-create">
                                <span class="checkbox-custom"></span>
                                <span data-text="nfo-auto-create">Auto-create NFO files</span>
                            </label>
                            <small class="config-hint" data-text="nfo-auto-create-hint">
                                Automatically create NFO metadata when downloading new series
                            </small>
                        </div>

                        <div class="config-item">
                            <label class="checkbox-label">
                                <input type="checkbox" id="nfo-update-on-scan">
                                <span class="checkbox-custom"></span>
                                <span data-text="nfo-update-on-scan">Update NFO on rescan</span>
                            </label>
                            <small class="config-hint" data-text="nfo-update-hint">
                                Refresh existing NFO files when rescanning library
                            </small>
                        </div>

                        <div class="config-item">
                            <h5 data-text="media-downloads">Media File Downloads</h5>
                            
                            <label class="checkbox-label">
                                <input type="checkbox" id="nfo-download-poster" checked>
                                <span class="checkbox-custom"></span>
                                <span data-text="download-poster">Download poster.jpg</span>
                            </label>

                            <label class="checkbox-label">
                                <input type="checkbox" id="nfo-download-logo" checked>
                                <span class="checkbox-custom"></span>
                                <span data-text="download-logo">Download logo.png</span>
                            </label>

                            <label class="checkbox-label">
                                <input type="checkbox" id="nfo-download-fanart" checked>
                                <span class="checkbox-custom"></span>
                                <span data-text="download-fanart">Download fanart.jpg</span>
                            </label>
                        </div>

                        <div class="config-item">
                            <label for="nfo-image-size" data-text="image-size">Image Quality:</label>
                            <select id="nfo-image-size" class="input-field">
                                <option value="original">Original (Best Quality)</option>
                                <option value="w500">Medium (w500)</option>
                            </select>
                            <small class="config-hint" data-text="image-size-hint">
                                Original provides best quality but larger file sizes
                            </small>
                        </div>

                        <div class="config-actions">
                            <button id="save-nfo-config" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                <span data-text="save-nfo-config">Save NFO Settings</span>
                            </button>
                            <button id="test-tmdb-connection" class="btn btn-secondary">
                                <i class="fas fa-plug"></i>
                                <span data-text="test-tmdb">Test TMDB Connection</span>
                            </button>
                        </div>
                    </div>

                    <!-- Backup Configuration -->
                    <div class="config-section">
                        <h4 data-text="backup-config">Backup Configuration</h4>

                        <div class="config-item">
                            <label class="checkbox-label">
                                <input type="checkbox" id="backup-enabled">
                                <span class="checkbox-custom"></span>
                                <span data-text="backup-enabled">Enable Automatic Backups</span>
                            </label>
                            <small class="config-hint" data-text="backup-enabled-hint">
                                Automatically backup configuration files
                            </small>
                        </div>

                        <div class="config-item">
                            <label for="backup-path" data-text="backup-path">Backup Path:</label>
                            <input type="text" id="backup-path" value="data/backups" class="input-field">
                            <small class="config-hint" data-text="backup-path-hint">
                                Directory where backups will be stored
                            </small>
                        </div>

                        <div class="config-item">
                            <label for="backup-keep-days" data-text="backup-keep-days">Keep Backups (days):</label>
                            <input type="number" id="backup-keep-days" value="30" min="0" class="input-field">
                            <small class="config-hint" data-text="backup-keep-days-hint">
                                How many days to keep old backups
                            </small>
                        </div>

                        <div class="config-actions">
                            <button id="save-backup-config" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                <span data-text="save-backup-config">Save Backup Settings</span>
                            </button>
                        </div>
                    </div>

                    <!-- Configuration Management -->
                    <div class="config-section">
                        <h4 data-text="config-management">Configuration Management</h4>

                        <div class="config-item">
                            <h5 data-text="config-backup-restore">Backup & Restore</h5>
                            <p class="config-description" data-text="backup-description">
                                Create backups of your configuration or restore from previous backups.
                            </p>

                            <div class="config-actions">
                                <button id="create-config-backup" class="btn btn-secondary">
                                    <i class="fas fa-save"></i>
                                    <span data-text="create-backup">Create Backup</span>
                                </button>
                                <button id="view-config-backups" class="btn btn-secondary">
                                    <i class="fas fa-history"></i>
                                    <span data-text="view-backups">View Backups</span>
                                </button>
                                <button id="export-config" class="btn btn-secondary">
                                    <i class="fas fa-download"></i>
                                    <span data-text="export-config">Export Config</span>
                                </button>
                            </div>
                        </div>

                        <div class="config-item">
                            <h5 data-text="config-validation">Configuration Validation</h5>
                            <p class="config-description" data-text="validation-description">
                                Validate your current configuration for errors and warnings.
                            </p>

                            <div id="validation-results" class="validation-results hidden">
                                <!-- Validation results will be displayed here -->
                            </div>

                            <div class="config-actions">
                                <button id="validate-config" class="btn btn-primary">
                                    <i class="fas fa-check"></i>
                                    <span data-text="validate-config">Validate Configuration</span>
                                </button>
                                <button id="reset-config" class="btn btn-warning">
                                    <i class="fas fa-undo"></i>
                                    <span data-text="reset-config">Reset to Defaults</span>
                                </button>
                            </div>
                        </div>

                        <div class="config-item">
                            <h5 data-text="advanced-config">Advanced Settings</h5>

                            <label for="max-concurrent-downloads" data-text="max-downloads">Max Concurrent
                                Downloads:</label>
                            <input type="number" id="max-concurrent-downloads" min="1" max="20" value="3"
                                class="input-field">

                            <label for="provider-timeout" data-text="provider-timeout">Provider Timeout
                                (seconds):</label>
                            <input type="number" id="provider-timeout" min="5" max="300" value="30" class="input-field">

                            <div class="checkbox-container">
                                <input type="checkbox" id="enable-debug-mode">
                                <label for="enable-debug-mode">
                                    <span data-text="enable-debug">Enable Debug Mode</span>
                                </label>
                            </div>

                            <div class="config-actions">
                                <button id="save-advanced-config" class="btn btn-primary">
                                    <i class="fas fa-save"></i>
                                    <span data-text="save-advanced">Save Advanced Settings</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Metadata Modal -->
        <div id="edit-metadata-modal" class="modal hidden">
            <div class="modal-overlay"></div>
            <div class="modal-content edit-modal-content">
                <div class="modal-header">
                    <h3>Edit Metadata</h3>
                    <button id="btn-cancel-metadata" class="btn btn-icon">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="edit-metadata-form" onsubmit="return false;">
                        <!-- Identity Section -->
                        <div class="edit-section">
                            <h4><i class="fa-solid fa-key"></i> Identity</h4>
                            <div class="form-group">
                                <label for="edit-key">Series Key</label>
                                <input type="text" id="edit-key" class="input-field"
                                    placeholder="e.g. attack-on-titan"
                                    pattern="[a-z0-9][a-z0-9-]*[a-z0-9]">
                                <span class="field-error" style="display:none;"></span>
                            </div>
                            <div id="key-change-warning" class="key-warning" style="display:none;">
                                <i class="fa-solid fa-triangle-exclamation"></i>
                                Changing the key will update the primary identifier. This may affect provider linkage.
                            </div>
                        </div>

                        <!-- External IDs Section -->
                        <div class="edit-section">
                            <h4><i class="fa-solid fa-database"></i> External IDs</h4>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="edit-tmdb-id">TMDB ID</label>
                                    <input type="number" id="edit-tmdb-id" class="input-field"
                                        placeholder="e.g. 1429" min="1">
                                    <span class="field-error" style="display:none;"></span>
                                </div>
                                <div class="form-group">
                                    <label for="edit-tvdb-id">TVDB ID</label>
                                    <input type="number" id="edit-tvdb-id" class="input-field"
                                        placeholder="e.g. 267440" min="1">
                                    <span class="field-error" style="display:none;"></span>
                                </div>
                            </div>
                        </div>

                        <!-- NFO Status Section -->
                        <div class="edit-section">
                            <h4><i class="fa-solid fa-file-lines"></i> NFO Status</h4>
                            <div class="nfo-diagnostics">
                                <div id="nfo-status-badge" class="nfo-status-badge">Loading...</div>
                                <div id="nfo-diagnostics-container">
                                    <div id="nfo-missing-tags" class="missing-tags-list"></div>
                                </div>
                                <p id="repair-hint" class="repair-hint" style="display:none;">
                                    <i class="fa-solid fa-circle-info"></i>
                                    No TMDB ID set. Repair will search TMDB by series name.
                                </p>
                                <button type="button" id="btn-repair-nfo" class="btn btn-secondary btn-repair">
                                    <i class="fa-solid fa-wrench"></i> Repair NFO
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btn-save-metadata" class="btn btn-primary">
                        <i class="fa-solid fa-floppy-disk"></i> Save
                    </button>
                </div>
            </div>
        </div>

        <!-- Toast notifications -->
        <div id="toast-container" class="toast-container"></div>
    </div>

    <!-- Loading overlay -->
    <div id="loading-overlay" class="loading-overlay hidden">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>Loading...</p>
        </div>
    </div>

    <!-- Shared Modules (load in dependency order) -->
    <script src="/static/js/shared/constants.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/auth.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/api-client.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/theme.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/ui-utils.js?v={{ static_v }}"></script>
    <script src="/static/js/shared/websocket-client.js?v={{ static_v }}"></script>

    <!-- External modules -->
    <script src="/static/js/localization.js?v={{ static_v }}"></script>
    <script src="/static/js/user_preferences.js?v={{ static_v }}"></script>

    <!-- Index Page Modules -->
    <script src="/static/js/index/context-menu.js?v={{ static_v }}"></script>
    <script src="/static/js/index/edit-modal.js?v={{ static_v }}"></script>
    <script src="/static/js/index/series-manager.js?v={{ static_v }}"></script>
    <script src="/static/js/index/selection-manager.js?v={{ static_v }}"></script>
    <script src="/static/js/index/search.js?v={{ static_v }}"></script>
    <script src="/static/js/index/scan-manager.js?v={{ static_v }}"></script>
    <script src="/static/js/index/nfo-manager.js?v={{ static_v }}"></script>
    <!-- Config Sub-Modules (must load before config-manager.js) -->
    <script src="/static/js/index/scheduler-config.js?v={{ static_v }}"></script>
    <script src="/static/js/index/logging-config.js?v={{ static_v }}"></script>
    <script src="/static/js/index/advanced-config.js?v={{ static_v }}"></script>
    <script src="/static/js/index/main-config.js?v={{ static_v }}"></script>
    <script src="/static/js/index/nfo-config.js?v={{ static_v }}"></script>
    <script src="/static/js/index/config-manager.js?v={{ static_v }}"></script>
    <script src="/static/js/index/socket-handler.js?v={{ static_v }}"></script>
    <script src="/static/js/index/app-init.js?v={{ static_v }}"></script>
</body>

</html>