---
import Layout from "../../layouts/Layout.astro"
---
<Layout title="">
    <div>
        <pre id="get-response">Loading domains...</pre>
    </div>

    <script is:inline>
        fetch('http://localhost:2058/host-api/v1/list-domain/')
            .then(response => {
                if (!response.ok) throw new Error('Network error');
                return response.json();
            })
            .then(data => {
                const pre = document.getElementById('get-response');
                if (data.status === 'success') {
                    // Format domains as a table
                    let output = 'DOMAINS LIST:\n\n';
                    output += 'Domain'.padEnd(40) + 'IP'.padEnd(15) + 'SSL'.padEnd(5) + 'Status\n';
                    output += '-'.repeat(70) + '\n';
                    
                    if (Object.keys(data.domains).length > 0) {
                        Object.entries(data.domains).forEach(([domain, info]) => {
                            output += `${domain.padEnd(40)}${info.IP.padEnd(15)}${info.SSL.padEnd(5)}${info.SUSPENDED === 'no' ? 'Active' : 'Suspended'}\n`;
                        });
                    } else {
                        output += 'No domains found for this user\n';
                    }
                    
                    pre.textContent = output;
                } else {
                    pre.textContent = `❌ Error: ${data.message}\nDebug: ${data.debug || ''}\nJSON Error: ${data.json_error || ''}`;
                }
            })
            .catch(error => {
                document.getElementById('get-response').textContent = `❌ Fetch Error: ${error.message}`;
            });
    </script>
</Layout>