{% extends "base.html" %}
{% block title %}{{ p.title }} · SD RMM{% endblock %}
{% block content %}

<style>
  .crumb { font-size:12px; color:var(--muted); margin-bottom:6px; }
  .crumb a { color:var(--muted); }
  .prod-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
  .prod-badge { font:700 10px/1.6 var(--font-sans); text-transform:uppercase; letter-spacing:.6px;
                padding:2px 9px; border-radius:999px; }
  .prod-badge.live { background:rgba(74,222,128,.15); color:var(--ok); }
  .prod-badge.preview { background:rgba(251,191,36,.15); color:#fbbf24; }
  .prod-tagline { color:var(--muted); font-size:13.5px; max-width:760px; margin:0 0 18px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1); margin-bottom:18px; }
  .card h2 { font-size:13px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .feat { display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
  .feat:last-child { border-bottom:0; }
  .feat .tag { margin-left:auto; font:700 10px/1.6 var(--font-sans); text-transform:uppercase; letter-spacing:.5px; padding:1px 8px; border-radius:999px; white-space:nowrap; }
  .tag.live { background:rgba(74,222,128,.15); color:var(--ok); }
  .tag.live-service { background:rgba(74,222,128,.10); color:var(--ok); }
  .tag.roadmap { background:var(--surface-3); color:var(--muted); }
  .note { color:var(--muted); font-size:12.5px; margin-top:12px; }
  table.assets { width:100%; border-collapse:collapse; font-size:12.5px; }
  table.assets th { text-align:left; color:var(--muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding:8px; border-bottom:1px solid var(--line); }
  table.assets td { padding:9px 8px; border-bottom:1px solid var(--line-soft); }
  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--muted-2); margin-right:6px; }
  .dot.on { background:var(--ok); box-shadow:0 0 0 3px rgba(74,222,128,.15); }
</style>

<div class="crumb"><a href="/dashboard">Overview</a> / {{ p.group }} / {{ p.title }}</div>
<div class="prod-head">
  <h1 class="page-title" style="margin:0;">{{ p.title }}</h1>
  <span class="prod-badge {{ p.status }}">{{ 'Live' if p.status == 'live' else 'Preview' }}</span>
</div>
<p class="prod-tagline">{{ p.tagline }}</p>

{% if servers is not none %}
<div class="card">
  <h2>Protected servers</h2>
  {% if servers %}
  <table class="assets">
    <thead><tr><th>Host</th><th>OS</th><th>Agent</th><th>Last seen</th></tr></thead>
    <tbody>
    {% for r in servers %}
      {% set a = r.agent %}
      <tr>
        <td><span class="dot {% if r.online %}on{% endif %}"></span><a href="/orgs/{{ a.org_id }}/agents/{{ a.id }}"><strong>{{ a.hostname }}</strong></a></td>
        <td class="muted">{{ a.os }}{% if a.os_version %} {{ a.os_version }}{% endif %}</td>
        <td class="muted">v{{ a.agent_version or '?' }}</td>
        <td class="muted" style="font-family:var(--font-mono);font-size:11.5px;">{% if a.last_seen_at %}{{ a.last_seen_at| pt('%m-%d %H:%M') }}{% else %}never{% endif %}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="muted" style="font-size:13px;">No server-class devices enrolled yet. <a href="/downloads">Deploy an agent &rsaquo;</a></p>
  {% endif %}
</div>
{% endif %}

<div class="card">
  <h2>What this covers</h2>
  {% for label, tag in p.features %}
  <div class="feat">
    <span>{{ label }}</span>
    <span class="tag {{ tag }}">{{ {'live':'Live','live-service':'Managed service','roadmap':'Roadmap'}[tag] }}</span>
  </div>
  {% endfor %}
  {% if p.note %}<p class="note">{{ p.note }}</p>{% endif %}
</div>

{% if p.standards %}
<div class="card">
  <h2>How the platform encrypts today</h2>
  {% for area, detail in p.standards %}
  <div class="feat" style="align-items:flex-start;">
    <span style="flex:none; min-width:170px; font-weight:600;">{{ area }}</span>
    <span class="muted" style="font-size:12.5px;">{{ detail }}</span>
  </div>
  {% endfor %}
  <p class="note">Same doctrine we deploy for clients: TLS 1.3 in transit, authenticated AES encryption for secrets at rest, and hashes — never plaintext — for anything used to prove identity.</p>
</div>
{% endif %}

{% if p.downloads %}
<div class="card">
  <h2>Configuration templates — download &amp; deploy</h2>
  {% for fname, fdesc in p.downloads %}
  <div class="feat">
    <span><strong style="font-family:var(--font-mono); font-size:12.5px;">{{ fname }}</strong><br>
    <span class="muted" style="font-size:12px;">{{ fdesc }}</span></span>
    <a class="tag live" style="text-decoration:none;" href="/static/net-templates/{{ fname }}" download>Download</a>
  </div>
  {% endfor %}
  <p class="note">Sanitized, placeholder-driven baselines — replace every &lt;PLACEHOLDER&gt; per site. These are the same templates SD deploys on managed engagements.</p>
</div>
{% endif %}

{% if pkey == 'cloud' %}
<div class="card">
  <h2>Open a console</h2>
  <div class="feat"><span>Cloud storage (Nextcloud)</span><a class="tag live" style="text-decoration:none;" href="https://cloud.example.com" target="_blank" rel="noopener">Open &nearr;</a></div>
  <div class="feat"><span>Password vault (Vaultwarden)</span><a class="tag live" style="text-decoration:none;" href="https://vault.example.com" target="_blank" rel="noopener">Open &nearr;</a></div>
  <div class="feat"><span>Storage admin (per-org buckets)</span><a class="tag live" style="text-decoration:none;" href="/cloud/storage">Open &rsaquo;</a></div>
  <div class="feat"><span>Microsoft 365 integration</span><a class="tag live" style="text-decoration:none;" href="/integrations/microsoft">Open &rsaquo;</a></div>
</div>
{% endif %}

{% endblock %}