{{ define "repair" }}
<div class="space-y-6">
    {{ if .NeedSetup }}
    <div role="alert" class="alert alert-warning">
        <i class="bi bi-exclamation-triangle text-xl"></i>
        <div>
            <h3 class="font-bold">Configuration Required</h3>
            <div class="text-sm">Your configuration is incomplete. Please complete the setup in the <a href="{{.URLBase}}settings" class="link link-hover font-semibold">Settings page</a>.</div>
        </div>
    </div>
    {{ end }}

    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title text-2xl mb-6">
                <i class="bi bi-plus-circle mr-2 text-primary"></i>Start New Repair
            </h2>

            <form id="repairForm" class="space-y-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div class="form-control">
                            <label class="label" for="arrSelect">
                                <span class="label-text font-semibold">
                                    <i class="bi bi-collection mr-2 text-secondary"></i>Arr Instance
                                </span>
                            </label>
                            <select class="select select-bordered" id="arrSelect">
                                <option value="">Select an Arr instance</option>
                            </select>
                            <div class="label">
                                <span class="label-text-alt">Choose which Arr service to repair</span>
                            </div>
                        </div>

                        <div class="form-control">
                            <label class="label" for="mediaIds">
                                <span class="label-text font-semibold">
                                    <i class="bi bi-hash mr-2 text-accent"></i>Media IDs
                                </span>
                                <span class="label-text-alt">Optional</span>
                            </label>
                            <input type="text"
                                   class="input input-bordered"
                                   id="mediaIds"
                                   placeholder="123, 456, 789">
                            <div class="label">
                                <span class="label-text-alt">
                                    Enter specific TV DB IDs (Sonarr) or TM DB IDs (Radarr), comma-separated. Leave empty for all media.
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text font-semibold">
                                    <i class="bi bi-sliders mr-2 text-info"></i>Repair Options
                                </span>
                            </label>
                            <div class="space-y-3">
                                <div class="form-control">
                                    <label class="label cursor-pointer justify-start gap-3">
                                        <input type="checkbox" class="checkbox checkbox-lg" id="isAsync" checked>
                                        <div>
                                            <span class="label-text font-medium">Run in Background</span>
                                            <div class="label-text-alt">Process repair job asynchronously</div>
                                        </div>
                                    </label>
                                </div>

                                <div class="form-control">
                                    <label class="label cursor-pointer justify-start gap-3">
                                        <input type="checkbox" class="checkbox checkbox-lg" id="autoProcess">
                                        <div>
                                            <span class="label-text font-medium">Auto Process</span>
                                            <div class="label-text-alt text-warning">
                                                <i class="bi bi-exclamation-triangle mr-1"></i>
                                                Automatically delete broken symlinks and re-search media
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-control">
                            <button type="submit" class="btn btn-primary btn-lg" id="submitRepair">
                                <i class="bi bi-wrench mr-2"></i>Start Repair
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card bg-base-100 shadow-xl">
        <div class="card-header">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 p-6 border-b border-base-200">
                <h2 class="card-title text-xl">
                    <i class="bi bi-list-task mr-2"></i>Repair Jobs
                </h2>
                <div class="flex flex-wrap gap-2">
                    <button id="deleteSelectedJobs" class="btn btn-error btn-sm" disabled>
                        <i class="bi bi-trash mr-1"></i>Delete Selected
                    </button>
                    <button id="refreshJobs" class="btn btn-outline btn-sm">
                        <i class="bi bi-arrow-clockwise mr-1"></i>Refresh
                    </button>
                </div>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="overflow-x-auto">
                <table class="table table-hover" id="jobsTable">
                    <thead class="bg-base-200">
                    <tr>
                        <th class="w-12">
                            <label class="cursor-pointer">
                                <input type="checkbox" class="checkbox checkbox-sm" id="selectAllJobs">
                            </label>
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-hash mr-2"></i>Job ID
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-collection mr-2"></i>Arr Instances
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-calendar mr-2"></i>Started
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-activity mr-2"></i>Status
                        </th>
                        <th class="font-semibold">
                            <i class="bi bi-exclamation-triangle mr-2"></i>Broken Items
                        </th>
                        <th class="font-semibold w-32">Actions</th>
                    </tr>
                    </thead>
                    <tbody id="jobsTableBody">
                    </tbody>
                </table>
            </div>

            <div class="flex justify-center p-6 border-t border-base-200">
                <div class="join" id="jobsPagination">
                </div>
            </div>

            <div id="noJobsMessage" class="text-center py-16 hidden">
                <div class="text-6xl text-base-content/30 mb-4">
                    <i class="bi bi-clipboard-check"></i>
                </div>
                <h3 class="text-2xl font-bold mb-2">No Repair Jobs</h3>
                <p class="text-base-content/70 mb-6">You haven't run any repair jobs yet. Start your first repair above!</p>
            </div>
        </div>
    </div>
</div>

<dialog id="jobDetailsModal" class="modal">
    <div class="modal-box max-w-6xl max-h-[90vh]">
        <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>

        <div class="flex justify-between items-start mb-6">
            <h3 class="font-bold text-2xl">
                <i class="bi bi-info-circle mr-2 text-primary"></i>Job Details
            </h3>
        </div>

        <div class="space-y-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="card bg-base-200">
                    <div class="card-body">
                        <h4 class="card-title text-lg mb-4">Job Information</h4>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium">Job ID:</span>
                                <span class="font-mono" id="modalJobId">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium">Status:</span>
                                <span id="modalJobStatus">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium">Started:</span>
                                <span id="modalJobStarted">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium">Completed:</span>
                                <span id="modalJobCompleted">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card bg-base-200">
                    <div class="card-body">
                        <h4 class="card-title text-lg mb-4">Configuration</h4>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium">Arr Services:</span>
                                <span id="modalJobArrs">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium">Media IDs:</span>
                                <span id="modalJobMediaIds">-</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium">Auto Process:</span>
                                <span id="modalJobAutoProcess">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="errorContainer" class="alert alert-error hidden">
                <i class="bi bi-exclamation-triangle"></i>
                <div>
                    <strong>Error:</strong>
                    <span id="modalJobError">-</span>
                </div>
            </div>

            <div class="card bg-base-200">
                <div class="card-body">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="card-title text-lg">
                            Broken Items
                            <div class="badge badge-secondary" id="totalItemsCount">0</div>
                        </h4>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
                        <div class="form-control">
                            <input type="text"
                                   class="input input-bordered input-sm"
                                   id="itemSearchInput"
                                   placeholder="Search by path...">
                        </div>
                        <div class="form-control">
                            <select class="select select-bordered select-sm" id="arrFilterSelect">
                                <option value="">All Arrs</option>
                            </select>
                        </div>
                        <div class="form-control">
                            <select class="select select-bordered select-sm" id="pathFilterSelect">
                                <option value="">All Types</option>
                                <option value="movie">Movies</option>
                                <option value="tv">TV Shows</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="form-control">
                            <button class="btn btn-outline btn-sm w-full" id="clearFiltersBtn">
                                <i class="bi bi-x-circle mr-1"></i>Clear
                            </button>
                        </div>
                    </div>

                    <div class="overflow-x-auto max-h-96 border border-base-300 rounded-lg">
                        <table class="table table-sm table-hover">
                            <thead class="sticky top-0 bg-base-300">
                            <tr>
                                <th class="font-semibold">Arr</th>
                                <th class="font-semibold">Path</th>
                                <th class="font-semibold w-20">Type</th>
                                <th class="font-semibold w-24">Size</th>
                            </tr>
                            </thead>
                            <tbody id="brokenItemsTableBody">
                            </tbody>
                        </table>
                    </div>

                    <div class="flex justify-center mt-4">
                        <div class="join" id="itemsPagination">
                        </div>
                    </div>

                    <div id="noBrokenItemsMessage" class="text-center py-8 hidden">
                        <div class="text-4xl text-base-content/30 mb-2">
                            <i class="bi bi-check-circle"></i>
                        </div>
                        <p class="text-base-content/70">No broken items found</p>
                    </div>

                    <div id="noFilteredItemsMessage" class="text-center py-8 hidden">
                        <div class="text-4xl text-base-content/30 mb-2">
                            <i class="bi bi-funnel"></i>
                        </div>
                        <p class="text-base-content/70">No items match the current filters</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-action">
            <div class="flex-1">
                <small class="text-base-content/60" id="modalFooterStats">-</small>
            </div>
            <div class="flex gap-2">
                <button type="button" class="btn btn-primary btn-sm hidden" id="processJobBtn">
                    <i class="bi bi-play-fill mr-1"></i>Process
                </button>
                <button type="button" class="btn btn-warning btn-sm hidden" id="stopJobBtn">
                    <i class="bi bi-stop-fill mr-1"></i>Stop
                </button>
            </div>
        </div>
    </div>
</dialog>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        window.repairManager = new RepairManager();
        window.RepairUtils = RepairUtils;
    });
</script>
{{ end }}