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

{% block title %}Growth - 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>Growth</h1>
            <div class="ops-subtitle">Referral codes, shop invitations, cashier referral flows, and partner ecosystem preparation.</div>
        </div>
        <div class="ops-actions">
            <a class="ops-button secondary" href="/business-transformation">Transformation</a>
            <a class="ops-button secondary" href="/admin">Admin</a>
        </div>
    </header>

    <section class="ops-panel ops-metric">
        <span class="ops-muted">Referral Code</span>
        <strong>{{ snapshot.referral_code }}</strong>
    </section>

    <section class="ops-panel">
        <h2>Invite A Shop Or Cashier</h2>
        <form class="ops-form-grid" method="post" action="/growth/invitations">
            <label>Name <input name="invited_name" placeholder="Business or cashier name"></label>
            <label>Contact <input name="invited_contact" placeholder="Phone or email"></label>
            <label>Type
                <select name="invitation_type">
                    <option value="shop">Shop</option>
                    <option value="cashier">Cashier</option>
                    <option value="installer">Installer</option>
                    <option value="reseller">Reseller</option>
                </select>
            </label>
            <button type="submit">Create Invite</button>
        </form>
    </section>

    <section class="ops-panel">
        <h2>Invitations</h2>
        <div class="ops-table-wrap">
            <table class="ops-table">
                <thead><tr><th>Name</th><th>Contact</th><th>Type</th><th>Status</th><th>Code</th></tr></thead>
                <tbody>
                {% for invite in snapshot.invitations %}
                <tr><td>{{ invite.invited_name }}</td><td>{{ invite.invited_contact }}</td><td>{{ invite.invitation_type }}</td><td>{{ invite.status }}</td><td>{{ invite.referral_code }}</td></tr>
                {% else %}
                <tr><td colspan="5">No invitations yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
{% endblock %}