{{ define "content" }}
<div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold mb-6">URL Lists</h1>
    <form method="POST" class="mb-6 bg-gray-800 p-4 rounded">
        <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
        <input type="hidden" name="action" value="add">
        <div class="flex gap-2">
            <input type="text" name="url" placeholder="Add URL (e.g., https://example.com/blocklist.txt)" class="flex-1 p-2 bg-gray-700 rounded text-white placeholder-gray-400">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded transition">Add</button>
        </div>
    </form>
    <ul class="space-y-2">
        {{ range $i, $url := .PageData.URLs }}
        <li class="flex justify-between items-center bg-gray-800 p-3 rounded">
            <span class="text-sm text-gray-300 break-all">{{ $url }}</span>
            <div class="flex gap-2 ml-4">
                <form method="POST" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
                    <input type="hidden" name="action" value="toggle">
                    <input type="hidden" name="index" value="{{ $i }}">
                    <button type="submit" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold px-3 py-1 rounded text-sm transition">Toggle</button>
                </form>
                <form method="POST" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
                    <input type="hidden" name="action" value="remove">
                    <input type="hidden" name="index" value="{{ $i }}">
                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold px-3 py-1 rounded text-sm transition">Remove</button>
                </form>
            </div>
        </li>
        {{ end }}
    </ul>
</div>
{{ end }}