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

{% block title %}Distribution - 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>Distribution</h1>
            <div class="ops-subtitle">
                Installer, reseller, ICT consultant, POS hardware, and M-Pesa ecosystem partner operations.
            </div>
        </div>
    </header>

    <section class="ops-panel">
        <h2>Add Distribution Partner</h2>
        <form class="ops-form-grid" method="post" action="/distribution/partners">
            <label>
                Type
                <select name="partner_type">
                    <option value="installer">Installer</option>
                    <option value="reseller">Reseller</option>
                    <option value="ict_consultant">ICT Consultant</option>
                    <option value="hardware_vendor">Hardware Vendor</option>
                    <option value="mpesa_partner">M-Pesa Partner</option>
                </select>
            </label>
            <label>Name<input name="name"></label>
            <label>Contact<input name="contact"></label>
            <label>Territory<input name="territory"></label>
            <button type="submit">Create</button>
        </form>
    </section>

    <section class="ops-panel">
        <h2>Partners</h2>
        <div class="ops-table-wrap">
            <table class="ops-table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Territory</th>
                    <th>Ecosystem</th>
                    <th>Code</th>
                </tr>
                </thead>
                <tbody>
                {% for partner in snapshot.partners %}
                    <tr>
                        <td>{{ partner.name }}</td>
                        <td>{{ partner.partner_type }}</td>
                        <td>{{ partner.territory }}</td>
                        <td>{{ partner.ecosystem }}</td>
                        <td>{{ partner.partner_code }}</td>
                    </tr>
                {% else %}
                    <tr><td colspan="5">No partners yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
{% endblock %}