{{define "title"}}Resources — Approovia Portal{{end}}
{{define "content"}}
<h1 class="page-title">Dashboard</h1>

{{$data := .Data}}

{{range $data.Zones}}
<div class="zone-section">
  <div class="zone-header">
    <span class="badge badge-{{.Zone}}">{{.Zone}}</span>
    <h2>{{.Zone}}</h2>
  </div>
  <div class="services-grid">
    {{range .Services}}
    <a href="{{.URL}}" class="service-card" target="_blank" rel="noopener">
      <div class="service-card-name">{{.Name}}</div>
      <div class="service-card-desc">{{.Description}}</div>
    </a>
    {{end}}
  </div>
</div>
{{end}}

<div class="card mt3">
  <div class="card-title">Diagnostics</div>

  <div class="diag-section">
    <h4>WireGuard</h4>
    <div class="diag-cmd">
      <span class="diag-cmd-text">sudo wg show</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
    <div class="diag-cmd">
      <span class="diag-cmd-text">systemctl status wg-vip-follow.timer</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
    <div class="diag-cmd">
      <span class="diag-cmd-text">journalctl -u wg-vip-follow -n 20 --no-pager</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
  </div>

  <div class="diag-section">
    <h4>Kubernetes</h4>
    <div class="diag-cmd">
      <span class="diag-cmd-text">kubectl get nodes -o wide</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
    <div class="diag-cmd">
      <span class="diag-cmd-text">kubectl get pods -A | grep -v Running | grep -v Completed</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
    <div class="diag-cmd">
      <span class="diag-cmd-text">flux get all -A</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
  </div>

  <div class="diag-section">
    <h4>SSH (production)</h4>
    <div class="diag-cmd">
      <span class="diag-cmd-text">ssh control1.pro.approovia.com</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
    <div class="diag-cmd">
      <span class="diag-cmd-text">ssh worker1.pro.approovia.com</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
  </div>

  <div class="diag-section">
    <h4>SSH (staging)</h4>
    <div class="diag-cmd">
      <span class="diag-cmd-text">ssh control1.stg.approovia.com</span>
      <button class="copy-btn" onclick="copyCmd(this)">Copy</button>
    </div>
  </div>
</div>

<script>
function copyCmd(btn) {
  const text = btn.previousElementSibling.textContent.trim();
  navigator.clipboard.writeText(text).then(() => {
    btn.textContent = 'Copied ✓';
    btn.classList.add('copied');
    setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
  });
}
</script>
{{end}}