{% extends "base.html" %}
{% block title %}Status servisa — Idriz Admin{% endblock %}
{% block extra_css %}
  .summary { display: flex; gap: 14px; margin-bottom: 20px; }
  .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 14px 18px; min-width: 130px;
  }
  .card .num { font-size: 26px; font-weight: 700; }
  .card .lbl { color: var(--muted); font-size: 13px; }
  table { width: 100%; border-collapse: collapse; background: var(--panel);
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  th, td { text-align: left; padding: 12px 16px; font-size: 14px; }
  th { background: #fafbfc; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
  tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
  .svc-name { font-weight: 600; }
  .svc-desc { color: var(--muted); font-size: 12.5px; }
  .svc-unit { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; }
  .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
  .badge.ok { background: #e6f5ec; color: var(--ok); }
  .badge.warn { background: #fdf1dd; color: var(--warn); }
  .badge.bad { background: #fdecec; color: var(--bad); }
  .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
  .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
  .enabled-yes { color: var(--ok); } .enabled-no { color: var(--muted); }
  .foot { color: var(--muted); font-size: 13px; margin-top: 16px; }
  .refresh { float: right; font-size: 13px; text-decoration: none; color: var(--accent); }
{% endblock %}
{% block content %}
  <a class="refresh" href="{{ url_for('status') }}">↻ Osvježi</a>
  <h1>Status servisa</h1>
  <p class="sub">Pregled sistemskih i korisničkih servisa mašine <strong>idriz</strong>.</p>

  <div class="summary">
    <div class="card">
      <div class="num">{{ ok }}/{{ total }}</div>
      <div class="lbl">servisa aktivno</div>
    </div>
  </div>

  <table>
    <thead>
      <tr>
        <th>Servis</th>
        <th>Stanje</th>
        <th>Autostart</th>
        <th>Uptime</th>
        <th>PID</th>
        <th>Memorija</th>
      </tr>
    </thead>
    <tbody>
      {% for s in services %}
      <tr>
        <td>
          <div class="svc-name"><span class="dot {{ s.state }}"></span>{{ s.label }}</div>
          <div class="svc-desc">{{ s.desc }}</div>
          <div class="svc-unit">{{ s.unit }}{% if s.scope == 'user' %} (user){% endif %}</div>
        </td>
        <td>
          <span class="badge {{ s.state }}">{{ s.active }}{% if s.sub and s.sub != s.active %} / {{ s.sub }}{% endif %}</span>
        </td>
        <td>
          {% if s.enabled == 'enabled' %}<span class="enabled-yes">✓ enabled</span>
          {% elif s.enabled == 'static' %}<span class="enabled-yes">static</span>
          {% else %}<span class="enabled-no">{{ s.enabled }}</span>{% endif %}
        </td>
        <td>{{ s.uptime }}</td>
        <td>{% if s.pid and s.pid != '0' %}{{ s.pid }}{% else %}—{% endif %}</td>
        <td>{{ s.mem }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <p class="foot">Zadnje osvježeno: {{ now }}</p>
{% endblock %}