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

{% block title %}Demo System - 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>Demo System</h1>
            <div class="ops-subtitle">
                Instant demo shops with inventory, branches, cashiers, receipts, transactions, reports, and analytics.
            </div>
        </div>
        <div class="ops-actions">
            <a class="ops-button" href="/experience">Experience Center</a>
            <a class="ops-button" href="/demo/qr?campaign=demo-system">QR Gateway</a>
            <a class="ops-button" href="/demo/agent">Demo AI Agent</a>
        </div>
    </header>

    <section class="ops-panel">
        <h2>Create Demo</h2>
        <form class="ops-form-grid" method="post" action="/demo-system/create">
            <label>Prospect<input name="prospect_name" placeholder="Shop owner name"></label>
            <label>Contact<input name="prospect_contact" placeholder="Phone or email"></label>
            <label>
                Type
                <select name="demo_type">
                    <option value="supermarket">Supermarket</option>
                    <option value="electronics">Electronics</option>
                    <option value="pharmacy">Pharmacy</option>
                    <option value="salon">Salon</option>
                    <option value="restaurant">Restaurant</option>
                    <option value="kiosk">Kiosk</option>
                </select>
            </label>
            <button type="submit">Create Demo</button>
        </form>
    </section>

    <section class="ops-panel">
        <h2>Demos</h2>
        <div class="ops-table-wrap">
            <table class="ops-table">
                <thead>
                <tr>
                    <th>Shop</th>
                    <th>Code</th>
                    <th>Type</th>
                    <th>Expires</th>
                </tr>
                </thead>
                <tbody>
                {% for demo in snapshot.demos %}
                    <tr>
                        <td>{{ demo.shop_name }}</td>
                        <td>{{ demo.demo_code }}</td>
                        <td>{{ demo.demo_type }}</td>
                        <td>{{ demo.expires_at }}</td>
                    </tr>
                {% else %}
                    <tr><td colspan="4">No demos yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
{% endblock %}