{{ define "config" }}
<div class="space-y-6">
    <!-- Configuration Form -->
    <form id="configForm" class="space-y-6">
        <!-- Tab Navigation Card -->
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <!-- Modern Tab Navigation -->
                <div class="border-b border-base-300 mb-8">
                    <nav class="flex space-x-8" aria-label="Configuration Tabs">
                        <button type="button" class="tab-button active flex items-center gap-2 py-3 px-1 border-b-2 border-primary text-primary font-medium text-sm" data-tab="general">
                            <i class="bi bi-gear text-lg"></i>
                            <span class="hidden sm:inline">General</span>
                        </button>
                        <button type="button" class="tab-button flex items-center gap-2 py-3 px-1 border-b-2 border-transparent text-base-content/70 hover:text-base-content hover:border-base-300 font-medium text-sm transition-colors" data-tab="debrid">
                            <i class="bi bi-cloud text-lg"></i>
                            <span class="hidden sm:inline">Debrid</span>
                        </button>
                        <button type="button" class="tab-button flex items-center gap-2 py-3 px-1 border-b-2 border-transparent text-base-content/70 hover:text-base-content hover:border-base-300 font-medium text-sm transition-colors" data-tab="qbittorrent">
                            <i class="bi bi-download text-lg"></i>
                            <span class="hidden sm:inline">QBittorrent</span>
                        </button>
                        <button type="button" class="tab-button flex items-center gap-2 py-3 px-1 border-b-2 border-transparent text-base-content/70 hover:text-base-content hover:border-base-300 font-medium text-sm transition-colors" data-tab="arrs">
                            <i class="bi bi-collection text-lg"></i>
                            <span class="hidden sm:inline">*Arrs</span>
                        </button>
                        <button type="button" class="tab-button flex items-center gap-2 py-3 px-1 border-b-2 border-transparent text-base-content/70 hover:text-base-content hover:border-base-300 font-medium text-sm transition-colors" data-tab="repair">
                            <i class="bi bi-wrench text-lg"></i>
                            <span class="hidden sm:inline">Repair</span>
                        </button>
                        <button type="button" class="tab-button flex items-center gap-2 py-3 px-1 border-b-2 border-transparent text-base-content/70 hover:text-base-content hover:border-base-300 font-medium text-sm transition-colors" data-tab="rclone">
                            <i class="bi bi-hdd-stack text-lg"></i>
                            <span class="hidden sm:inline">Rclone</span>
                        </button>
                    </nav>
                </div>

                <!-- Save Button (Sticky) -->
                <div class="sticky top-20 z-30 flex justify-end mb-6">
                    <button type="submit" class="btn btn-success btn-lg shadow-lg">
                        <i class="bi bi-save mr-2"></i>Save Configuration
                    </button>
                </div>

                <!-- Tab Content Container -->
                <div class="tab-content-container">

                    <!-- General Tab Content -->
                    <div class="tab-content" data-tab-content="general">
                        <div class="space-y-6">
                            <h2 class="text-2xl font-bold flex items-center mb-6">
                                <i class="bi bi-gear mr-3 text-primary"></i>General Settings
                            </h2>

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                                <div class="form-control">
                                    <label class="label" for="log-level">
                                        <span class="label-text font-medium">Log Level</span>
                                    </label>
                                    <select class="select select-bordered" name="log_level" id="log-level">
                                        <option value="info">Info</option>
                                        <option value="debug">Debug</option>
                                        <option value="warn">Warning</option>
                                        <option value="error">Error</option>
                                        <option value="trace">Trace</option>
                                    </select>
                                </div>
                                <div class="form-control">
                                    <label class="label">
                                        <span class="label-text font-medium">Magnet Link Handler</span>
                                    </label>
                                    <button type="button" class="btn btn-primary" onclick="registerMagnetLinkHandler();" id="registerMagnetLink">
                                        <i class="bi bi-magnet mr-2"></i>Register Magnet Handler
                                    </button>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                                <div class="form-control">
                                    <label class="label" for="urlBase">
                                        <span class="label-text font-medium">URL Base</span>
                                    </label>
                                    <input type="text" class="input input-bordered" id="urlBase" name="url_base" placeholder="/">
                                    <div class="label">
                                        <span class="label-text-alt">URL base for the application</span>
                                    </div>
                                </div>

                                <div class="form-control">
                                    <label class="label" for="bindAddress">
                                        <span class="label-text font-medium">Bind Address</span>
                                    </label>
                                    <input type="text" class="input input-bordered" id="bindAddress" name="bind_address" placeholder="0.0.0.0">
                                    <div class="label">
                                        <span class="label-text-alt">Bind address (default: all interfaces)</span>
                                    </div>
                                </div>

                                <div class="form-control">
                                    <label class="label" for="port">
                                        <span class="label-text font-medium">Port</span>
                                    </label>
                                    <input type="number" class="input input-bordered" id="port" name="port" placeholder="8282">
                                    <div class="label">
                                        <span class="label-text-alt">Application port</span>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                                <div class="form-control">
                                    <label class="label" for="discordWebhookUrl">
                                        <span class="label-text font-medium">Discord Webhook URL</span>
                                    </label>
                                    <textarea class="textarea textarea-bordered" id="discordWebhookUrl" name="discord_webhook_url" placeholder="https://discord.com/api/webhooks/..."></textarea>
                                </div>

                                <div class="form-control">
                                    <label class="label" for="allowedExtensions">
                                        <span class="label-text font-medium">Allowed File Extensions</span>
                                    </label>
                                    <textarea class="textarea textarea-bordered" id="allowedExtensions" name="allowed_file_types" placeholder="mkv, mp4, avi, mov"></textarea>
                                    <div class="label">
                                        <span class="label-text-alt">Comma-separated list of allowed file extensions</span>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                                <div class="form-control">
                                    <label class="label" for="minFileSize">
                                        <span class="label-text font-medium">Minimum File Size</span>
                                    </label>
                                    <input type="text" class="input input-bordered" id="minFileSize" name="min_file_size" placeholder="10MB">
                                    <div class="label">
                                        <span class="label-text-alt">Minimum file size to download</span>
                                    </div>
                                </div>

                                <div class="form-control">
                                    <label class="label" for="maxFileSize">
                                        <span class="label-text font-medium">Maximum File Size</span>
                                    </label>
                                    <input type="text" class="input input-bordered" id="maxFileSize" name="max_file_size" placeholder="50GB">
                                    <div class="label">
                                        <span class="label-text-alt">Maximum file size to download</span>
                                    </div>
                                </div>

                                <div class="form-control">
                                    <label class="label" for="removeStalledAfter">
                                        <span class="label-text font-medium">Remove Stalled After</span>
                                    </label>
                                    <input type="text" class="input input-bordered" id="removeStalledAfter" name="remove_stalled_after" placeholder="1h">
                                    <div class="label">
                                        <span class="label-text-alt">Duration before removing stalled torrents</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Debrid Tab Content -->
                    <div class="tab-content hidden" data-tab-content="debrid">
                        <div class="space-y-6">
                            <div class="flex justify-between items-center">
                                <h2 class="text-2xl font-bold flex items-center">
                                    <i class="bi bi-cloud mr-3 text-secondary"></i>Debrid Services
                                </h2>
                                <button type="button" id="addDebridBtn" class="btn btn-secondary">
                                    <i class="bi bi-plus mr-2"></i>Add Debrid Service
                                </button>
                            </div>

                            <div id="debridConfigs" class="space-y-4">
                                <!-- Dynamic debrid configurations will be added here -->
                            </div>
                        </div>
                    </div>

                    <!-- QBittorrent Tab Content -->
                    <div class="tab-content hidden" data-tab-content="qbittorrent">
                        <div class="space-y-6">
                            <h2 class="text-2xl font-bold flex items-center mb-6">
                                <i class="bi bi-download mr-3 text-accent"></i>QBittorrent Settings
                            </h2>

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                                <div class="form-control">
                                    <label class="label" for="qbit.download_folder">
                                        <span class="label-text font-medium">Download Folder</span>
                                    </label>
                                    <input type="text" class="input input-bordered" name="qbit.download_folder" id="qbit.download_folder">
                                    <div class="label">
                                        <span class="label-text-alt">Folder where downloaded files will be stored</span>
                                    </div>
                                </div>

                                <div class="form-control">
                                    <label class="label" for="qbit.refresh_interval">
                                        <span class="label-text font-medium">Refresh Interval (seconds)</span>
                                    </label>
                                    <input type="number" class="input input-bordered" name="qbit.refresh_interval" id="qbit.refresh_interval" min="1">
                                </div>

                                <div class="form-control">
                                    <label class="label" for="qbit.max_downloads">
                                        <span class="label-text font-medium">Maximum Downloads</span>
                                    </label>
                                    <input type="number" class="input input-bordered" name="qbit.max_downloads" id="qbit.max_downloads" min="0">
                                    <div class="label">
                                        <span class="label-text-alt">Maximum simultaneous downloads (0 = unlimited)</span>
                                    </div>
                                </div>

                                <div class="form-control">
                                    <label class="label cursor-pointer justify-start gap-3">
                                        <input type="checkbox" class="checkbox" name="qbit.skip_pre_cache" id="qbit.skip_pre_cache">
                                        <div>
                                            <span class="label-text font-medium">Skip Pre-Cache</span>
                                            <div class="label-text-alt">Disable pre-caching to speed up imports</div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Arrs Tab Content -->
                    <div class="tab-content hidden" data-tab-content="arrs">
                        <div class="space-y-6">
                            <div class="flex justify-between items-center">
                                <h2 class="text-2xl font-bold flex items-center">
                                    <i class="bi bi-collection mr-3 text-warning"></i>Arr Applications
                                </h2>
                                <button type="button" id="addArrBtn" class="btn btn-warning">
                                    <i class="bi bi-plus mr-2"></i>Add Arr Service
                                </button>
                            </div>

                            <div id="arrConfigs" class="space-y-4">
                                <!-- Dynamic arr configurations will be added here -->
                            </div>
                        </div>
                    </div>

                    <!-- Repair Tab Content -->
                    <div class="tab-content hidden" data-tab-content="repair">
                        <div class="space-y-6">
                            <h2 class="text-2xl font-bold flex items-center mb-6">
                                <i class="bi bi-wrench mr-3 text-error"></i>Repair Settings
                            </h2>

                            <div class="form-control">
                                <label class="label cursor-pointer justify-start gap-3">
                                    <input type="checkbox" class="checkbox checkbox-lg" name="repair.enabled" id="repair.enabled">
                                    <div>
                                        <span class="label-text font-medium text-lg">Enable Scheduled Repair</span>
                                        <div class="label-text-alt">Automatically repair broken symlinks and missing files</div>
                                    </div>
                                </label>
                            </div>

                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                                <div class="space-y-4">
                                    <div class="form-control">
                                        <label class="label" for="repair.interval">
                                            <span class="label-text font-medium">Repair Interval</span>
                                        </label>
                                        <input type="text" class="input input-bordered" name="repair.interval" id="repair.interval" placeholder="24h">
                                        <div class="label">
                                            <span class="label-text-alt">How often to run repair (e.g., 24h, 1d, 03:00, or crontab)</span>
                                        </div>
                                    </div>

                                    <div class="form-control">
                                        <label class="label" for="repair.workers">
                                            <span class="label-text font-medium">Worker Threads</span>
                                        </label>
                                        <input type="number" class="input input-bordered" name="repair.workers" id="repair.workers" min="1" placeholder="40">
                                        <div class="label">
                                            <span class="label-text-alt">Number of concurrent repair workers</span>
                                        </div>
                                    </div>

                                    <div class="form-control">
                                        <label class="label" for="repair.strategy">
                                            <span class="label-text font-medium">Repair Strategy</span>
                                        </label>
                                        <select class="select select-bordered" name="repair.strategy" id="repair.strategy">
                                            <option value="per_torrent" selected>Per Torrent</option>
                                            <option value="per_file">Per File</option>
                                        </select>
                                        <div class="label">
                                            <span class="label-text-alt">How to handle repairs</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="space-y-4">
                                    <div class="form-control">
                                        <label class="label" for="repair.zurg_url">
                                            <span class="label-text font-medium">Zurg URL</span>
                                        </label>
                                        <input type="url" class="input input-bordered" name="repair.zurg_url" id="repair.zurg_url" placeholder="http://zurg:9999">
                                        <div class="label">
                                            <span class="label-text-alt">Optional Zurg instance to speed up repairs</span>
                                        </div>
                                    </div>

                                    <div class="form-control">
                                        <label class="label cursor-pointer justify-start gap-3">
                                            <input type="checkbox" class="checkbox" name="repair.use_webdav" id="repair.use_webdav">
                                            <div>
                                                <span class="label-text font-medium">Use WebDAV</span>
                                                <div class="label-text-alt">Use internal WebDAV for repairs</div>
                                            </div>
                                        </label>
                                    </div>

                                    <div class="form-control">
                                        <label class="label cursor-pointer justify-start gap-3">
                                            <input type="checkbox" class="checkbox" name="repair.auto_process" id="repair.auto_process">
                                            <div>
                                                <span class="label-text font-medium">Auto Process</span>
                                                <div class="label-text-alt">Automatically delete broken symlinks and re-search</div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Rclone Tab Content -->
                    <div class="tab-content hidden" data-tab-content="rclone">
                        <div class="space-y-6">
                            <h2 class="text-2xl font-bold flex items-center mb-6">
                                <i class="bi bi-hdd-stack mr-3 text-info"></i>Rclone Mount Settings
                            </h2>

                            <div class="form-control">
                                <label class="label cursor-pointer justify-start gap-3">
                                    <input type="checkbox" class="checkbox checkbox-lg" name="rclone.enabled" id="rclone.enabled">
                                    <div>
                                        <span class="label-text font-medium text-lg">Enable Mount</span>
                                        <div class="label-text-alt">Automatically mount your debrid items</div>
                                    </div>
                                </label>
                            </div>

                            <!-- Mount Path Section -->
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h3 class="text-lg font-semibold mb-4 flex items-center">
                                        <i class="bi bi-folder mr-2"></i>Mount Configuration
                                    </h3>
                                    <div class="grid grid-cols-3 gap-4">
                                        <div class="form-control">
                                            <label class="label" for="rclone.mount_path">
                                                <span class="label-text font-medium">Global Mount Path</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.mount_path" id="rclone.mount_path" placeholder="/mnt/decypharr">
                                            <div class="label">
                                                <span class="label-text-alt">Base directory where all providers will be mounted (e.g., /mnt/decypharr/realdebrid)</span>
                                            </div>
                                        </div>

                                        <div class="form-control">
                                            <label class="label" for="rclone.uid">
                                                <span class="label-text font-medium">User ID (PUID)</span>
                                            </label>
                                            <input type="number" class="input input-bordered" name="rclone.uid" id="rclone.uid" placeholder="1000" min="0">
                                            <div class="label">
                                                <span class="label-text-alt">User ID for mounted files (0 = current user)</span>
                                            </div>
                                        </div>

                                        <div class="form-control">
                                            <label class="label" for="rclone.gid">
                                                <span class="label-text font-medium">Group ID (PGID)</span>
                                            </label>
                                            <input type="number" class="input input-bordered" name="rclone.gid" id="rclone.gid" placeholder="1000" min="0">
                                            <div class="label">
                                                <span class="label-text-alt">Group ID for mounted files (0 = current group)</span>
                                            </div>
                                        </div>
                                        <div class="form-control">
                                            <label class="label" for="rclone.buffer_size">
                                                <span class="label-text font-medium">Buffer Size</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.buffer_size" id="rclone.buffer_size" placeholder="10M" min="0">
                                            <div class="label">
                                                <span class="label-text-alt">Buffer Size(This caches to memory, be wary!!)</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h3 class="text-lg font-semibold mb-4 flex items-center">
                                        <i class="bi bi-speedometer2 mr-2"></i>VFS Cache Settings
                                    </h3>
                                    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
                                        <div class="form-control">
                                            <label class="label" for="rclone.cache_dir">
                                                <span class="label-text font-medium">Cache Directory</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.cache_dir" id="rclone.cache_dir" placeholder="/tmp/rclone">
                                            <div class="label">
                                                <span class="label-text-alt">Directory for rclone cache files (leave empty for system default)</span>
                                            </div>
                                        </div>
                                        
                                        <div class="form-control">
                                            <label class="label" for="rclone.vfs_cache_mode">
                                                <span class="label-text font-medium">VFS Cache Mode</span>
                                            </label>
                                            <select class="select select-bordered" name="rclone.vfs_cache_mode" id="rclone.vfs_cache_mode">
                                                <option value="off">Off - No caching</option>
                                                <option value="minimal">Minimal - Cache file structure only</option>
                                                <option value="writes">Writes - Cache writes for better performance</option>
                                                <option value="full">Full - Cache reads and writes</option>
                                            </select>
                                            <div class="label">
                                                <span class="label-text-alt">VFS caching mode for performance optimization</span>
                                            </div>
                                        </div>
                                        
                                        <div class="form-control">
                                            <label class="label" for="rclone.vfs_cache_max_size">
                                                <span class="label-text font-medium">VFS Cache Max Size</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.vfs_cache_max_size" id="rclone.vfs_cache_max_size" placeholder="1G">
                                            <div class="label">
                                                <span class="label-text-alt">Maximum cache size (e.g., 1G, 500M, leave empty for unlimited)</span>
                                            </div>
                                        </div>
                                        
                                        <div class="form-control">
                                            <label class="label" for="rclone.vfs_cache_max_age">
                                                <span class="label-text font-medium">VFS Cache Max Age</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.vfs_cache_max_age" id="rclone.vfs_cache_max_age" placeholder="1h">
                                            <div class="label">
                                                <span class="label-text-alt">Maximum age of cache entries (e.g., 1h, 30m)</span>
                                            </div>
                                        </div>

                                        <div class="form-control">
                                            <label class="label" for="rclone.vfs_read_chunk_size">
                                                <span class="label-text font-medium">Read Chunk Size</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.vfs_read_chunk_size" id="rclone.vfs_read_chunk_size" placeholder="128M">
                                            <div class="label">
                                                <span class="label-text-alt">Size of data chunks to read (e.g., 128M, 64M)</span>
                                            </div>
                                        </div>

                                        <div class="form-control">
                                            <label class="label" for="rclone.vfs_read_chunk_size_limit">
                                                <span class="label-text font-medium">Read Chunk Size Limit</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.vfs_read_chunk_size_limit" id="rclone.vfs_read_chunk_size_limit" placeholder="128M">
                                            <div class="label">
                                                <span class="label-text-alt">Limit Read Chunk Size</span>
                                            </div>
                                        </div>

                                        <div class="form-control">
                                            <label class="label" for="rclone.vfs_read_ahead">
                                                <span class="label-text font-medium">Read Ahead</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.vfs_read_ahead" id="rclone.vfs_read_ahead" placeholder="128k">
                                            <div class="label">
                                                <span class="label-text-alt">Read ahead buffer size (e.g., 128k, 256k)</span>
                                            </div>
                                        </div>

                                        <div class="form-control">
                                            <label class="label" for="rclone.dir_cache_time">
                                                <span class="label-text font-medium">Directory Cache Time</span>
                                            </label>
                                            <input type="text" class="input input-bordered" name="rclone.dir_cache_time" id="rclone.dir_cache_time" placeholder="5m">
                                            <div class="label">
                                                <span class="label-text-alt">How long to cache directory listings (e.g., 5m, 10m)</span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <!-- Advanced Settings Section -->
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h3 class="text-lg font-semibold mb-4 flex items-center">
                                        <i class="bi bi-gear mr-2"></i>Advanced Settings
                                    </h3>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                                        <div class="form-control">
                                            <label class="label cursor-pointer justify-start gap-3">
                                                <input type="checkbox" class="checkbox" name="rclone.no_modtime" id="rclone.no_modtime">
                                                <div>
                                                    <span class="label-text font-medium">No Modification Time</span>
                                                    <div class="label-text-alt">Don't read/write modification times</div>
                                                </div>
                                            </label>
                                        </div>
                                        
                                        <div class="form-control">
                                            <label class="label cursor-pointer justify-start gap-3">
                                                <input type="checkbox" class="checkbox" name="rclone.no_checksum" id="rclone.no_checksum">
                                                <div>
                                                    <span class="label-text font-medium">No Checksum</span>
                                                    <div class="label-text-alt">Don't checksum files on upload</div>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div> <!-- End tab-content-container -->
            </div>
        </div>
    </form>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden">
    <div class="flex items-center justify-center h-full">
        <div class="card bg-base-100 shadow-2xl">
            <div class="card-body text-center">
                <span class="loading loading-spinner loading-lg text-primary"></span>
                <h3 class="text-lg font-semibold mt-4">Applying Configuration</h3>
                <p class="text-base-content/70">Please wait while we save your settings...</p>
            </div>
        </div>
    </div>
</div>

<script>
    // Tab Navigation Handler
    document.addEventListener('DOMContentLoaded', function() {
        window.configManager = new ConfigManager();

        const tabButtons = document.querySelectorAll('.tab-button');
        const tabContents = document.querySelectorAll('.tab-content');

        // Tab switching function
        function switchTab(targetTab) {

            // Remove active class from all tabs
            tabButtons.forEach(btn => {
                btn.classList.remove('active');
            });

            // Add active class to clicked tab
            const activeButton = document.querySelector(`[data-tab="${targetTab}"]`);
            if (activeButton) {
                activeButton.classList.add('active');
            }

            // Hide all tab contents
            tabContents.forEach(content => {
                content.classList.add('hidden');
            });

            // Show selected tab content
            const activeContent = document.querySelector(`[data-tab-content="${targetTab}"]`);
            if (activeContent) {
                activeContent.classList.remove('hidden');
            }

            // Update URL hash for bookmarking
            window.location.hash = `tab-${targetTab}`;
        }

        // Add click handlers to tab buttons
        tabButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                e.preventDefault();
                const tabId = button.getAttribute('data-tab');
                switchTab(tabId);
            });
        });

        // Handle initial tab based on URL hash
        const hash = window.location.hash;
        if (hash.startsWith('#tab-')) {
            const tabId = hash.replace('#tab-', '');
            switchTab(tabId);
        } else {
            switchTab('general');
        }

        // Handle browser back/forward
        window.addEventListener('hashchange', () => {
            const hash = window.location.hash;
            if (hash.startsWith('#tab-')) {
                const tabId = hash.replace('#tab-', '');
                switchTab(tabId);
            }
        });
    });
</script>
{{ end }}