{% extends "base.html" %}
{% block title %}Real User Monitoring{% endblock %}
{% block content %}
{% from '_limit.html' import limit as plan_limit, paused, locked %}
{{ plan_limit(totals.sites, limit, 'RUM sites') }}
<div class="hdr">
  <div><h1>Real User Monitoring</h1><p class="sub" style="margin:0">Core Web Vitals, page views, JS errors and slow resources from your real visitors. One 8 KB snippet, no cookies. {{ totals.sites }}/{{ limit }} site{{ 's' if limit != 1 }} on {{ plan.name }} · {{ plan.retention_days }}-day history.</p></div>
  <div class="actions">{% if user.can_edit %}<button class="btn primary" onclick="document.getElementById('addsite').hidden=!document.getElementById('addsite').hidden">+ Add site</button>{% endif %}</div>
</div>
<div id="addsite" class="panel" style="margin-bottom:18px" {% if sites %}hidden{% endif %}>
  <form method="post" action="/app/rum"><input type="hidden" name="csrf" value="{{ csrf }}">
    <div class="actions" style="flex-wrap:wrap">
      <input type="text" name="name" placeholder="Site name, e.g. Marketing site" required style="width:240px">
      <input type="text" name="origins" placeholder="Allowed origins: https://example.com, *.example.com" style="width:340px">
      <select name="sample_rate" style="width:auto"><option value="100">Sample 100%</option><option value="50">Sample 50%</option><option value="25">Sample 25%</option><option value="10">Sample 10%</option><option value="5">Sample 5%</option><option value="1">Sample 1%</option></select>
      <button class="btn primary">Create &amp; get snippet</button></div>
    <div class="help" style="margin-top:8px">Leave origins empty to accept beacons from any page carrying your token. Sampling is per session; 100% is fine for most sites.</div></form>
</div>
<div class="grid g4" style="margin-bottom:20px">
  <div class="stat"><div class="k">Sites</div><div class="v">{{ totals.sites }}</div></div>
  <div class="stat"><div class="k">Page views · 24h</div><div class="v">{{ totals.views }}</div></div>
  <div class="stat"><div class="k">Sessions · 24h</div><div class="v">{{ totals.sessions }}</div></div>
  <div class="stat"><div class="k">JS errors · 24h</div><div class="v" style="color:{% if totals.errors %}var(--err){% else %}var(--text){% endif %}">{{ totals.errors }}</div></div>
</div>
{% if not sites %}
<div class="panel empty"><h2>No sites yet</h2><p>Add a site, paste one script tag into your pages, and Core Web Vitals, page views and JavaScript errors from real visitors start showing within minutes. Works with any framework or static host.</p></div>
{% else %}
<div class="grid g3" style="grid-template-columns:repeat(auto-fill,minmax(320px,1fr))">
{% for s in sites %}{% set st = stats[s.id] %}
<a class="panel" href="/app/rum/{{ s.id }}" style="display:block;color:inherit;text-decoration:none;{% if s.paused_by_plan %}opacity:.6;{% endif %}{% if st.lcp_rating == 'poor' %}border-color:rgba(255,92,122,.5){% elif st.lcp_rating == 'needs' %}border-color:rgba(245,179,66,.5){% endif %}">
  <div class="hdr" style="margin-bottom:10px"><div><b style="font-size:16px">{% if s.last_seen_at %}<span class="dot ok"></span>{% else %}<span class="dot"></span>{% endif %}{{ s.name }}</b> {{ paused(s.paused_by_plan, 'sites') }}
    <div class="small dim">{% if s.origins %}{{ s.origins|join(', ') }}{% else %}any origin{% endif %} · sample {{ s.sample_rate }}%</div></div>
    <div>{% if st.errors %}<span class="pill err">{{ st.errors }} errors</span>{% endif %}</div></div>
  {% if not s.last_seen_at %}<div class="small muted">Waiting for the first page view. Open the site for the snippet.</div>
  {% else %}
  <div class="grid" style="grid-template-columns:repeat(3,1fr);gap:10px">
    <div><div class="xs dim">Views · 24h</div><div style="font-weight:700">{{ st.views }}</div></div>
    <div><div class="xs dim">Sessions</div><div style="font-weight:700">{{ st.sessions }}</div></div>
    <div><div class="xs dim">LCP p75</div><div style="font-weight:700;color:{% if st.lcp_rating == 'good' %}var(--ok){% elif st.lcp_rating == 'needs' %}var(--warn){% elif st.lcp_rating == 'poor' %}var(--err){% else %}var(--text){% endif %}">{{ st.lcp_fmt }}</div></div>
  </div>
  {% if st.share.total %}<div style="display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line);margin-top:10px" title="Good {{ st.share.good_pct }}% · Needs work {{ st.share.needs_pct }}% · Poor {{ st.share.poor_pct }}%">
    <div style="width:{{ st.share.good_pct }}%;background:var(--ok)"></div><div style="width:{{ st.share.needs_pct }}%;background:var(--warn)"></div><div style="width:{{ st.share.poor_pct }}%;background:var(--err)"></div></div>
  <div class="xs dim" style="display:flex;gap:12px;margin-top:6px"><span><span class="ok">■</span> good {{ st.share.good_pct }}%</span><span><span class="warn">■</span> needs work {{ st.share.needs_pct }}%</span><span><span class="err">■</span> poor {{ st.share.poor_pct }}%</span><span style="margin-left:auto">{{ s.last_seen_at|timeago }}</span></div>{% endif %}
  {% endif %}
</a>
{% endfor %}
</div>
{% endif %}
{% endblock %}