{% extends "base.html" %}
{% block title %}مدیریت پنل‌ها | فرنود{% endblock %}
{% block content %}
<div class="dashboard">
{% include "_sidebar.html" %}
<main class="main">
<header class="topbar">
  <h2>مدیریت پنل‌ها</h2>
  <div class="topbar-actions">
    <a href="{{ url_for('panels_add') }}" class="btn-primary inline">+ پنل جدید</a>
    <button type="button" class="theme-toggle" id="themeToggle">🌓</button>
  </div>
</header>
<div class="content">
{% if panels %}
<div class="panel-grid" id="panelGrid">
{% for p in panels %}
<a href="{{ url_for('panel_detail', slug=p.slug) }}" class="panel-card card" data-slug="{{ p.slug }}">
  <div class="panel-card-top">
    <div class="panel-type-badge">{{ p.panel_type }}</div>
    <span class="status-pill {% if p.last_status in ['online','connected'] %}online{% else %}offline{% endif %}" data-status>
      <span class="status-dot"></span>
      <span class="status-text">{% if p.last_status in ['online','connected'] %}فعال{% else %}غیرفعال{% endif %}</span>
    </span>
  </div>
  <h3 class="panel-name">{{ p.name }}</h3>
  <p class="panel-url">{{ p.base_url }}</p>
  <div class="panel-stats-mini" data-mini>
    <span>کاربران: <b data-users>—</b></span>
    <span>CPU: <b data-cpu>—</b></span>
  </div>
  <div class="panel-meta">
    <span>/{{ p.slug }}</span>
    <span data-check>—</span>
  </div>
</a>
{% endfor %}
</div>
{% else %}
<div class="empty">
  <h3>هنوز پنلی متصل نشده</h3>
  <p>پنل پاسارگارد را اضافه کنید تا آمار زنده اینجا دیده شود.</p>
  <a href="{{ url_for('panels_add') }}" class="btn-primary inline" style="margin-top:16px;display:inline-block">افزودن پنل</a>
</div>
{% endif %}
</div>
</main>
</div>
<script>
(async function(){
  const cards = document.querySelectorAll('.panel-card[data-slug]');
  for (const card of cards) {
    const slug = card.dataset.slug;
    try {
      const res = await fetch('/api/panels/' + slug + '/stats', {credentials:'same-origin'});
      const data = await res.json();
      const pill = card.querySelector('[data-status]');
      const text = card.querySelector('.status-text');
      const check = card.querySelector('[data-check]');
      if (data.ok) {
        pill.classList.add('online'); pill.classList.remove('offline');
        text.textContent = 'فعال';
        const s = data.stats || {};
        const users = s.total_user || s.users_total || (s.users && s.users.total) || '—';
        const cpu = s.cpu_usage != null ? (Number(s.cpu_usage).toFixed(0) + '%') : (s.cpu != null ? s.cpu + '%' : '—');
        card.querySelector('[data-users]').textContent = users;
        card.querySelector('[data-cpu]').textContent = cpu;
        check.textContent = 'زنده';
      } else {
        pill.classList.add('offline'); pill.classList.remove('online');
        text.textContent = 'غیرفعال';
        check.textContent = 'آفلاین';
      }
    } catch(e) {
      const pill = card.querySelector('[data-status]');
      pill.classList.add('offline');
      card.querySelector('.status-text').textContent = 'غیرفعال';
    }
  }
})();
</script>
{% endblock %}