{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Dashboard" %} - Eenos{% endblock %}
{% block body_attributes %}data-eenos-preloader="manual"{% endblock %}
{% block extra_css %}
    <style>
      .dashboard-server-meta { color: var(--eenos-text-secondary); font-size: .8125rem; }
      .dashboard-server-meta span + span::before { content: "·"; margin: 0 .5rem; color: var(--eenos-border-dark); }
      .dashboard-alert { border-left: 3px solid var(--eenos-warning); }
      .dashboard-metric-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 9px; color: var(--eenos-primary); background: var(--eenos-primary-light); }
      .dashboard-metric-icon svg { width: 19px; height: 19px; }
      .dashboard-metric-value { color: var(--eenos-text-primary); font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
      .dashboard-metric-label { color: var(--eenos-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
      .dashboard-progress { height: 5px; background: var(--eenos-surface-secondary); }
      .dashboard-progress .progress-bar { background: var(--eenos-primary); }
      .dashboard-progress .progress-bar.eenos-progress-success { background: var(--eenos-success); }
      .dashboard-progress .progress-bar.eenos-progress-warning { background: var(--eenos-warning); }
      .dashboard-progress .progress-bar.eenos-progress-danger { background: var(--eenos-danger); }
      .dashboard-service { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .72rem 0; border-bottom: 1px solid var(--eenos-border); }
      .dashboard-service:last-child { padding-bottom: 0; border-bottom: 0; }
      .dashboard-service:first-child { padding-top: 0; }
      .dashboard-service-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 8px; color: var(--eenos-text-secondary); background: var(--eenos-surface-secondary); }
      .dashboard-service-icon svg { width: 16px; height: 16px; }
      .dashboard-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--eenos-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eenos-success) 14%, transparent); }
      .dashboard-dot-warning { background: var(--eenos-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eenos-warning) 14%, transparent); }
      .dashboard-stat { padding: 1rem; border: 1px solid var(--eenos-border); border-radius: 8px; background: var(--eenos-surface-secondary); }
      .dashboard-stat-value { color: var(--eenos-text-primary); font-size: 1.25rem; font-weight: 700; }
      .dashboard-action { height: 100%; display: flex; align-items: center; gap: .7rem; padding: .85rem; color: var(--eenos-text-primary); text-decoration: none; border: 1px solid var(--eenos-border); border-radius: 8px; background: var(--eenos-surface); transition: border-color .15s ease, transform .15s ease; }
      .dashboard-action:hover { color: var(--eenos-primary-dark); border-color: var(--eenos-primary); transform: translateY(-1px); }
      .dashboard-action svg { width: 18px; height: 18px; color: var(--eenos-primary); }
      .dashboard-timeline { position: relative; padding-left: 1.25rem; }
      .dashboard-timeline::before { content: ""; position: absolute; top: .4rem; bottom: .4rem; left: 3px; width: 1px; background: var(--eenos-border); }
      .dashboard-timeline-item { position: relative; padding-bottom: 1rem; }
      .dashboard-timeline-item:last-child { padding-bottom: 0; }
      .dashboard-timeline-item::before { content: ""; position: absolute; top: .35rem; left: -1.25rem; width: 7px; height: 7px; border-radius: 50%; background: var(--eenos-primary); }
      .dashboard-timeline-item.is-success::before { background: var(--eenos-success); }
      .dashboard-timeline-item.is-failed::before { background: var(--eenos-danger); }
      .dashboard-timeline-item.is-warning::before { background: var(--eenos-warning); }
      .dashboard-table th { color: var(--eenos-text-muted); font-size: .72rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
    </style>
{% endblock %}
{% block extra_js %}
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const endpoint = "{% url 'dashboard_data' %}";
        const pageHeader = document.querySelector(".eenos-page-header");
        const refreshButton = document.getElementById("dashboardRefresh");
        const updatedLabel = pageHeader.querySelector(".small.text-muted");
        const metricCards = document.querySelectorAll(".row.g-3.mb-4 > div > .eenos-card");
        const serviceCard = document.querySelector(".row.g-4.mb-4 .col-xl-5 .eenos-card");
        const hostingCard = document.querySelector(".row.g-4.mb-4 .col-xl-7 .eenos-card");
        const alertCard = document.querySelector(".dashboard-alert");
        const headerAlerts = document.getElementById("dashboardHeaderAlerts");
        let activeAlertSignature = "";
        const recentAccountBody = document.querySelector(".dashboard-table tbody");
        const recentAccountMobile = document.getElementById("dashboardRecentAccountsMobile");
        const recentActivity = document.getElementById("dashboardRecentActivity");
        const accountModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("dashboardAccountModal"));
        let recentAccounts = [];
        const labels = {
          active: "{% translate 'Active' %}",
          suspended: "{% translate 'Suspended' %}",
          running: "{% translate 'Running' %}",
          unavailable: "{% translate 'Unavailable' %}",
          normalUtilization: "{% translate 'Normal utilization' %}",
          highUtilization: "{% translate 'High utilization' %}",
          noMonitoredServices: "{% translate 'No enabled monitored services are configured.' %}",
          latestBackup: "{% translate 'Latest backup recorded' %}",
          noBackups: "{% translate 'No backups recorded' %}",
          noBackupMetadata: "{% translate 'No backup metadata is available.' %}",
          updatesUnavailable: "{% translate 'Update status unavailable' %}",
          securityUpdatesUnavailable: "{% translate 'Security update count unavailable' %}",
          rebootUnavailable: "{% translate 'Reboot status unavailable' %}",
          rebootRequired: "{% translate 'Reboot required' %}",
          noRebootRequired: "{% translate 'No reboot required' %}",
          lastBoot: "{% translate 'Last boot' %}",
          noActivity: "{% translate 'No administrative activity has been recorded yet.' %}",
          noAccounts: "{% translate 'No hosting accounts found.' %}",
          updatedNow: "{% translate 'Updated just now' %}",
          loadError: "{% translate 'Unable to load dashboard data.' %}",
          viewAccount: "{% translate 'View account details' %}",
          ofTotal: "{% translate 'of total' %}",
          used: "{% translate 'used' %}",
          updatesAvailable: "{% translate 'updates available' %}",
          securityUpdates: "{% translate 'security updates' %}",
          itemsRequireAttention: "{% translate 'items require attention' %}",
          itemRequiresAttention: "{% translate 'item requires attention' %}"
        };
        const escapeHtml = (value) => $("<div>").text(value ?? "").html();
        const percent = (value) => `${Math.max(0, Math.min(100, Number(value) || 0))}%`;
        const humanizeDate = (value) => {
          if (!value) return "—";
          const date = new Date(String(value).replace(" ", "T"));
          if (Number.isNaN(date.getTime())) return value;
          const seconds = Math.round((date.getTime() - Date.now()) / 1000);
          const ranges = [[31536000, "year"], [2592000, "month"], [86400, "day"], [3600, "hour"], [60, "minute"]];
          const formatter = new Intl.RelativeTimeFormat(undefined, {numeric: "always"});
          for (const [unitSeconds, unit] of ranges) {
            if (Math.abs(seconds) >= unitSeconds) return formatter.format(Math.round(seconds / unitSeconds), unit);
          }
          return formatter.format(seconds, "second");
        };

        function renderDashboardAlerts(alerts) {
          if (alerts.length) {
            activeAlertSignature = alerts.map((alert) => alert.type + ":" + alert.message).join("|");
            const dismissed = sessionStorage.getItem("eenosDashboardDismissedAlerts") === activeAlertSignature;
            alertCard.classList.toggle("d-none", dismissed);
            alertCard.querySelector(".fw-semibold").textContent = alerts.length + " " + (alerts.length === 1 ? labels.itemRequiresAttention : labels.itemsRequireAttention);
            alertCard.querySelector(".small.text-muted").textContent = alerts.map((alert) => alert.message).join(" ");
          } else {
            activeAlertSignature = "";
            alertCard.classList.add("d-none");
          }
        }

        document.addEventListener("eenos:alerts-updated", (event) => {
          renderDashboardAlerts(Array.isArray(event.detail?.alerts) ? event.detail.alerts : []);
        });

        function updateMetric(card, value, detail, progress) {
          card.querySelector(".dashboard-metric-value").textContent = value;
          card.querySelector(".small.text-muted").textContent = detail;
          const bar = card.querySelector(".progress-bar");
          bar.style.width = percent(progress);
          bar.classList.remove("bg-warning", "eenos-progress-success", "eenos-progress-warning", "eenos-progress-danger");
          bar.classList.add(progress >= 90 ? "eenos-progress-danger" : progress >= 70 ? "eenos-progress-warning" : "eenos-progress-success");
        }

        function renderDashboard(data) {
          const meta = pageHeader.querySelectorAll(".dashboard-server-meta span");
          [data.server.hostname, data.server.operating_system, data.server.kernel, data.server.architecture].forEach((value, index) => { meta[index].textContent = value; });
          const load = data.metrics.load;
          updateMetric(metricCards[0], load.one, `${load.one} / ${load.five} / ${load.fifteen} · ${load.cpu_count} vCPU`, load.percent);
          updateMetric(metricCards[1], `${data.metrics.cpu.percent}%`, data.metrics.cpu.percent >= 80 ? labels.highUtilization : labels.normalUtilization, data.metrics.cpu.percent);
          updateMetric(metricCards[2], `${data.metrics.memory.percent}%`, `${data.metrics.memory.used} / ${data.metrics.memory.total} ${labels.used}`, data.metrics.memory.percent);
          updateMetric(metricCards[3], `${data.metrics.disk.percent}%`, `${data.metrics.disk.mount} · ${data.metrics.disk.used} of ${data.metrics.disk.total}`, data.metrics.disk.percent);

          serviceCard.querySelectorAll(".dashboard-service, .dashboard-service-state").forEach((row) => row.remove());
          const serviceRows = data.services.map((service) => {
            const active = service.status === "active";
            return `<div class="dashboard-service"><div class="d-flex align-items-center gap-3"><span class="dashboard-service-icon"><i data-lucide="server"></i></span><div><div class="fw-semibold">${escapeHtml(service.name)}</div><div class="small text-muted">${escapeHtml(service.uptime)} · ${escapeHtml(service.memory)}</div></div></div><div class="d-flex align-items-center gap-2 small ${active ?"text-success" : "text-danger"}"><span class="dashboard-dot ${active ?"" : "dashboard-dot-warning"}"></span>${active ? labels.running : escapeHtml(service.status_label)}</div></div>`;
          }).join("");
          serviceCard.insertAdjacentHTML("beforeend", serviceRows || `<div class="dashboard-service-state small text-muted">${escapeHtml(labels.noMonitoredServices)}</div>`);

          const stats = hostingCard.querySelectorAll(".dashboard-stat-value");
          [data.hosting.active, data.hosting.suspended, data.hosting.resellers, data.hosting.domains].forEach((value, index) => { stats[index].textContent = value; });
          const suspendedNote = stats[1].nextElementSibling;
          suspendedNote.textContent = `${data.hosting.total ? ((data.hosting.suspended / data.hosting.total) * 100).toFixed(1) : "0"}% ${labels.ofTotal}`;
          document.getElementById("dashboardAccountDiskUsage").textContent = data.hosting.disk_usage.formatted;
          document.getElementById("dashboardMonthlyBandwidth").textContent = data.hosting.bandwidth_usage.formatted;
          document.getElementById("dashboardBfdIncidents").textContent = data.security.bfd_incidents;
          document.getElementById("dashboardFailedLogins").textContent = data.security.failed_panel_logins;
          document.getElementById("dashboardBlockedIps").textContent = data.security.blocked_ips;
          const expiringCertificates = document.getElementById("dashboardExpiringCertificates");
          expiringCertificates.textContent = data.security.certificates_expiring;
          expiringCertificates.classList.toggle("text-success", data.security.certificates_expiring === 0);
          expiringCertificates.classList.toggle("text-warning", data.security.certificates_expiring > 0);
          const backup = data.maintenance.latest_backup;
          document.getElementById("dashboardBackupTitle").textContent = backup ? labels.latestBackup : labels.noBackups;
          document.getElementById("dashboardBackupDetail").textContent = backup ? `${humanizeDate(backup.recorded_at)}${backup.username ? ` · ${backup.username}` : ""}` : labels.noBackupMetadata;
          document.getElementById("dashboardBackupDetail").title = backup ? new Date(String(backup.recorded_at).replace(" ", "T")).toLocaleString() : "";
          const backupIcon = document.getElementById("dashboardBackupTitle").closest(".d-flex").querySelector(".dashboard-service-icon");
          backupIcon.classList.remove("text-success", "text-warning", "text-muted");
          backupIcon.classList.add(backup ? "text-success" : "text-muted");
          const updates = data.maintenance.updates;
          document.getElementById("dashboardUpdatesTitle").textContent = updates.count === null ? labels.updatesUnavailable : `${updates.count} ${labels.updatesAvailable}`;
          document.getElementById("dashboardUpdatesDetail").textContent = updates.security_count === null ? labels.securityUpdatesUnavailable : `${updates.security_count} ${labels.securityUpdates}`;
          const updatesIcon = document.getElementById("dashboardUpdatesTitle").closest(".d-flex").querySelector(".dashboard-service-icon");
          updatesIcon.classList.remove("text-success", "text-warning", "text-muted");
          updatesIcon.classList.add(updates.count === null ? "text-muted" : updates.count > 0 ? "text-warning" : "text-success");
          const reboot = data.maintenance.reboot_required;
          document.getElementById("dashboardRebootTitle").textContent = reboot === null ? labels.rebootUnavailable : reboot ? labels.rebootRequired : labels.noRebootRequired;
          const lastBoot = document.getElementById("dashboardLastBoot");
          lastBoot.textContent = `${labels.lastBoot} ${humanizeDate(data.maintenance.last_boot)}`;
          lastBoot.title = data.maintenance.last_boot ? new Date(data.maintenance.last_boot).toLocaleString() : "";
          const rebootIcon = document.getElementById("dashboardRebootTitle").closest(".d-flex").querySelector(".dashboard-service-icon");
          rebootIcon.classList.remove("text-success", "text-warning", "text-muted");
          rebootIcon.classList.add(reboot === null ? "text-muted" : reboot ? "text-warning" : "text-success");

          recentActivity.innerHTML = (data.recent_activity || []).map((event) => {
            const status = ["success", "failed", "warning"].includes(event.status) ? event.status : "success";
            const resource = event.resource_id ? ` · ${escapeHtml(event.resource_id)}` : "";
            return `<div class="dashboard-timeline-item is-${status}"><div class="small fw-semibold">${escapeHtml(event.summary)}</div><div class="small text-muted"><span>${escapeHtml(event.actor)}</span><span class="text-capitalize"> · ${escapeHtml(event.category)}</span>${resource}<span title="${escapeHtml(event.created_at)}"> · ${escapeHtml(humanizeDate(event.created_at))}</span></div></div>`;
          }).join("") || `<div class="small text-muted">${escapeHtml(labels.noActivity)}</div>`;

          if (window.eenosDashboardAlerts?.render) {
            window.eenosDashboardAlerts.render(Array.isArray(data.alerts) ? data.alerts : []);
          } else {
            renderDashboardAlerts(Array.isArray(data.alerts) ? data.alerts : []);
          }

          recentAccounts = data.hosting.recent_accounts;
          recentAccountBody.innerHTML = recentAccounts.map((account, index) => {
            const active = account.status === "active";
            const domain = account.domain ? `<a href="https://${encodeURI(account.domain)}" target="_blank" rel="noopener noreferrer">${escapeHtml(account.domain)}</a>` : "—";
            return `<tr><td>${domain}</td><td><a href="${escapeHtml(account.login_url)}" class="fw-semibold eenos-link">${escapeHtml(account.username)}</a></td><td><span class="badge eenos-badge-neutral">${escapeHtml(account.plan)}</span></td><td>${escapeHtml(account.owner)}</td><td class="text-muted text-nowrap" title="${escapeHtml(account.created)}">${escapeHtml(humanizeDate(account.created))}</td><td><span class="eenos-status ${active ?"text-success" : "text-warning"} d-inline-flex align-items-center gap-1"><i data-lucide="${active ? "circle-check" : "circle-pause"}"></i>${active ? labels.active : labels.suspended}</span></td><td class="text-end"><div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-secondary dashboard-account-info" data-index="${index}" title="${escapeHtml(labels.viewAccount)}" aria-label="${escapeHtml(labels.viewAccount)}"><i data-lucide="info"></i></button></div></td></tr>`;
          }).join("") || `<tr><td colspan="7" class="text-center text-muted py-4">${escapeHtml(labels.noAccounts)}</td></tr>`;
          recentAccountMobile.innerHTML = recentAccounts.map((account, index) => {
            const active = account.status === "active";
            const domain = account.domain ? `<a class="d-block text-break fw-semibold" href="https://${encodeURI(account.domain)}" target="_blank" rel="noopener noreferrer">${escapeHtml(account.domain)}</a>` : `<span class="text-muted">—</span>`;
            return `<div class="py-3 border-bottom"><div class="d-flex justify-content-between align-items-start gap-3 mb-2"><div class="overflow-hidden">${domain}<a href="${escapeHtml(account.login_url)}" class="d-block small eenos-link text-truncate">${escapeHtml(account.username)}</a></div><span class="eenos-status ${active ?"text-success" : "text-warning"} d-inline-flex align-items-center gap-1 flex-shrink-0"><i data-lucide="${active ? "circle-check" : "circle-pause"}"></i>${active ? labels.active : labels.suspended}</span></div><div class="d-flex flex-wrap align-items-center gap-2 small mb-2"><span class="badge eenos-badge-neutral">${escapeHtml(account.plan)}</span><span class="text-muted">${escapeHtml(account.owner)}</span></div><div class="d-flex justify-content-between align-items-center gap-3"><span class="small text-muted" title="${escapeHtml(account.created)}">${escapeHtml(humanizeDate(account.created))}</span><div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-secondary dashboard-account-info" data-index="${index}" title="${escapeHtml(labels.viewAccount)}" aria-label="${escapeHtml(labels.viewAccount)}"><i data-lucide="info"></i></button></div></div></div>`;
          }).join("") || `<div class="text-center text-muted py-4">${escapeHtml(labels.noAccounts)}</div>`;
          updatedLabel.textContent = labels.updatedNow;
          lucide.createIcons();
        }

        let initialDashboardLoad = true;
        async function loadDashboard(forceRefresh = false) {
          refreshButton.disabled = true;
          refreshButton.querySelector("svg")?.classList.add("spin");
          try {
            const response = await fetch(`${endpoint}${forceRefresh ? "?refresh=1" : ""}`, {headers: {"X-Requested-With": "XMLHttpRequest"}});
            const data = await response.json();
            if (!response.ok) throw new Error(data.error || labels.loadError);
            renderDashboard(data);
          } catch (error) {
            updatedLabel.textContent = error.message;
            metricCards.forEach((card) => updateMetric(card, "—", labels.unavailable, 0));
            serviceCard.querySelectorAll(".dashboard-service, .dashboard-service-state").forEach((row) => row.remove());
            serviceCard.insertAdjacentHTML("beforeend", `<div class="dashboard-service-state small text-danger">${escapeHtml(labels.loadError)}</div>`);
            hostingCard.querySelectorAll(".dashboard-stat-value").forEach((value) => { value.textContent = "—"; });
            const suspendedNote = hostingCard.querySelectorAll(".dashboard-stat-value")[1]?.nextElementSibling;
            if (suspendedNote) suspendedNote.textContent = labels.unavailable;
            ["dashboardBfdIncidents", "dashboardFailedLogins", "dashboardBlockedIps", "dashboardExpiringCertificates"].forEach((id) => { document.getElementById(id).textContent = "—"; });
            document.getElementById("dashboardBackupTitle").textContent = labels.unavailable;
            document.getElementById("dashboardBackupDetail").textContent = "—";
            document.getElementById("dashboardUpdatesTitle").textContent = labels.unavailable;
            document.getElementById("dashboardUpdatesDetail").textContent = "—";
            document.getElementById("dashboardRebootTitle").textContent = labels.unavailable;
            document.getElementById("dashboardLastBoot").textContent = "—";
            recentActivity.innerHTML = `<div class="small text-danger">${escapeHtml(labels.loadError)}</div>`;
            recentAccountBody.innerHTML = `<tr><td colspan="7" class="text-center text-danger py-4">${escapeHtml(labels.loadError)}</td></tr>`;
            recentAccountMobile.innerHTML = `<div class="text-center text-danger py-4">${escapeHtml(labels.loadError)}</div>`;
          } finally {
            refreshButton.disabled = false;
            refreshButton.querySelector("svg")?.classList.remove("spin");
            if (initialDashboardLoad) {
              initialDashboardLoad = false;
              window.Wap?.hidePreloader(true);
            }
          }
        }

        refreshButton.addEventListener("click", () => loadDashboard(true));
        document.getElementById("dashboardReviewAlerts").addEventListener("click", () => headerAlerts.click());
        document.getElementById("dashboardDismissAlerts").addEventListener("click", () => {
          if (activeAlertSignature) sessionStorage.setItem("eenosDashboardDismissedAlerts", activeAlertSignature);
          alertCard.classList.add("d-none");
        });
        document.getElementById("dashboardRecentAccounts").addEventListener("click", (event) => {
          const button = event.target.closest(".dashboard-account-info");
          if (!button) return;
          const account = recentAccounts[Number(button.dataset.index)];
          if (!account) return;
          document.getElementById("dashboardAccountModalTitle").textContent = account.username;
          document.getElementById("dashboardAccountModalDomain").textContent = account.domain || "—";
          document.getElementById("dashboardAccountModalPlan").textContent = account.plan || "—";
          document.getElementById("dashboardAccountModalOwner").textContent = account.owner || "—";
          document.getElementById("dashboardAccountModalEmail").textContent = account.contact_email || "—";
          document.getElementById("dashboardAccountModalIp").textContent = account.ip_address || "—";
          document.getElementById("dashboardAccountModalQuota").textContent = account.quota || "—";
          document.getElementById("dashboardAccountModalBandwidth").textContent = account.bandwidth || "—";
          document.getElementById("dashboardAccountModalCreated").textContent = account.created || "—";
          document.getElementById("dashboardAccountModalStatus").textContent = account.status === "active" ? labels.active : labels.suspended;
          document.getElementById("dashboardAccountModalLogin").href = account.login_url;
          accountModal.show();
        });
        loadDashboard();
      });
    </script>
{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "Server Overview" %}</h1>
            <div class="dashboard-server-meta mt-1"><span class="fw-semibold">—</span><span>—</span><span>—</span><span>—</span></div>
        </div>
        <div class="d-grid col-12 col-sm-auto d-sm-flex align-items-center gap-2">
            <span class="small text-muted d-none d-md-inline">{% translate "Loading dashboard…" %}</span>
            <button type="button"
                    class="btn btn-outline-secondary btn-sm text-nowrap"
                    id="dashboardRefresh"><i data-lucide="refresh-cw"></i>{% translate "Refresh" %}</button>
        </div>
    </div>
    <div class="eenos-card dashboard-alert mb-4 d-none">
        <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
            <div class="d-flex align-items-start gap-3">
                <div class="eenos-notice-icon text-warning">
                    <i data-lucide="triangle-alert"></i>
                </div>
                <div>
                    <div class="fw-semibold">{% translate "Loading alert status…" %}</div>
                    <div class="small text-muted mt-1">—</div>
                </div>
            </div>
            <div class="d-flex align-items-center gap-2">
                <button type="button"
                        class="btn btn-outline-warning btn-sm"
                        id="dashboardReviewAlerts"><i data-lucide="list-checks"></i>{% translate "Review alerts" %}</button>
                <button type="button"
                        class="btn btn-sm btn-outline-secondary"
                        id="dashboardDismissAlerts"
                        title="{% translate 'Dismiss this alert banner for the current session' %}"
                        aria-label="{% translate 'Dismiss alert banner' %}">
                    <i data-lucide="x"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3"><div class="eenos-card h-100"><div class="d-flex align-items-start justify-content-between gap-3"><div><div class="dashboard-metric-label">{% translate "System Load" %}</div><div class="dashboard-metric-value mt-2">—</div></div><span class="dashboard-metric-icon"><i data-lucide="activity"></i></span></div><div class="small text-muted mt-3">{% translate "Loading live data…" %}</div><div class="progress dashboard-progress mt-2"><div class="progress-bar" style="width: 0%"></div></div></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="eenos-card h-100"><div class="d-flex align-items-start justify-content-between gap-3"><div><div class="dashboard-metric-label">{% translate "CPU Usage" %}</div><div class="dashboard-metric-value mt-2">—</div></div><span class="dashboard-metric-icon"><i data-lucide="cpu"></i></span></div><div class="small text-muted mt-3">{% translate "Loading live data…" %}</div><div class="progress dashboard-progress mt-2"><div class="progress-bar" style="width: 0%"></div></div></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="eenos-card h-100"><div class="d-flex align-items-start justify-content-between gap-3"><div><div class="dashboard-metric-label">{% translate "Memory" %}</div><div class="dashboard-metric-value mt-2">—</div></div><span class="dashboard-metric-icon"><i data-lucide="memory-stick"></i></span></div><div class="small text-muted mt-3">{% translate "Loading live data…" %}</div><div class="progress dashboard-progress mt-2"><div class="progress-bar" style="width: 0%"></div></div></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="eenos-card h-100"><div class="d-flex align-items-start justify-content-between gap-3"><div><div class="dashboard-metric-label">{% translate "Highest Disk" %}</div><div class="dashboard-metric-value mt-2">—</div></div><span class="dashboard-metric-icon"><i data-lucide="hard-drive"></i></span></div><div class="small text-muted mt-3">{% translate "Loading live data…" %}</div><div class="progress dashboard-progress mt-2"><div class="progress-bar" style="width: 0%"></div></div></div></div>
    </div>
    <div class="row g-4 mb-4">
        <div class="col-12 col-xl-5">
            <div class="eenos-card h-100">
                <div class="d-flex justify-content-between gap-3 mb-4">
                    <div>
                        <div class="eenos-panel-title">{% translate "Critical Services" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Live status of core server services." %}</div>
                    </div>
                    <a href="{% url 'monitor_status' %}" class="eenos-link small">{% translate "Manage" %}</a>
                </div>
                <div class="dashboard-service">
                    <div class="d-flex align-items-center gap-3">
                        <span class="dashboard-service-icon text-muted"><i data-lucide="loader-circle"></i></span>
                        <div>
                            <div class="fw-semibold">{% translate "Loading service status…" %}</div>
                            <div class="small text-muted">{% translate "Checking monitored services" %}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-7">
            <div class="eenos-card h-100">
                <div class="d-flex justify-content-between gap-3 mb-4">
                    <div>
                        <div class="eenos-panel-title">{% translate "Hosting Overview" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Hosting accounts and their current resource usage." %}</div>
                    </div>
                    <a href="{% url 'listuser' %}" class="eenos-link small">{% translate "View accounts" %}</a>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-6 col-lg-3">
                        <a href="{% url 'listuser' %}" class="eenos-quick-card h-100">
                            <i data-lucide="users" class="eenos-quick-icon"></i>
                            <span class="small">{% translate "Active accounts" %}</span>
                            <span class="dashboard-stat-value">—</span>
                        </a>
                    </div>
                    <div class="col-6 col-lg-3">
                        <a href="{% url 'listuser' %}" class="eenos-quick-card h-100">
                            <i data-lucide="circle-pause" class="eenos-quick-icon"></i>
                            <span class="small">{% translate "Suspended" %}</span>
                            <span class="dashboard-stat-value">—</span>
                            <span class="small text-muted">{% translate "Loading…" %}</span>
                        </a>
                    </div>
                    <div class="col-6 col-lg-3">
                        <a href="{% url 'listuser' %}" class="eenos-quick-card h-100">
                            <i data-lucide="user-round" class="eenos-quick-icon"></i>
                            <span class="small">{% translate "Resellers" %}</span>
                            <span class="dashboard-stat-value">—</span>
                        </a>
                    </div>
                    <div class="col-6 col-lg-3">
                        <a href="{% url 'listuser' %}" class="eenos-quick-card h-100">
                            <i data-lucide="globe-2" class="eenos-quick-icon"></i>
                            <span class="small">{% translate "Domains" %}</span>
                            <span class="dashboard-stat-value">—</span>
                        </a>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-12 col-md-6">
                        <a href="{% url 'disk_usage' %}" class="eenos-quick-card h-100">
                            <i data-lucide="hard-drive" class="eenos-quick-icon"></i>
                            <span class="small">{% translate "Account disk usage" %}</span>
                            <span class="dashboard-stat-value" id="dashboardAccountDiskUsage">—</span>
                            <span class="small text-muted">{% translate "Across all hosting accounts" %}</span>
                        </a>
                    </div>
                    <div class="col-12 col-md-6">
                        <a href="{% url 'bandwidth_usage' %}" class="eenos-quick-card h-100">
                            <i data-lucide="arrow-left-right" class="eenos-quick-icon"></i>
                            <span class="small">{% translate "Monthly bandwidth usage" %}</span>
                            <span class="dashboard-stat-value" id="dashboardMonthlyBandwidth">—</span>
                            <span class="small text-muted">{% translate "Transferred during the current month" %}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-4 mb-4" id="system-attention">
        <div class="col-12 col-xl-4"><div class="eenos-card h-100"><div class="eenos-panel-title">{% translate "Security" %}</div><div class="eenos-panel-subtitle mb-4">{% translate "Activity during the last 24 hours." %}</div><div class="d-flex justify-content-between align-items-center py-2 border-bottom"><span class="small d-inline-flex align-items-center gap-2"><i data-lucide="shield-alert"></i>{% translate "BFD incidents" %}</span><span class="badge eenos-badge-warning" id="dashboardBfdIncidents">—</span></div><div class="d-flex justify-content-between align-items-center py-2 border-bottom"><span class="small d-inline-flex align-items-center gap-2"><i data-lucide="log-in"></i>{% translate "Failed panel logins" %}</span><span class="fw-semibold" id="dashboardFailedLogins">—</span></div><div class="d-flex justify-content-between align-items-center py-2 border-bottom"><span class="small d-inline-flex align-items-center gap-2"><i data-lucide="ban"></i>{% translate "Blocked IP addresses" %}</span><span class="fw-semibold" id="dashboardBlockedIps">—</span></div><div class="d-flex justify-content-between align-items-center py-2"><span class="small d-inline-flex align-items-center gap-2"><i data-lucide="badge-alert"></i>{% translate "Certificates expiring soon" %}</span><span class="fw-semibold" id="dashboardExpiringCertificates">—</span></div><div class="d-flex gap-2 flex-wrap mt-3"><a href="{% url 'bfd_report' %}"
   class="btn btn-outline-secondary btn-sm"><i data-lucide="shield-alert"></i>{% translate "BFD reports" %}</a><a href="{% url 'sslhost' %}" class="btn btn-outline-secondary btn-sm"><i data-lucide="shield-check"></i>{% translate "SSL certificates" %}</a></div></div></div>
        <div class="col-12 col-xl-4"><div class="eenos-card h-100"><div class="eenos-panel-title">{% translate "Maintenance" %}</div><div class="eenos-panel-subtitle mb-4">{% translate "Backup and software status." %}</div><div class="d-flex gap-3 mb-4"><span class="dashboard-service-icon text-muted"><i data-lucide="database-backup"></i></span><div><div class="fw-semibold" id="dashboardBackupTitle">{% translate "Loading backup status…" %}</div><div class="small text-muted" id="dashboardBackupDetail">—</div></div></div><div class="d-flex gap-3 mb-4"><span class="dashboard-service-icon text-muted"><i data-lucide="package-open"></i></span><div><div class="fw-semibold" id="dashboardUpdatesTitle">{% translate "Loading update status…" %}</div><div class="small text-muted" id="dashboardUpdatesDetail">—</div></div></div><div class="d-flex gap-3"><span class="dashboard-service-icon text-muted"><i data-lucide="power"></i></span><div><div class="fw-semibold" id="dashboardRebootTitle">{% translate "Loading reboot status…" %}</div><div class="small text-muted" id="dashboardLastBoot">—</div></div></div><div class="d-flex gap-2 flex-wrap mt-4"><a href="{% url 'backup_restore' %}"
   class="btn btn-outline-secondary btn-sm"><i data-lucide="database-backup"></i>{% translate "Backups" %}</a><a href="{% url 'auto_update' %}"
   class="btn btn-outline-secondary btn-sm"><i data-lucide="refresh-cw"></i>{% translate "Updates" %}</a></div></div></div>
        <div class="col-12 col-xl-4" id="recent-activity">
            <div class="eenos-card h-100">
                <div class="d-flex justify-content-between align-items-start gap-3 mb-4">
                    <div>
                        <div class="eenos-panel-title">{% translate "Recent Activity" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Latest administrative changes." %}</div>
                    </div>
                    <a href="{% url 'audit_activity' %}"
                       class="btn btn-sm btn-outline-secondary flex-shrink-0"><i data-lucide="arrow-right"></i>{% translate "View All" %}</a>
                </div>
                <div class="dashboard-timeline" id="dashboardRecentActivity">
                    <div class="small text-muted">{% translate "Loading recent activity…" %}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="eenos-card mb-4" id="dashboardRecentAccounts">
        <div class="d-flex justify-content-between gap-3 mb-3">
            <div>
                <div class="eenos-panel-title">{% translate "Recent Accounts" %}</div>
                <div class="eenos-panel-subtitle">{% translate "Recently created hosting accounts." %}</div>
            </div>
            <a href="{% url 'listuser' %}" class="eenos-link small">{% translate "View all" %}</a>
        </div>
        <div class="d-none d-md-block">
            <table class="table table-hover align-middle dashboard-table mb-0">
                <thead>
                    <tr>
                        <th>{% translate "Primary Domain" %}</th>
                        <th>{% translate "Account" %}</th>
                        <th>{% translate "Hosting Plan" %}</th>
                        <th>{% translate "Owner" %}</th>
                        <th>{% translate "Created" %}</th>
                        <th>{% translate "Status" %}</th>
                        <th class="text-end">{% translate "Action" %}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">{% translate "Loading recent accounts…" %}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="d-md-none" id="dashboardRecentAccountsMobile">
            <div class="text-center text-muted py-4">{% translate "Loading recent accounts…" %}</div>
        </div>
    </div>
    <div class="modal fade"
         id="dashboardAccountModal"
         tabindex="-1"
         aria-labelledby="dashboardAccountModalTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <div class="modal-title fw-semibold" id="dashboardAccountModalTitle"></div>
                        <div class="small text-muted" id="dashboardAccountModalDomain"></div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="small text-muted">{% translate "Hosting Plan" %}</div>
                            <div class="fw-semibold" id="dashboardAccountModalPlan"></div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">{% translate "Owner" %}</div>
                            <div class="fw-semibold" id="dashboardAccountModalOwner"></div>
                        </div>
                        <div class="col-12">
                            <div class="small text-muted">{% translate "Contact Email" %}</div>
                            <div class="fw-semibold text-break" id="dashboardAccountModalEmail"></div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">{% translate "IP Address" %}</div>
                            <div class="fw-semibold" id="dashboardAccountModalIp"></div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">{% translate "Status" %}</div>
                            <div class="fw-semibold" id="dashboardAccountModalStatus"></div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">{% translate "Disk Quota" %}</div>
                            <div class="fw-semibold" id="dashboardAccountModalQuota"></div>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted">{% translate "Bandwidth Limit" %}</div>
                            <div class="fw-semibold" id="dashboardAccountModalBandwidth"></div>
                        </div>
                        <div class="col-12">
                            <div class="small text-muted">{% translate "Created" %}</div>
                            <div class="fw-semibold" id="dashboardAccountModalCreated"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Close" %}</button>
                    <a href="#"
                       class="btn btn-primary"
                       id="dashboardAccountModalLogin"
                       target="_blank"
                       rel="noopener noreferrer"
                       title="{% translate "Open this account's user control panel" %}"
                       aria-label="{% translate "Login to this account's user panel" %}"><i data-lucide="log-in"></i>{% translate "Login to User Panel" %}</a>
                </div>
            </div>
        </div>
    </div>
    <div class="eenos-panel-title mb-3">{% translate "Quick Actions" %}</div>
    <div class="row g-3">
        <div class="col-6 col-md-4 col-xl"><a href="{% url 'createuser' %}" class="dashboard-action"><i data-lucide="user-plus"></i><span class="small fw-semibold">{% translate "Create Account" %}</span></a></div>
        <div class="col-6 col-md-4 col-xl"><a href="{% url 'mail_queue' %}" class="dashboard-action"><i data-lucide="mails"></i><span class="small fw-semibold">{% translate "Mail Queue" %}</span></a></div>
        <div class="col-6 col-md-4 col-xl"><a href="{% url 'monitor_status' %}" class="dashboard-action"><i data-lucide="activity"></i><span class="small fw-semibold">{% translate "Service Status" %}</span></a></div>
        <div class="col-6 col-md-4 col-xl"><a href="{% url 'dnslist' %}" class="dashboard-action"><i data-lucide="globe"></i><span class="small fw-semibold">{% translate "DNS Manager" %}</span></a></div>
        <div class="col-6 col-md-4 col-xl"><a href="{% url 'backup_schedule' %}" class="dashboard-action"><i data-lucide="calendar-clock"></i><span class="small fw-semibold">{% translate "Backup Schedules" %}</span></a></div>
        <div class="col-6 col-md-4 col-xl"><a href="{% url 'sslhost' %}" class="dashboard-action"><i data-lucide="shield-check"></i><span class="small fw-semibold">{% translate "SSL Certificates" %}</span></a></div>
    </div>
{% endblock %}