{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<h1>[~] Dashboard</h1>

<div class="toolbar">
    <button class="btn" onclick="loadStatus()">Refresh Status</button>
    <button class="btn" onclick="loadDomains()">Check Domains</button>
    <button class="btn" onclick="deploySite()">Deploy Site</button>
    <button class="btn" onclick="testSSH()">Test SSH</button>
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-title">Server Status</div>
        <div class="output" id="status-output"><span class="info">Click "Refresh Status" to load</span></div>
    </div>
    <div class="card">
        <div class="card-title">Domain Status</div>
        <div class="output" id="domain-output"><span class="info">Click "Check Domains" to load</span></div>
    </div>
</div>

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

{% block scripts %}
<script>
async function loadStatus() {
    const res = await apiGet('/api/status');
    showResult(res, 'status-output');
}
async function loadDomains() {
    const res = await apiGet('/api/status/domains');
    showResult(res, 'domain-output');
}
async function deploySite() {
    if (!confirm('Deploy site/ to VPS?')) return;
    document.getElementById('output').innerHTML = '<span class="info">Deploying...</span>';
    const res = await apiPost('/api/deploy/site');
    showResult(res);
}
async function testSSH() {
    const res = await apiGet('/api/ssh/test');
    showResult(res);
}
// Auto-load on page load
loadStatus();
loadDomains();
</script>
{% endblock %}