{% extends "base.html" %}
{% block title %}DNS{% endblock %}
{% block content %}
<h1>[@] DNS Management</h1>

<div class="toolbar">
    <button class="btn" onclick="loadRecords()">Refresh Records</button>
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-title">DNS Records (Hostinger)</div>
        <div id="dns-records" class="output" style="max-height:600px"><span class="info">Loading...</span></div>
    </div>
    <div>
        <div class="card">
            <div class="card-title">Add Record</div>
            <label>Type</label>
            <select id="dns-type">
                <option value="A">A</option>
                <option value="TXT">TXT</option>
            </select>
            <label>Name (subdomain or @ for root)</label>
            <input type="text" id="dns-name" placeholder="e.g. app" style="width:100%">
            <label>Value</label>
            <input type="text" id="dns-value" placeholder="e.g. 31.220.20.55" style="width:100%">
            <br><br>
            <button class="btn" onclick="addRecord()">Add Record</button>
        </div>
        <div class="card">
            <div class="card-title">Delete Record</div>
            <label>Record ID</label>
            <input type="text" id="dns-del-id" placeholder="record ID from list" style="width:100%">
            <br><br>
            <button class="btn btn-danger" onclick="deleteRecord()">Delete Record</button>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-title">Output</div>
    <div class="output" id="output"><span class="info">Ready.</span></div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function loadRecords() {
    const el = document.getElementById('dns-records');
    el.innerHTML = '<span class="info">Loading...</span>';
    const res = await apiGet('/api/dns/records');
    if (!res.ok) { el.innerHTML = '<span class="err">'+res.error+'</span>'; return; }
    const records = Array.isArray(res.data) ? res.data : (res.data.records || [res.data]);
    let html = '';
    for (const r of records) {
        if (Array.isArray(r)) {
            for (const rec of r) {
                html += formatRecord(rec);
            }
        } else {
            html += formatRecord(r);
        }
    }
    el.innerHTML = html || '<span class="info">No records found</span>';
}

function formatRecord(r) {
    const id = r.id || r.record_id || '?';
    const type = r.type || '?';
    const name = r.name || r.host || '?';
    const val = r.content || r.value || r.address || '?';
    const ttl = r.ttl || '';
    return `<div style="margin-bottom:4px;border-bottom:1px solid #222;padding-bottom:4px">` +
        `<span style="color:#888">[${id}]</span> ` +
        `<span style="color:#ffaa00">${type}</span> ` +
        `${name} → ${val} ` +
        `<span style="color:#555">TTL:${ttl}</span></div>`;
}

async function addRecord() {
    const type = document.getElementById('dns-type').value;
    const name = document.getElementById('dns-name').value;
    const value = document.getElementById('dns-value').value;
    if (!name || !value) { alert('Fill in name and value'); return; }
    const res = await apiPost('/api/dns/add', {type, name, value});
    showResult(res);
    loadRecords();
}

async function deleteRecord() {
    const id = document.getElementById('dns-del-id').value;
    if (!id) return;
    if (!confirm('Delete record '+id+'?')) return;
    const res = await apiDelete('/api/dns/delete/'+id);
    showResult(res);
    loadRecords();
}

loadRecords();
</script>
{% endblock %}