{{ define "content" }}
{{ $filter := index .PageData "Filter" }}
<div class="max-w-4xl">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">Edit Filter</h1>
        <a href="/filters" class="text-blue-400 hover:text-blue-300">← Back to Filters</a>
    </div>

    <div class="bg-gray-800 p-6 rounded border border-gray-700">
        <form method="POST" action="/filters/edit?filter={{ $filter.Name }}" 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" value="{{ $filter.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" value="{{ $filter.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" value="{{ $filter.BlocklistFile }}" placeholder="e.g., blocklist.txt" 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" value="{{ $filter.WhitelistFile }}" placeholder="e.g., whitelist.txt" 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-yellow-600 hover:bg-yellow-700 text-white font-bold px-6 py-3 rounded transition">Save Changes</button>
                <a href="/filters" class="bg-gray-700 hover:bg-gray-600 text-white font-bold px-6 py-3 rounded transition text-center">Cancel</a>
            </div>
        </form>
    </div>
</div>
{{ end }}