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

    <p class="text-gray-400 mb-6">{{ $filter.Description }}</p>

    <!-- Tabs -->
    <div class="flex border-b border-gray-700 mb-6 gap-0">
        <button onclick="showTab('search')" id="tab-search" class="px-6 py-3 border-b-2 border-blue-600 font-bold text-white">Search</button>
        <button onclick="showTab('blocklist')" id="tab-blocklist" class="px-6 py-3 border-b-2 border-transparent hover:border-gray-600 text-gray-400">Blocklist</button>
        <button onclick="showTab('whitelist')" id="tab-whitelist" class="px-6 py-3 border-b-2 border-transparent hover:border-gray-600 text-gray-400">Whitelist</button>
    </div>

    <!-- Search Tab -->
    <div id="tab-content-search" class="tab-content">
        <div class="bg-gray-800 p-4 rounded mb-6">
            <div class="flex gap-2 mb-4">
                <input type="text" id="searchQuery" placeholder="Search domains (use * for wildcard)" onkeydown="if(event.key === 'Enter') filterSearch()" class="flex-1 p-2 bg-gray-700 rounded text-white placeholder-gray-400">
                <button type="button" onclick="filterSearch()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded transition">Search</button>
            </div>
        </div>
        <div id="searchResults"></div>
    </div>

    <!-- Blocklist Tab -->
    <div id="tab-content-blocklist" class="tab-content hidden">
        <div class="grid grid-cols-2 gap-6">
            <!-- Add Domain -->
            <div>
                <h3 class="text-xl font-bold mb-4">Add Domain</h3>
                <form method="POST" action="/filter/blocklist?filter={{ $filter.Name }}" class="bg-gray-800 p-4 rounded space-y-4">
                    <input type="hidden" name="action" value="add_domain">
                    <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
                    <input type="text" name="domain" placeholder="Enter domain" class="w-full p-2 bg-gray-700 rounded text-white" required>
                    <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold px-4 py-2 rounded transition">Add</button>
                </form>
            </div>

            <!-- Manage URLs -->
            <div>
                <h3 class="text-xl font-bold mb-4">Import URLs</h3>
                <a href="/filter/blocklist/urls?filter={{ $filter.Name }}" class="block bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded text-center transition">Manage URLs</a>
            </div>
        </div>
    </div>

    <!-- Whitelist Tab -->
    <div id="tab-content-whitelist" class="tab-content hidden">
        <div class="grid grid-cols-2 gap-6">
            <!-- Add Domain -->
            <div>
                <h3 class="text-xl font-bold mb-4">Add Domain</h3>
                <form method="POST" action="/filter/whitelist?filter={{ $filter.Name }}" class="bg-gray-800 p-4 rounded space-y-4">
                    <input type="hidden" name="action" value="add_domain">
                    <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
                    <input type="text" name="domain" placeholder="Enter domain" class="w-full p-2 bg-gray-700 rounded text-white" required>
                    <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold px-4 py-2 rounded transition">Add</button>
                </form>
            </div>

            <!-- Manage URLs -->
            <div>
                <h3 class="text-xl font-bold mb-4">Import URLs</h3>
                <a href="/filter/whitelist/urls?filter={{ $filter.Name }}" class="block bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded text-center transition">Manage URLs</a>
            </div>
        </div>
    </div>
</div>

<script>
function showTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('#tab-search, #tab-blocklist, #tab-whitelist').forEach(btn => btn.classList.remove('border-blue-600', 'text-white'));
    document.querySelectorAll('#tab-search, #tab-blocklist, #tab-whitelist').forEach(btn => btn.classList.add('border-transparent', 'text-gray-400'));

    // Show selected tab
    document.getElementById('tab-content-' + tabName).classList.remove('hidden');
    document.getElementById('tab-' + tabName).classList.add('border-blue-600', 'text-white');
    document.getElementById('tab-' + tabName).classList.remove('border-transparent', 'text-gray-400');
}

function filterSearch() {
    const query = document.getElementById('searchQuery').value.trim();
    if (!query) {
        document.getElementById('searchResults').innerHTML = '<p class="text-gray-300">Please enter a search query.</p>';
        return;
    }
    document.getElementById('searchResults').innerHTML = '<p class="text-gray-300">Searching...</p>';
    
    fetch('/api/filter-search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': '{{ .CSRFToken }}'
        },
        body: 'filter=' + encodeURIComponent('{{ $filter.Name }}') + '&query=' + encodeURIComponent(query)
    })
    .then(response => response.json())
    .then(data => {
        let html = '';
        if (data.results && data.results.length > 0) {
            html = '<h3 class="text-xl font-bold mb-4">Results (' + data.results.length + ' found)</h3>';
            html += '<ul class="space-y-2 max-h-96 overflow-y-auto">';
            data.results.forEach(r => {
                html += '<li class="bg-gray-800 p-3 rounded flex"><div class="flex-1 text-sm text-gray-300 break-all">' + r.domain + '</div><div class="w-24 text-sm text-blue-400 text-right select-none">' + r.source + '</div></li>';
            });
            html += '</ul>';
        } else {
            html = '<p class="text-gray-300">No results found for \'' + query + '\'</p>';
        }
        document.getElementById('searchResults').innerHTML = html;
    })
    .catch(error => {
        document.getElementById('searchResults').innerHTML = '<p class="text-red-400">Error searching.</p>';
    });
}
</script>
{{ end }}