{% extends "base.html" %}
{% block title %}Servers{% endblock %}
{% block content %}
{% from '_limit.html' import limit, paused, locked %}
{{ limit(cards|length, plan.servers, 'servers', 'Servers beyond the limit are paused and their agents get HTTP 402.') }}
<div class="hdr">
  <div><h1>Servers</h1><p class="sub" style="margin:0">Infrastructure agent: CPU, memory, disks, network, processes, services, containers and security posture. {{ stats.total }}/{{ plan.servers }} servers · samples every {{ plan.server_interval }} s.</p></div>
  <div class="actions"><a class="btn sm" href="/app/reports/export?sections=servers,server_metrics,endpoints">Export</a>{% if user.can_edit %}<button class="btn primary" onclick="document.getElementById('addsrv').hidden=!document.getElementById('addsrv').hidden">+ Add server</button>{% endif %}</div>
</div>
<div id="addsrv" class="panel" style="margin-bottom:18px" {% if cards %}hidden{% endif %}>
  <form method="post" action="/app/servers" class="actions"><input type="hidden" name="csrf" value="{{ csrf }}">
    <input type="text" name="name" placeholder="Server name, e.g. web-1" required style="width:240px"><input type="text" name="tags" placeholder="tags: prod, db" style="width:200px"><button class="btn primary">Create &amp; get install command</button>
    <span class="small muted">You'll get a one-line installer. Works on Ubuntu, Debian, RHEL, Alpine, macOS; needs Python 3.8+ and outbound HTTPS only.</span></form>
</div>
<div class="grid g4" style="margin-bottom:20px">
  <div class="stat"><div class="k">Servers</div><div class="v">{{ stats.total }}</div></div>
  <div class="stat"><div class="k">Online</div><div class="v" style="color:var(--ok)">{{ stats.online }}</div></div>
  <div class="stat"><div class="k">Offline</div><div class="v" style="color:{% if stats.offline %}var(--err){% else %}var(--text){% endif %}">{{ stats.offline }}</div></div>
  <div class="stat"><div class="k">Open incidents</div><div class="v" style="color:{% if stats.incidents %}var(--err){% else %}var(--text){% endif %}">{{ stats.incidents }}</div></div>
</div>
{% if cards or q or tag %}
<form method="get" class="actions" style="margin-bottom:14px"><input type="text" name="q" value="{{ q }}" placeholder="Search name, host or IP" style="width:240px">{% if all_tags %}<select name="tag" style="width:auto"><option value="">Any tag</option>{% for t in all_tags %}<option value="{{ t }}" {% if tag == t %}selected{% endif %}>{{ t }}</option>{% endfor %}</select>{% endif %}<button class="btn sm">Filter</button>{% if q or tag %}<a class="btn ghost sm" href="/app/servers">Clear</a>{% endif %}</form>
{% endif %}
{% if not cards %}
<div class="panel empty"><h2>No servers yet</h2><p>Add a server, run the one-line installer on it, and metrics start flowing within a minute. Same features as Dynatrace-style host monitoring: metrics, processes, services, containers, security, alerts and incidents.</p></div>
{% else %}
<div class="grid g3" style="grid-template-columns:repeat(auto-fill,minmax(320px,1fr))">
{% for c in cards %}{% set s = c.s %}
<a class="panel" href="/app/servers/{{ s.id }}" style="display:block;color:inherit;text-decoration:none;{% if s.online is sameas false %}border-color:rgba(255,92,122,.5){% elif c.incidents %}border-color:rgba(245,179,66,.5){% endif %}">
  <div class="hdr" style="margin-bottom:10px"><div><b style="font-size:16px">{% if s.online %}<span class="dot ok"></span>{% elif s.online is sameas false %}<span class="dot err"></span>{% else %}<span class="dot"></span>{% endif %}{{ s.name }}</b> {{ paused(s.paused_by_plan, 'servers') }}
    <div class="small dim">{{ s.hostname or 'agent not connected yet' }}{% if s.os %} · {{ s.os }}{% endif %}{% if s.public_ip %} · {{ s.public_ip }}{% endif %}</div></div>
    <div>{% for t in s.tags or [] %}<span class="tag">{{ t }}</span>{% endfor %}{% if c.incidents %}<span class="pill err">{{ c.incidents }} open</span>{% endif %}</div></div>
  {% if s.online is none %}<div class="small muted">Waiting for the first report. Open the server to see the install command.</div>
  {% else %}
  <div class="grid" style="grid-template-columns:repeat(3,1fr);gap:10px">
    {% for label, val in (('CPU', c.cpu), ('Memory', c.mem), ('Disk', c.disk)) %}
    <div><div class="xs dim">{{ label }}</div><div style="font-weight:700">{{ '%.0f'|format(val) if val is not none else '—' }}%</div><div style="height:5px;border-radius:3px;background:var(--line);margin-top:4px"><div style="height:5px;border-radius:3px;width:{{ val|round|int if val is not none else 0 }}%;background:{% if val is not none and val >= 90 %}var(--err){% elif val is not none and val >= 75 %}var(--warn){% else %}var(--ok){% endif %}"></div></div></div>
    {% endfor %}
  </div>
  <div class="small dim" style="margin-top:10px;display:flex;gap:12px;flex-wrap:wrap"><span>load {{ '%.2f'|format(c.load) if c.load is not none else '—' }}</span><span>up {{ fmt_uptime(c.uptime) }}</span>{% if c.containers is not none %}<span>{{ c.containers }} containers</span>{% endif %}{% if c.updates %}<span class="warn">{{ c.updates }} updates</span>{% endif %}{% if c.reboot %}<span class="err">reboot required</span>{% endif %}<span style="margin-left:auto">{{ s.last_seen_at|timeago }}</span></div>
  {% endif %}
</a>
{% endfor %}
</div>
{% endif %}
{% endblock %}