{{ define "index" }}
<div class="space-y-6">

    <!-- Controls Section -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <!-- Dashboard Mode Toggle -->
            <div class="flex justify-center mb-4">
                <div class="join">
                    <button class="btn btn-primary join-item" id="torrentsMode" data-mode="torrents">
                        <i class="bi bi-magnet mr-2"></i>Torrents
                    </button>
                    <button class="btn btn-outline join-item" id="nzbsMode" data-mode="nzbs">
                        <i class="bi bi-file-zip mr-2"></i>NZBs
                    </button>
                </div>
            </div>

            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
                <!-- Batch Actions -->
                <div class="flex items-center gap-2">
                    <button class="btn btn-secondary btn-sm hidden" id="batchDeleteBtn">
                        <i class="bi bi-trash"></i>
                        <span class="hidden sm:inline">Delete Selected</span>
                    </button>
                    <button class="btn btn-error btn-sm hidden" id="batchDeleteDebridBtn">
                        <i class="bi bi-cloud-fog-fill"></i>
                        <span class="hidden sm:inline">Remove From Debrid</span>
                    </button>
                    <button class="btn btn-outline btn-sm" id="refreshBtn">
                        <i class="bi bi-arrow-clockwise"></i>
                        <span class="hidden sm:inline">Refresh</span>
                    </button>
                </div>

                <!-- Filters -->
                <div class="flex flex-wrap items-center gap-2 w-full lg:w-auto">
                    <select class="select select-bordered select-sm w-full sm:w-auto min-w-32" id="stateFilter">
                        <option value="">All States</option>
                        <option value="pausedUP">Completed</option>
                        <option value="downloading">Downloading</option>
                        <option value="error">Error</option>
                    </select>
                    <select class="select select-bordered select-sm w-full sm:w-auto min-w-32" id="categoryFilter">
                        <option value="">All Categories</option>
                    </select>
                    <select class="select select-bordered select-sm w-full sm:w-auto min-w-48" id="sortSelector">
                        <option value="added_on" selected>Date Added (Newest First)</option>
                        <option value="added_on_asc">Date Added (Oldest First)</option>
                        <option value="name_asc">Name (A-Z)</option>
                        <option value="name_desc">Name (Z-A)</option>
                        <option value="size_desc">Size (Largest First)</option>
                        <option value="size_asc">Size (Smallest First)</option>
                        <option value="progress_desc">Progress (Most First)</option>
                        <option value="progress_asc">Progress (Least First)</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body p-0">
            <div class="overflow-x-auto">
                <table class="table table-hover">
                    <!-- Torrents Headers -->
                    <thead class="bg-base-200" id="torrentsHeaders">
                    <tr>
                        <th class="w-12">
                            <label class="cursor-pointer">
                                <input type="checkbox" class="checkbox checkbox-sm" id="selectAll">
                            </label>
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-file-text mr-2"></i>Name
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-hdd mr-2"></i>Size
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-speedometer2 mr-2"></i>Progress
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-download mr-2"></i>Speed
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-tag mr-2"></i>Category
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-cloud mr-2"></i>Debrid
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-people mr-2"></i>Seeders
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-activity mr-2"></i>State
                        </th>
                        <th class="font-semibold w-32">Actions</th>
                    </tr>
                    </thead>
                    
                    <!-- NZBs Headers -->
                    <thead class="bg-base-200 hidden" id="nzbsHeaders">
                    <tr>
                        <th class="w-12">
                            <label class="cursor-pointer">
                                <input type="checkbox" class="checkbox checkbox-sm" id="selectAllNzb">
                            </label>
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-file-zip mr-2"></i>Name
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-hdd mr-2"></i>Size
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-speedometer2 mr-2"></i>Progress
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-clock mr-2"></i>ETA
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-tag mr-2"></i>Category
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-activity mr-2"></i>Status
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-calendar mr-2"></i>Age
                        </th>
                        <th class="font-semibold w-32">Actions</th>
                    </tr>
                    </thead>
                    
                    <tbody id="dataList">
                    <!-- Dynamic content will be loaded here -->
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="flex flex-col sm:flex-row justify-between items-center p-6 border-t border-base-200 gap-4">
                <div class="text-sm text-base-content/70">
                    <span id="paginationInfo">Loading data...</span>
                </div>
                <div class="join" id="paginationControls"></div>
            </div>
        </div>
    </div>

    <!-- Empty State -->
    <div class="card bg-base-100 shadow-xl hidden" id="emptyState">
        <div class="card-body text-center py-16">
            <div class="text-6xl text-base-content/30 mb-4">
                <i class="bi bi-inbox"></i>
            </div>
            <h3 class="text-2xl font-bold mb-2" id="emptyStateTitle">No Data Found</h3>
            <p class="text-base-content/70 mb-6" id="emptyStateMessage">No downloads found.</p>
            <a href="{{.URLBase}}download" class="btn btn-primary">
                <i class="bi bi-plus-circle mr-2"></i>Add New Download
            </a>
        </div>
    </div>
</div>

<!-- Torrent Context Menu -->
<ul class="menu bg-base-100 shadow-lg rounded-box context-menu hidden fixed z-50" id="torrentContextMenu">
    <li class="menu-title">
        <span class="torrent-name text-sm font-bold truncate max-w-48"></span>
    </li>
    <hr/>
    <li><a class="menu-item text-sm" data-action="copy-magnet">
        <i class="bi bi-magnet text-primary"></i>Copy Magnet Link
    </a></li>
    <li><a class="menu-item text-sm" data-action="copy-name">
        <i class="bi bi-clipboard text-info"></i>Copy Name
    </a></li>
    <hr/>
    <li><a class="menu-item text-sm text-error" data-action="delete">
        <i class="bi bi-trash"></i>Delete Torrent
    </a></li>
</ul>

<!-- NZB Context Menu -->
<ul class="menu bg-base-100 shadow-lg rounded-box context-menu hidden fixed z-50" id="nzbContextMenu">
    <li class="menu-title">
        <span class="nzb-name text-sm font-bold truncate max-w-48"></span>
    </li>
    <hr/>
    <li><a class="menu-item text-sm" data-action="pause">
        <i class="bi bi-pause text-warning"></i>Pause Download
    </a></li>
    <li><a class="menu-item text-sm" data-action="resume">
        <i class="bi bi-play text-success"></i>Resume Download
    </a></li>
    <li><a class="menu-item text-sm" data-action="retry">
        <i class="bi bi-arrow-clockwise text-info"></i>Retry Download
    </a></li>
    <li><a class="menu-item text-sm" data-action="copy-name">
        <i class="bi bi-clipboard text-info"></i>Copy Name
    </a></li>
    <hr/>
    <li><a class="menu-item text-sm text-error" data-action="delete">
        <i class="bi bi-trash"></i>Delete NZB
    </a></li>
</ul>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        window.dashboard = new Dashboard();
    });
</script>
{{ end }}