{% extends "baseTemplate/index.html" %}
{% load static %}

{% comment %}
==============================================================================
CloudPanel — dashboard
------------------------------------------------------------------------------
Rendered by the baseTemplate dashboard view at URL "/".

Context variables (all optional — every one has a safe default so the page
renders before the backend wires them up):

  websitesCount  databasesCount  emailsCount  ftpCount   int
  websitesLimit  databasesLimit                          int | ""  (package quota)
  cpuPercent     ramPercent      diskPercent             number 0-100
  ramUsedBytes   ramTotalBytes                           int
  diskUsedBytes  diskTotalBytes                          int
  cpuHistory     ramHistory                              list[number]  (oldest first)
  historyLabels                                          list[str]
  services       list of {name, label, state, detail}
                 state in: up | down | warn | unknown
  recentActivity list of {timestamp, user, action, target, level}
                 level in: success | warning | danger | info
  serverInfo     {hostname, os, kernel, uptime, load, ols, python, mariadb}

Live refresh: the top-bar poller broadcasts "cp:resources" with the payload of
/serverstatus/resourceStatus; this page listens and feeds the chart from it.
==============================================================================
{% endcomment %}

{% block title %}Dashboard{% endblock %}

{% block content %}

<div class="cp-page-head">
    <div>
        <h1 class="cp-page-head__title">
            <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
            Dashboard
        </h1>
        <p class="cp-page-head__sub">
            {{ CLOUDPANEL.PANEL_NAME|default:"CloudPanel" }} on
            <strong>{{ serverInfo.hostname|default:CLOUDPANEL.PANEL_DOMAIN|default:"cp.a1hosting.net" }}</strong>
            &middot; {{ serverInfo.os|default:"Ubuntu 26.04 LTS" }}
            &middot; uptime {{ serverInfo.uptime|default:"unknown" }}
        </p>
    </div>
    <div class="cp-page-head__actions">
        {% if currentACL.admin or currentACL.createWebsite %}
        <a href="/websites/createWebsite" class="cp-btn cp-btn--primary">
            <i class="fa-solid fa-plus" aria-hidden="true"></i> Create Website
        </a>
        {% endif %}
        {% if currentACL.admin %}
        <a href="/serverstatus/services" class="cp-btn cp-btn--ghost">
            <i class="fa-solid fa-heart-pulse" aria-hidden="true"></i> Services
        </a>
        {% endif %}
        <button type="button" class="cp-btn cp-btn--ghost" id="cpDashRefresh">
            <i class="fa-solid fa-rotate" aria-hidden="true"></i> Refresh
        </button>
    </div>
</div>

{# ---------------------------------------------------------------- stats #}
<div class="cp-stat-grid">

    <a class="cp-stat" href="/websites/listWebsites">
        <span class="cp-stat__icon"><i class="fa-solid fa-globe" aria-hidden="true"></i></span>
        <span class="cp-stat__body">
            <span class="cp-stat__value" data-cp-stat="websites">{{ websitesCount|default:0 }}</span>
            <span class="cp-stat__label">Websites</span>
            {% if websitesLimit %}<span class="cp-stat__meta">of {{ websitesLimit }} allowed</span>{% endif %}
        </span>
    </a>

    <a class="cp-stat cp-stat--accent" href="/databases/listDBs">
        <span class="cp-stat__icon"><i class="fa-solid fa-database" aria-hidden="true"></i></span>
        <span class="cp-stat__body">
            <span class="cp-stat__value" data-cp-stat="databases">{{ databasesCount|default:0 }}</span>
            <span class="cp-stat__label">Databases</span>
            {% if databasesLimit %}<span class="cp-stat__meta">of {{ databasesLimit }} allowed</span>{% endif %}
        </span>
    </a>

    <a class="cp-stat cp-stat--info" href="/email/listEmails">
        <span class="cp-stat__icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></span>
        <span class="cp-stat__body">
            <span class="cp-stat__value" data-cp-stat="emails">{{ emailsCount|default:0 }}</span>
            <span class="cp-stat__label">Email Accounts</span>
        </span>
    </a>

    <a class="cp-stat cp-stat--success" href="/ftp/listFTPAccounts">
        <span class="cp-stat__icon"><i class="fa-solid fa-folder-tree" aria-hidden="true"></i></span>
        <span class="cp-stat__body">
            <span class="cp-stat__value" data-cp-stat="ftp">{{ ftpCount|default:0 }}</span>
            <span class="cp-stat__label">FTP Accounts</span>
        </span>
    </a>

</div>

<div class="cp-dash-split">

    {# ------------------------------------------------------- CPU / RAM #}
    <div class="cp-card">
        <div class="cp-card__head">
            <div>
                <h2 class="cp-card__title">
                    <i class="fa-solid fa-chart-line" aria-hidden="true"></i> CPU &amp; Memory
                </h2>
                <p class="cp-card__sub">Live, sampled every 5 seconds</p>
            </div>
            <div class="cp-legend">
                <span class="cp-legend__key">
                    <span class="cp-legend__swatch" style="background:var(--cp-primary)"></span> CPU
                </span>
                <span class="cp-legend__key">
                    <span class="cp-legend__swatch" style="background:var(--cp-accent)"></span> RAM
                </span>
            </div>
        </div>
        <div class="cp-card__body">
            <div class="cp-chart">
                <canvas id="cpResourceChart" aria-label="CPU and memory usage over time" role="img"></canvas>
            </div>
        </div>
    </div>

    {# ----------------------------------------------------------- disk #}
    <div class="cp-card">
        <div class="cp-card__head">
            <div>
                <h2 class="cp-card__title">
                    <i class="fa-solid fa-hard-drive" aria-hidden="true"></i> Storage &amp; Memory
                </h2>
                <p class="cp-card__sub">Root filesystem and RAM allocation</p>
            </div>
        </div>
        <div class="cp-card__body">

            <div class="cp-field">
                <div class="cp-progress-row">
                    <strong>Disk</strong>
                    <span id="cpDiskText">
                        {% if diskUsedBytes %}{{ diskUsedBytes|filesizeformat }} / {{ diskTotalBytes|filesizeformat }}{% else %}{{ diskPercent|default:0 }}%{% endif %}
                    </span>
                </div>
                <div class="cp-progress cp-progress--lg">
                    <div class="cp-progress__bar" id="cpDiskBar"
                         data-cp-percent="{{ diskPercent|default:0 }}"></div>
                </div>
            </div>

            <div class="cp-field">
                <div class="cp-progress-row">
                    <strong>Memory</strong>
                    <span id="cpRamText">
                        {% if ramUsedBytes %}{{ ramUsedBytes|filesizeformat }} / {{ ramTotalBytes|filesizeformat }}{% else %}{{ ramPercent|default:0 }}%{% endif %}
                    </span>
                </div>
                <div class="cp-progress cp-progress--lg">
                    <div class="cp-progress__bar" id="cpRamBar"
                         data-cp-percent="{{ ramPercent|default:0 }}"></div>
                </div>
            </div>

            <div class="cp-field">
                <div class="cp-progress-row">
                    <strong>CPU</strong>
                    <span id="cpCpuText">{{ cpuPercent|default:0 }}%</span>
                </div>
                <div class="cp-progress cp-progress--lg">
                    <div class="cp-progress__bar" id="cpCpuBar"
                         data-cp-percent="{{ cpuPercent|default:0 }}"></div>
                </div>
            </div>

            <hr>

            <div class="cp-table-wrap">
                <table class="cp-table cp-table--compact">
                    <tbody>
                        <tr><td class="cp-muted">Load average</td>
                            <td class="cp-mono">{{ serverInfo.load|default:"—" }}</td></tr>
                        <tr><td class="cp-muted">Kernel</td>
                            <td class="cp-mono">{{ serverInfo.kernel|default:"—" }}</td></tr>
                        <tr><td class="cp-muted">OpenLiteSpeed</td>
                            <td class="cp-mono">{{ serverInfo.ols|default:"—" }}</td></tr>
                        <tr><td class="cp-muted">MariaDB</td>
                            <td class="cp-mono">{{ serverInfo.mariadb|default:"—" }}</td></tr>
                        <tr><td class="cp-muted">Python</td>
                            <td class="cp-mono">{{ serverInfo.python|default:"—" }}</td></tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>

{# -------------------------------------------------------- service grid #}
<div class="cp-card">
    <div class="cp-card__head">
        <div>
            <h2 class="cp-card__title">
                <i class="fa-solid fa-heart-pulse" aria-hidden="true"></i> Service Health
            </h2>
            <p class="cp-card__sub">systemd units backing the panel</p>
        </div>
        {% if currentACL.admin %}
        <a href="/serverstatus/services" class="cp-btn cp-btn--ghost cp-btn--sm">
            <i class="fa-solid fa-sliders" aria-hidden="true"></i> Manage
        </a>
        {% endif %}
    </div>
    <div class="cp-card__body">
        <div class="cp-service-grid" id="cpServiceGrid">
            {% for service in services %}
            <div class="cp-service is-{{ service.state|default:'unknown' }}" data-cp-service="{{ service.name }}">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">{{ service.label|default:service.name }}</p>
                    <p class="cp-service__meta">{{ service.detail|default:service.state|default:"unknown" }}</p>
                </div>
            </div>
            {% empty %}
            <div class="cp-service is-unknown" data-cp-service="litespeed">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">OpenLiteSpeed</p>
                    <p class="cp-service__meta">awaiting status</p>
                </div>
            </div>
            <div class="cp-service is-unknown" data-cp-service="mariadb">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">MariaDB</p>
                    <p class="cp-service__meta">awaiting status</p>
                </div>
            </div>
            <div class="cp-service is-unknown" data-cp-service="pdns">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">PowerDNS</p>
                    <p class="cp-service__meta">awaiting status</p>
                </div>
            </div>
            <div class="cp-service is-unknown" data-cp-service="postfix">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">Postfix</p>
                    <p class="cp-service__meta">awaiting status</p>
                </div>
            </div>
            <div class="cp-service is-unknown" data-cp-service="dovecot">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">Dovecot</p>
                    <p class="cp-service__meta">awaiting status</p>
                </div>
            </div>
            <div class="cp-service is-unknown" data-cp-service="pure-ftpd">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">Pure-FTPd</p>
                    <p class="cp-service__meta">awaiting status</p>
                </div>
            </div>
            <div class="cp-service is-unknown" data-cp-service="redis-server">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">Redis</p>
                    <p class="cp-service__meta">awaiting status</p>
                </div>
            </div>
            <div class="cp-service is-unknown" data-cp-service="cloudpanel-daemon">
                <span class="cp-service__dot" aria-hidden="true"></span>
                <div>
                    <p class="cp-service__name">CloudPanel Daemon</p>
                    <p class="cp-service__meta">awaiting status</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{# ----------------------------------------------------- recent activity #}
<div class="cp-card">
    <div class="cp-card__head">
        <div>
            <h2 class="cp-card__title">
                <i class="fa-solid fa-clock-rotate-left" aria-hidden="true"></i> Recent Activity
            </h2>
            <p class="cp-card__sub">Last actions recorded by the panel</p>
        </div>
        <div class="cp-table-search">
            <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
            <input type="search" class="cp-input" placeholder="Filter activity…"
                   data-cp-filter="#cpActivityTable" aria-label="Filter activity">
        </div>
    </div>
    <div class="cp-card__body cp-card__body--flush">
        <div class="cp-table-wrap">
            <table class="cp-table" id="cpActivityTable">
                <thead>
                    <tr>
                        <th scope="col" style="width:180px">When</th>
                        <th scope="col" style="width:150px">User</th>
                        <th scope="col">Action</th>
                        <th scope="col">Target</th>
                        <th scope="col" style="width:120px">Result</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in recentActivity %}
                    <tr>
                        <td class="cp-nowrap cp-muted">{{ item.timestamp }}</td>
                        <td>{{ item.user|default:"system" }}</td>
                        <td>{{ item.action }}</td>
                        <td class="cp-mono cp-truncate" style="max-width:260px">{{ item.target|default:"—" }}</td>
                        <td>
                            <span class="cp-badge cp-badge--{{ item.level|default:'info' }}">
                                {{ item.level|default:"info"|capfirst }}
                            </span>
                        </td>
                    </tr>
                    {% empty %}
                    <tr data-cp-empty-row>
                        <td colspan="5">
                            <div class="cp-empty">
                                <i class="fa-regular fa-clipboard" aria-hidden="true"></i>
                                <h4>No activity recorded yet</h4>
                                <p>Actions performed through the panel will appear here.</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{{ cpuHistory|json_script:"cpCpuHistory" }}
{{ ramHistory|json_script:"cpRamHistory" }}
{{ historyLabels|json_script:"cpHistoryLabels" }}

{% endblock %}


{% block scripts %}
<script>
(function ($) {
    "use strict";

    var MAX_POINTS = 60;

    function readJSON(id, fallback) {
        var el = document.getElementById(id);
        if (!el) { return fallback; }
        try {
            var parsed = JSON.parse(el.textContent);
            return Array.isArray(parsed) ? parsed : fallback;
        } catch (e) { return fallback; }
    }

    function cssVar(name) {
        return getComputedStyle(document.documentElement)
               .getPropertyValue(name).trim() || "#1d4e89";
    }

    /* ---------------------------------------------------------- meters */

    function paintBar(barId, textId, percent, label) {
        var bar = document.getElementById(barId);
        if (!bar) { return; }
        var pct = CP.clamp(percent, 0, 100);
        var level = CP.levelForPercent(pct);
        bar.style.width = pct + "%";
        bar.className = "cp-progress__bar " +
            (level === "danger" ? "is-danger" : level === "warn" ? "is-warn" : "is-accent");
        if (label !== undefined && label !== null) {
            var text = document.getElementById(textId);
            if (text) { text.textContent = label; }
        }
    }

    $("[data-cp-percent]").each(function () {
        var pct = CP.clamp(this.getAttribute("data-cp-percent"), 0, 100);
        var level = CP.levelForPercent(pct);
        this.style.width = pct + "%";
        this.className = "cp-progress__bar " +
            (level === "danger" ? "is-danger" : level === "warn" ? "is-warn" : "is-accent");
    });

    /* ----------------------------------------------------------- chart */

    var canvas = document.getElementById("cpResourceChart");
    var chart = null;

    function buildChart() {
        if (!canvas || typeof window.Chart === "undefined") { return; }

        var labels = readJSON("cpHistoryLabels", []);
        var cpuData = readJSON("cpCpuHistory", []);
        var ramData = readJSON("cpRamHistory", []);

        if (!labels.length) {
            labels = cpuData.map(function (_, i) { return String(i + 1); });
        }

        var grid = cssVar("--cp-border");
        var tick = cssVar("--cp-text-muted");
        var primary = cssVar("--cp-primary");
        var accent = cssVar("--cp-accent");

        chart = new window.Chart(canvas.getContext("2d"), {
            type: "line",
            data: {
                labels: labels,
                datasets: [
                    {
                        label: "CPU %",
                        data: cpuData,
                        borderColor: primary,
                        backgroundColor: primary + "22",
                        borderWidth: 2,
                        tension: 0.35,
                        pointRadius: 0,
                        fill: true
                    },
                    {
                        label: "RAM %",
                        data: ramData,
                        borderColor: accent,
                        backgroundColor: accent + "22",
                        borderWidth: 2,
                        tension: 0.35,
                        pointRadius: 0,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: { duration: 300 },
                interaction: { mode: "index", intersect: false },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) {
                                return ctx.dataset.label + ": " +
                                       Math.round(ctx.parsed.y) + "%";
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        min: 0, max: 100,
                        ticks: { color: tick, stepSize: 25, callback: function (v) { return v + "%"; } },
                        grid: { color: grid }
                    },
                    x: {
                        ticks: { color: tick, maxTicksLimit: 8, autoSkip: true },
                        grid: { display: false }
                    }
                }
            }
        });
    }

    function pushPoint(cpu, ram) {
        if (!chart) { return; }
        var now = new Date();
        var label = ("0" + now.getHours()).slice(-2) + ":" +
                    ("0" + now.getMinutes()).slice(-2) + ":" +
                    ("0" + now.getSeconds()).slice(-2);

        chart.data.labels.push(label);
        chart.data.datasets[0].data.push(CP.clamp(cpu, 0, 100));
        chart.data.datasets[1].data.push(CP.clamp(ram, 0, 100));

        while (chart.data.labels.length > MAX_POINTS) {
            chart.data.labels.shift();
            chart.data.datasets[0].data.shift();
            chart.data.datasets[1].data.shift();
        }
        chart.update("none");
    }

    function retheme() {
        if (!chart) { return; }
        var grid = cssVar("--cp-border");
        var tick = cssVar("--cp-text-muted");
        var primary = cssVar("--cp-primary");
        var accent = cssVar("--cp-accent");

        chart.data.datasets[0].borderColor = primary;
        chart.data.datasets[0].backgroundColor = primary + "22";
        chart.data.datasets[1].borderColor = accent;
        chart.data.datasets[1].backgroundColor = accent + "22";
        chart.options.scales.y.grid.color = grid;
        chart.options.scales.y.ticks.color = tick;
        chart.options.scales.x.ticks.color = tick;
        chart.update("none");
    }

    /* ------------------------------------------------------- live feed */

    $(document).on("cp:resources", function (event, data) {
        pushPoint(data.cpu, data.ram);

        paintBar("cpCpuBar", "cpCpuText", data.cpu, Math.round(Number(data.cpu) || 0) + "%");
        paintBar("cpRamBar", "cpRamText", data.ram,
            (data.ramUsed && data.ramTotal)
                ? CP.formatBytes(data.ramUsed) + " / " + CP.formatBytes(data.ramTotal)
                : Math.round(Number(data.ram) || 0) + "%");
        paintBar("cpDiskBar", "cpDiskText", data.disk,
            (data.diskUsed && data.diskTotal)
                ? CP.formatBytes(data.diskUsed) + " / " + CP.formatBytes(data.diskTotal)
                : Math.round(Number(data.disk) || 0) + "%");
    });

    $(document).on("cp:themechange", retheme);

    /* --------------------------------------------- counters / services */

    function applyServices(services) {
        if (!services || !services.length) { return; }
        services.forEach(function (svc) {
            var node = document.querySelector(
                '[data-cp-service="' + String(svc.name).replace(/["\\]/g, "") + '"]');
            if (!node) { return; }
            var state = ["up", "down", "warn"].indexOf(svc.state) !== -1 ? svc.state : "unknown";
            node.className = "cp-service is-" + state;
            var meta = node.querySelector(".cp-service__meta");
            if (meta) { meta.textContent = svc.detail || state; }
        });
    }

    function refresh() {
        var url = (window.CP_CONFIG.endpoints || {}).dashboardData;
        if (!url) { return; }
        CP.get(url, null, { silent: true }).done(function (data) {
            if (!data || Number(data.status) !== 1) { return; }
            ["websites", "databases", "emails", "ftp"].forEach(function (key) {
                var node = document.querySelector('[data-cp-stat="' + key + '"]');
                if (node && data[key] !== undefined) { node.textContent = data[key]; }
            });
            applyServices(data.services);
        });
    }

    $("#cpDashRefresh").on("click", function () {
        var restore = CP.busy(this, "Refreshing…");
        CP.resourceWidget.refresh();
        refresh();
        window.setTimeout(restore, 700);
    });

    $(function () {
        buildChart();
        refresh();
        window.setInterval(function () {
            if (!document.hidden) { refresh(); }
        }, 30000);
    });

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