{% extends "base.html" %}
{% set page_title = "Gateway" %}
{% block title %}Gateway | Suvra{% endblock %}
{% block content %}
<section class="page-head">
  <div class="page-head-text">
    <h1>Gateway</h1>
    <p class="muted">Provision tenants, reuse starter templates, and roll out the action layer across teams.</p>
  </div>
</section>

<section class="kpi-grid kpi-grid--3">
  <article class="kpi-card">
    <h2>Tenants</h2>
    <div class="kpi-main"><p class="kpi-value">{{ gateway_summary.tenants }}</p></div>
  </article>
  <article class="kpi-card">
    <h2>Templates</h2>
    <div class="kpi-main"><p class="kpi-value">{{ gateway_summary.templates }}</p></div>
  </article>
  <article class="kpi-card">
    <h2>Deployments</h2>
    <div class="kpi-main"><p class="kpi-value">{{ gateway_summary.deployments }}</p></div>
  </article>
</section>

{% if templates %}
<section class="panel">
  <div class="panel-head"><h2>Starter Templates</h2></div>
  <p class="muted" style="padding:0 18px 12px;">Built-in examples — deploy one to a tenant via <code>POST /v2/gateway/deployments</code>.</p>
  <div class="table-wrap">
    <table class="data-table">
      <thead>
        <tr><th>Template</th><th>Category</th><th>Tags</th></tr>
      </thead>
      <tbody>
        {% for t in templates %}
        <tr>
          <td>
            <span class="table-row-title">{{ t.name }}</span>
            <br><span class="muted" style="font-size:0.78rem;">{{ t.description }}</span>
          </td>
          <td><span class="badge">{{ t.category }}</span></td>
          <td>
            {% for tag in t.tags %}
            <span class="badge badge-allow" style="margin-right:4px;">{{ tag }}</span>
            {% endfor %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}

{% if tenants %}
<section class="panel">
  <div class="panel-head">
    <h2>Tenants</h2>
    <span class="badge badge-category" title="Tenant records are in-memory bookkeeping today — no automated cloud provisioning or billing yet.">Preview &mdash; bookkeeping only</span>
  </div>
  <div class="table-wrap">
    <table class="data-table">
      <thead>
        <tr><th>Tenant ID</th><th>Name</th><th>Plan</th><th>Status</th></tr>
      </thead>
      <tbody>
        {% for t in tenants %}
        <tr>
          <td><span class="table-row-title" style="font-family:monospace;font-size:0.8rem;">{{ t.get('tenant_id', t.get('id', '—')) }}</span></td>
          <td>{{ t.get('tenant_name', t.get('name', '—')) }}</td>
          <td><span class="badge badge-allow">{{ t.get('plan', '—') }}</span></td>
          <td><span class="badge status-{{ 'live' if t.get('status', 'active') == 'active' else 'denied' }}">{{ t.get('status', 'active') }}</span></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}

{% if deployments %}
<section class="panel">
  <div class="panel-head">
    <h2>Deployments</h2>
    <span class="badge badge-category" title="Deployment records are in-memory bookkeeping today — no automated cloud provisioning yet.">Preview &mdash; bookkeeping only</span>
  </div>
  <div class="table-wrap">
    <table class="data-table">
      <thead>
        <tr><th>Deployment ID</th><th>Tenant</th><th>Type</th><th>Status</th></tr>
      </thead>
      <tbody>
        {% for d in deployments %}
        <tr>
          <td><span class="table-row-title" style="font-family:monospace;font-size:0.8rem;">{{ d.deployment_id[:8] }}…</span></td>
          <td class="muted">{{ d.tenant_id[:8] if d.tenant_id else '—' }}…</td>
          <td><span class="badge">{{ d.deployment_type }}</span></td>
          <td><span class="badge badge-allow status-live">{{ d.status }}</span></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}

{% if not templates and not tenants and not deployments %}
<div class="empty-state" style="text-align:center;padding:60px 20px;color:var(--color-text-muted);">
  <h3 style="font-size:1.1rem;color:var(--color-text-secondary);">No gateway activity yet</h3>
  <p style="font-size:0.88rem;">Provision tenants via API: <code>POST /v2/gateway/tenants</code></p>
</div>
{% endif %}

{% endblock %}