{{ define "content" }}
<div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold mb-6">Whitelisted Domains</h1>
    <div class="mb-6 bg-gray-800 p-4 rounded">
        <div class="flex gap-2 mb-4">
            <input type="text" id="query" placeholder="Search domains exact match (use * as wildcard)" onkeydown="if(event.key === 'Enter') searchWhitelist()" class="flex-1 p-2 bg-gray-700 rounded text-white placeholder-gray-400">
            <button type="button" onclick="searchWhitelist()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-4 py-2 rounded transition">Search</button>
        </div>
        <form method="POST" action="/whitelist" class="flex gap-2">
            <input type="hidden" name="action" value="add_domain">
            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
            <input type="text" name="domain" placeholder="Enter domain to add" class="flex-1 p-2 bg-gray-700 rounded text-white placeholder-gray-400">
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold px-4 py-2 rounded transition">Add</button>
        </form>
    </div>
    <div id="results"></div>
</div>
<script>
function searchWhitelist() {
    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-whitelist', {
        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.results && data.results.length > 0) {
            html = '<h2 class="text-xl font-bold mb-4">Results (' + data.results.length + ' found)</h2>';
            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 justify-between"><span class="text-sm text-gray-300 break-all">' + r.domain + '</span><span class="text-sm text-blue-400 select-none">' + r.source + '</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 }}</content>
<parameter name="filePath">/home/nahaku/Downloads/unifi_mama_bcp/script/goapp/templates/whitelist.html