{% extends "base.html" %}
{% block content %}
{% set nodes_data = response_data(nodes) or [] %}
{% set nodes_error = response_error(nodes) %}
{% set selected_error = response_error(selected_node) %}
{% set selected_node_data = response_data(selected_node) %}
<div class="space-y-6">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h1 class="text-lg font-semibold text-slate-100">Nodes</h1>
      <p class="mt-1 text-sm text-slate-500">
        <code class="text-cyan-400">octa_client.nodes.list</code> + <code class="text-cyan-400">octa_client.nodes.find(id)</code> — click a row to load detail.
      </p>
    </div>
    <div class="flex items-center gap-3">
      {% if playground_mock_active %}
        <span class="rounded bg-amber-500/15 px-2 py-0.5 text-[11px] font-medium text-amber-400">Mock: {{ playground_mock_scenario }}</span>
      {% endif %}
      <a href="/playground/nodes" class="rounded border border-slate-700 px-3 py-1.5 text-xs text-slate-400 transition-colors hover:border-slate-600 hover:text-slate-200">Refetch</a>
    </div>
  </div>

  {% if nodes_error %}
    {% set error = nodes_error %}
    {% include "shared/error_card.html" %}
  {% elif nodes_data %}
    <div class="grid gap-6 {{ 'grid-cols-1 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]' if selected_node_data or selected_error else 'grid-cols-1' }}">
      <div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900">
        <div class="flex items-center justify-between border-b border-slate-800 px-4 py-3">
          <span class="text-xs font-medium text-slate-400">{{ nodes_data|length }} nodes</span>
          {% if selected_node_data or selected_error %}
            <a href="/playground/nodes" class="text-xs text-slate-500 transition-colors hover:text-slate-300">Close detail</a>
          {% endif %}
        </div>

        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="border-b border-slate-800 text-[11px] uppercase tracking-wider text-slate-500">
                <th class="px-3 py-2 text-left font-medium">ID</th>
                <th class="px-3 py-2 text-left font-medium">Location</th>
                <th class="px-3 py-2 text-left font-medium">CPU</th>
                <th class="px-3 py-2 text-left font-medium">GPU</th>
                <th class="px-3 py-2 text-left font-medium">RAM</th>
                <th class="px-3 py-2 text-left font-medium">State</th>
              </tr>
            </thead>
            <tbody>
              {% for node in nodes_data %}
                {% set selected = selected_node_id|string == node.get("id")|string %}
                <tr onclick="window.location='/playground/nodes?selected_id={{ node.get('id') }}'" class="cursor-pointer border-b border-slate-800 text-xs transition-colors hover:bg-slate-800/60 {{ 'bg-slate-800/80' if selected else '' }}">
                  <td class="px-3 py-2.5 font-mono text-slate-300">{{ node.get("id") }}</td>
                  <td class="px-3 py-2.5 text-slate-400">{{ node_location(node) }}</td>
                  <td class="px-3 py-2.5 text-slate-400">{{ node.get("system", {}).get("cpu_cores") or node.get("data", {}).get("cpu_cores") or "—" }} cores</td>
                  <td class="px-3 py-2.5 text-slate-400">{% if node_gpu_count(node) %}{{ node_gpu_count(node) }}× {% endif %}<span class="text-slate-300">{{ node_gpu_model(node) }}</span></td>
                  <td class="px-3 py-2.5 tabular-nums text-slate-400">{{ node_ram_label(node) }}</td>
                  <td class="px-3 py-2.5"><span class="inline-block rounded px-1.5 py-0.5 text-[10px] font-medium {{ 'bg-emerald-500/20 text-emerald-400' if node.get('state') in ['active', 'online'] else 'bg-slate-700 text-slate-400' }}">{{ node.get("state") or "unknown" }}</span></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      {% if selected_error %}
        {% set error = selected_error %}
        {% include "shared/error_card.html" %}
      {% elif selected_node_data %}
        {% set node = selected_node_data %}
        {% set node_id = selected_node_id %}
        {% set close_path = "/playground/nodes" %}
        {% include "shared/node_detail_panel.html" %}
      {% endif %}
    </div>
  {% else %}
    <div class="rounded-xl border border-dashed border-slate-800 bg-slate-900/30 px-6 py-12 text-center text-sm text-slate-500">No nodes found.</div>
  {% endif %}
</div>
{% endblock %}