{{ define "content" }}
<div class="max-w-7xl">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">Filters</h1>
        <button onclick="showNewFilterForm()" class="bg-green-600 hover:bg-green-700 text-white font-bold px-6 py-2 rounded transition">+ New Filter</button>
    </div>

    <!-- New Filter Form (Hidden by default) -->
    <div id="newFilterForm" class="hidden bg-gray-800 p-6 rounded border border-gray-700 mb-6">
        <h2 class="text-2xl font-bold mb-4">Create New Filter</h2>
        <form method="POST" action="/filters/create" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
            
            <div>
                <label class="block text-white font-semibold mb-2">Filter Name</label>
                <input type="text" name="name" placeholder="e.g., Ads Blocklist" class="w-full p-3 bg-gray-700 rounded text-white placeholder-gray-400 border border-gray-600" required>
            </div>

            <div>
                <label class="block text-white font-semibold mb-2">Description</label>
                <input type="text" name="description" placeholder="e.g., Blocks advertising domains" class="w-full p-3 bg-gray-700 rounded text-white placeholder-gray-400 border border-gray-600">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-white font-semibold mb-2">Blocklist Filename</label>
                    <input type="text" name="blocklist_file" placeholder="e.g., domainlist_<X>.list" class="w-full p-3 bg-gray-700 rounded text-white placeholder-gray-400 border border-gray-600" required>
                </div>
                <div>
                    <label class="block text-white font-semibold mb-2">Whitelist Filename</label>
                    <input type="text" name="whitelist_file" placeholder="e.g., domainlist_<X+1>.list" class="w-full p-3 bg-gray-700 rounded text-white placeholder-gray-400 border border-gray-600" required>
                </div>
            </div>

            <div class="flex gap-2">
                <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold px-6 py-3 rounded transition">Create Filter</button>
                <button type="button" onclick="hideNewFilterForm()" class="bg-gray-700 hover:bg-gray-600 text-white font-bold px-6 py-3 rounded transition">Cancel</button>
            </div>
        </form>
    </div>

    <!-- Filters Table -->
    {{ if .PageData }}
    {{ $filters := index .PageData "Filters" }}
    {{ if $filters }}
    <div class="overflow-x-auto">
        <table class="w-full bg-gray-800 rounded border border-gray-700">
            <thead class="bg-gray-900">
                <tr>
                    <th class="px-6 py-3 text-left font-semibold text-white">Name</th>
                    <th class="px-6 py-3 text-left font-semibold text-white">Description</th>
                    <th class="px-6 py-3 text-center font-semibold text-white">Blocklist File</th>
                    <th class="px-6 py-3 text-center font-semibold text-white">Whitelist File</th>
                    <th class="px-6 py-3 text-center font-semibold text-white">Actions</th>
                </tr>
            </thead>
            <tbody>
                {{ range $filters }}
                <tr class="border-t border-gray-700 hover:bg-gray-750 transition">
                    <td class="px-6 py-4 text-white font-semibold">{{ .Name }}</td>
                    <td class="px-6 py-4 text-gray-300">{{ .Description }}</td>
                    <td class="px-6 py-4 text-gray-400 text-sm text-center">{{ .BlocklistFile }}</td>
                    <td class="px-6 py-4 text-gray-400 text-sm text-center">{{ .WhitelistFile }}</td>
                    <td class="px-6 py-4 text-center">
                        <div class="flex gap-2 justify-center">
                            <a href="/filter?filter={{ .Name }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-3 py-1 rounded text-sm transition" title="View/Search">View</a>
                            <a href="/filters/edit?filter={{ .Name }}" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold px-3 py-1 rounded text-sm transition" title="Edit filter">Edit</a>
                            <a href="/filter/whitelist/urls?filter={{ .Name }}" class="bg-purple-600 hover:bg-purple-700 text-white font-bold px-3 py-1 rounded text-sm transition" title="Edit whitelist">Whitelist</a>
                            <a href="/filter/blocklist/urls?filter={{ .Name }}" class="bg-red-600 hover:bg-red-700 text-white font-bold px-3 py-1 rounded text-sm transition" title="Edit blocklist">Blacklist</a>
                        </div>
                    </td>
                </tr>
                {{ end }}
            </tbody>
        </table>
    </div>
    {{ else }}
    <p class="text-gray-300">No filters configured.</p>
    {{ end }}
    {{ else }}
    <p class="text-gray-300">No filters configured.</p>
    {{ end }}
</div>

<script>
function showNewFilterForm() {
    document.getElementById('newFilterForm').classList.remove('hidden');
}

function hideNewFilterForm() {
    document.getElementById('newFilterForm').classList.add('hidden');
    // Reset form
    document.querySelector('#newFilterForm form').reset();
}
</script>
{{ end }}