{% extends "base.html" %}
{% block content %}
{% set network_data = response_data(network) %}
{% set network_error = response_error(network) %}
<div class="w-full max-w-full space-y-6">
  <div>
    <div class="flex items-center gap-2">
      <h1 class="text-lg font-semibold text-slate-100">Network Stats</h1>
      <span class="rounded-full bg-emerald-500/20 px-2 py-0.5 text-[11px] font-medium text-emerald-400">public</span>
      {% if playground_mock_active %}
        <span class="rounded-full bg-amber-500/20 px-2 py-0.5 text-[11px] font-medium text-amber-400">mock</span>
      {% endif %}
    </div>
    <p class="mt-1 text-sm text-slate-500">
      Public endpoint — no API key required. Compare the current transport payload with the Python client configuration side by side.
    </p>
  </div>

  <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div class="space-y-3 rounded-xl border border-slate-800 bg-slate-900 p-5">
      <div class="flex items-start justify-between gap-4">
        <div>
          <h2 class="text-sm font-semibold text-slate-100">Python SDK</h2>
          <code class="text-[11px] text-cyan-500">octa_client.network.info</code>
        </div>
        <a href="/playground/network" class="rounded border border-slate-700 px-2.5 py-1 text-xs text-slate-400 transition-colors hover:border-slate-600 hover:text-slate-200">Refetch</a>
      </div>

      <div class="space-y-1 text-xs text-slate-500">
        <div>status: <span class="text-slate-300">{{ response_status(network) }}</span></div>
        <div>request_id: <span class="font-mono text-slate-300">{{ response_request_id(network) }}</span></div>
      </div>

      {% if network_error %}
        {% set error = network_error %}
        {% include "shared/error_card.html" %}
      {% elif network_data %}
        {% set data = network_data %}
        {% include "shared/json_viewer.html" %}
      {% else %}
        <div class="rounded-lg border border-dashed border-slate-800 bg-slate-950/40 px-4 py-6 text-sm text-slate-500">No network payload available.</div>
      {% endif %}
    </div>

    <div class="space-y-3 rounded-xl border border-slate-800 bg-slate-900 p-5">
      <div class="flex items-start justify-between gap-4">
        <div>
          <h2 class="text-sm font-semibold text-slate-100">Transport</h2>
          <code class="text-[11px] text-violet-400">{{ playground_transport_label }}</code>
        </div>
        <span class="rounded border border-slate-700 px-2 py-0.5 text-[10px] uppercase tracking-wider text-slate-400">{{ transport_stats.mode }}</span>
      </div>

      <div class="space-y-1 text-xs text-slate-500">
        <div>description: <span class="text-slate-300">{{ playground_transport_description }}</span></div>
        <div>timeouts: <span class="text-slate-300">{{ playground_timeout_label }}</span></div>
        <div>keep_alive: <span class="text-slate-300">{{ config.keep_alive }}</span></div>
        <div>max_retries: <span class="text-slate-300">{{ config.max_retries }}</span></div>
      </div>

      {% set data = config_snapshot %}
      {% include "shared/json_viewer.html" %}
    </div>
  </div>

  <div class="rounded-lg border border-slate-800 bg-slate-900/50 p-4">
    <div class="mb-2 text-[11px] font-medium uppercase tracking-wider text-slate-500">Client Configuration</div>
    {% set data = config_snapshot %}
    {% set max_height = "max-h-24" %}
    {% include "shared/json_viewer.html" %}
  </div>
</div>
{% endblock %}