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

{% block title %}Retention Engine - 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>Retention Engine</h1>
            <div class="ops-subtitle">
                Operational reminders, AI summaries, weekly reports, low-stock alerts, branch insights, and cashier summaries.
            </div>
        </div>
        <div class="ops-actions">
            <button onclick="generateRetention()">Generate</button>
        </div>
    </header>

    <section class="ops-panel">
        <h2>Campaigns</h2>
        <div class="ops-list">
            {% for item in snapshot.campaigns %}
                <div class="ops-list-item">
                    <strong>{{ item.title or item.campaign_type }}</strong>
                    <p>{{ item.message or (item.count ~ ' events') }}</p>
                    <span class="ops-muted">{{ item.status or '' }}</span>
                </div>
            {% else %}
                <div class="ops-list-item">No retention campaigns yet.</div>
            {% endfor %}
        </div>
    </section>
</main>

<script>
async function generateRetention() {
    await fetch("/api/retention-engine/generate", {method: "POST"});
    location.reload();
}
</script>
{% endblock %}