{{ define "content" }}
<div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold mb-6">Blocked Domains</h1>
    <div class="mb-6 bg-gray-800 p-4 rounded">
        <div class="flex gap-2">
            <input type="text" id="query" placeholder="Search domains exact match (use * as wildcard)" onkeydown="if(event.key === 'Enter') searchDomains()" class="flex-1 p-2 bg-gray-700 rounded text-white placeholder-gray-400">
            <button type="button" onclick="searchDomains()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded transition">Search</button>
        </div>
    </div>
    <div id="results"></div>
</div>
<script>
function searchDomains() {
    const query = document.getElementById('query').value.trim();
    if (!query) {
        document.getElementById('results').innerHTML = '<p class="text-gray-300">Please enter a search query.</p>';
        return;
    }
    document.getElementById('results').innerHTML = '<p class="text-gray-300">Searching...</p>';
    fetch('/api/search-domains', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': '{{ .CSRFToken }}'
        },
        body: 'query=' + encodeURIComponent(query)
    })
    .then(response => response.json())
    .then(data => {
        let html = '';
        if (data.domains && data.domains.length > 0) {
            html = '<h2 class="text-xl font-bold mb-4">Results (' + data.domains.length + ' found)</h2>';
            html += '<ul class="space-y-2 max-h-96 overflow-y-auto">';
            data.domains.forEach(d => {
                html += '<li class="bg-gray-800 p-3 rounded"><span class="text-sm text-gray-300 break-all">' + d + '</span></li>';
            });
            html += '</ul>';
        } else {
            html = '<p class="text-gray-300">No results found for \'' + query + '\'</p>';
        }
        document.getElementById('results').innerHTML = html;
    })
    .catch(error => {
        document.getElementById('results').innerHTML = '<p class="text-red-400">Error searching domains.</p>';
    });
}
</script>
{{ end }}