{{ define "content" }}
<div class="card">
  <h2><i class="fas fa-dashboard page"></i> Dashboard</h2>

  <table class="styled-table" id="metricsTable">
    <thead>
      <tr>
        <th>Node</th>
        <th>Status</th>
        <th>Load</th>
        <th>Memory</th>
        <th>Uptime</th>
      </tr>
    </thead>
    <tbody>
      <!-- Filled by JS -->
    </tbody>
  </table>

  <canvas id="clusterChart" width="600" height="300" style="margin-top: 30px;"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const nodes = [
    { name: "gohawk", uptime: "2d 4h" },
    { name: "node2", uptime: "1d 19h" }
  ];

  const chartData = {
    labels: [],
    datasets: [{
      label: 'Cluster Load Avg',
      data: [],
      backgroundColor: 'rgba(0, 192, 129, 0.2)',
      borderColor: '#00c081',
      borderWidth: 2,
      fill: true,
      tension: 0.3
    }]
  };

  const chartOptions = {
    scales: {
      y: {
        beginAtZero: false
      }
    }
  };

  const chart = new Chart(document.getElementById('clusterChart').getContext('2d'), {
    type: 'line',
    data: chartData,
    options: chartOptions
  });

  function getRandomMetric(base, spread = 1) {
    return (base + Math.random() * spread).toFixed(2);
  }

  function updateMetrics() {
    const now = new Date().toLocaleTimeString();
    chart.data.labels.push(now);
    if (chart.data.labels.length > 10) chart.data.labels.shift();

    const avgLoad = getRandomMetric(1.0);
    chart.data.datasets[0].data.push(avgLoad);
    if (chart.data.datasets[0].data.length > 10) chart.data.datasets[0].data.shift();

    chart.update();

    // Update table
    const tableBody = document.getElementById("metricsTable").querySelector("tbody");
    tableBody.innerHTML = "";
    nodes.forEach(n => {
      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td>${n.name}</td>
        <td><span class="status-dot online"></span> Online</td>
        <td>${getRandomMetric(0.5, 1.5)}</td>
        <td>${getRandomMetric(4, 4)} GB</td>
        <td>${n.uptime}</td>
      `;
      tableBody.appendChild(tr);
    });
  }

  setInterval(updateMetrics, 3000); // every 3 seconds
  updateMetrics(); // initial load
</script>
{{ end }}