{{ define "content" }}
<div class="max-w-6xl mx-auto">
    <h1 class="text-3xl font-bold mb-6">URL Blocklists</h1>
    
    <!-- Add New URL Form -->
    <div class="bg-gray-800 p-6 rounded mb-6">
        <h2 class="text-xl font-bold mb-4">Add New Blocklist</h2>
        <form method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
            <input type="hidden" name="action" value="add">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-1">Name *</label>
                    <input type="text" name="name" placeholder="e.g., AdGuard Default" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-1">Group</label>
                    <input type="text" name="group" placeholder="e.g., Adblock, Malware" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400">
                </div>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">URL *</label>
                <input type="text" name="url" placeholder="https://example.com/blocklist.txt" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400" required>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">Note</label>
                <textarea name="note" placeholder="Optional notes about this blocklist" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400" rows="2"></textarea>
            </div>
            
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded transition">Add Blocklist</button>
        </form>
    </div>
    
    <!-- Blocklists Table -->
    <div class="bg-gray-800 rounded overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-700">
                <tr>
                    <th class="px-4 py-3 text-left text-sm font-bold text-gray-300">Status</th>
                    <th class="px-4 py-3 text-left text-sm font-bold text-gray-300">Name</th>
                    <th class="px-4 py-3 text-left text-sm font-bold text-gray-300">Group</th>
                    <th class="px-4 py-3 text-left text-sm font-bold text-gray-300">URL</th>
                    <th class="px-4 py-3 text-left text-sm font-bold text-gray-300">Note</th>
                    <th class="px-4 py-3 text-left text-sm font-bold text-gray-300">Actions</th>
                </tr>
            </thead>
            <tbody>
                {{ range $i, $item := .PageData.Items }}
                <tr class="border-t border-gray-700 hover:bg-gray-750 transition">
                    <td class="px-4 py-3 text-center">
                        <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="px-3 py-1 rounded text-sm font-bold transition {{ if $item.Enabled }}bg-green-600 hover:bg-green-700 text-white{{ else }}bg-gray-600 hover:bg-gray-700 text-gray-200{{ end }}">
                                {{ if $item.Enabled }}Enabled{{ else }}Disabled{{ end }}
                            </button>
                        </form>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-300">{{ $item.Name }}</td>
                    <td class="px-4 py-3 text-sm text-gray-400">{{ if $item.Group }}{{ $item.Group }}{{ else }}<span class="text-gray-600">-</span>{{ end }}</td>
                    <td class="px-4 py-3 text-sm text-gray-400 max-w-xs truncate" title="{{ $item.URL }}">{{ $item.URL }}</td>
                    <td class="px-4 py-3 text-sm text-gray-400 max-w-xs truncate" title="{{ $item.Note }}">{{ if $item.Note }}{{ $item.Note }}{{ else }}<span class="text-gray-600">-</span>{{ end }}</td>
                    <td class="px-4 py-3 text-sm space-x-2">
                        <button onclick="openEditModal('{{ $i }}', '{{ $item.Name }}', '{{ $item.URL }}', '{{ $item.Group }}', '{{ $item.Note }}')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-2 py-1 rounded transition">
                            Edit
                        </button>
                        <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" onclick="return confirm('Are you sure you want to delete this blocklist?')" class="bg-red-600 hover:bg-red-700 text-white font-bold px-2 py-1 rounded transition">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
                {{ end }}
            </tbody>
        </table>
    </div>
    
    {{ if not .PageData.Items }}
    <div class="text-center text-gray-400 py-8">
        No blocklists configured. Add one to get started.
    </div>
    {{ end }}
</div>

<!-- Edit Modal -->
<div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-gray-800 rounded-lg shadow-lg max-w-md w-full mx-4 p-6">
        <h2 class="text-xl font-bold mb-4">Edit Blocklist</h2>
        <form method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
            <input type="hidden" name="action" value="edit">
            <input type="hidden" name="index" id="modalIndex" value="">
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">Name *</label>
                <input type="text" name="name" id="modalName" placeholder="Name" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400" required>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">Group</label>
                <input type="text" name="group" id="modalGroup" placeholder="Group" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">URL *</label>
                <input type="text" name="url" id="modalURL" placeholder="URL" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400" required>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-1">Note</label>
                <textarea name="note" id="modalNote" placeholder="Note" class="w-full p-2 bg-gray-700 rounded text-white placeholder-gray-400" rows="2"></textarea>
            </div>
            
            <div class="flex gap-2 justify-end">
                <button type="button" onclick="closeEditModal()" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded font-medium transition">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium transition">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openEditModal(index, name, url, group, note) {
    document.getElementById('modalIndex').value = index;
    document.getElementById('modalName').value = name;
    document.getElementById('modalURL').value = url;
    document.getElementById('modalGroup').value = group;
    document.getElementById('modalNote').value = note;
    document.getElementById('editModal').classList.remove('hidden');
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
}

// Close modal when clicking outside
document.getElementById('editModal').addEventListener('click', function(event) {
    if (event.target === this) {
        closeEditModal();
    }
});
</script>
{{ end }}