{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Customer Success - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
<header class="ops-header"><div><h1>Customer Success</h1><div class="ops-subtitle">Health scoring, churn risk, onboarding completion, engagement, and retention recommendations.</div></div><div class="ops-actions"><button onclick="refreshHealth()">Refresh</button></div></header>
<section class="ops-grid">
<div class="ops-panel ops-metric"><span class="ops-muted">Health</span><strong>{{ snapshot.current.health_score }}%</strong><span class="ops-badge {{ 'danger' if snapshot.current.churn_risk == 'high' else 'warn' if snapshot.current.churn_risk == 'medium' else '' }}">{{ snapshot.current.churn_risk|title }} Risk</span></div>
<div class="ops-panel ops-metric"><span class="ops-muted">Onboarding</span><strong>{{ snapshot.current.onboarding_score|round|int }}%</strong></div>
<div class="ops-panel ops-metric"><span class="ops-muted">Adoption</span><strong>{{ snapshot.current.adoption_score|round|int }}%</strong></div>
<div class="ops-panel ops-metric"><span class="ops-muted">Reliability</span><strong>{{ snapshot.current.reliability_score|round|int }}%</strong></div>
</section>
<section class="ops-panel"><h2>Recommendations</h2><div class="ops-list">{% for insight in snapshot.current.insights %}<div class="ops-list-item">{{ insight }}</div>{% else %}<div class="ops-list-item">Customer health is stable.</div>{% endfor %}</div></section>
<section class="ops-panel"><h2>Success Events</h2><div class="ops-list">{% for event in snapshot.events %}<div class="ops-list-item"><span class="ops-badge {{ 'danger' if event.severity == 'critical' else 'warn' if event.severity == 'warning' else 'info' }}">{{ event.severity|title }}</span> <strong>{{ event.title }}</strong><p>{{ event.message }}</p></div>{% else %}<div class="ops-list-item">No success events yet.</div>{% endfor %}</div></section>
</main><script>async function refreshHealth(){await fetch("/api/customer-success/refresh",{method:"POST"});location.reload();}</script>
{% endblock %}