{% set node_tab = request.query_params.get("node_tab", "summary") %}
{% set detail_node_id = node.get("id") or node_id %}
<div class="space-y-4 rounded-xl border border-slate-800 bg-slate-900 p-5">
  <div class="flex items-center justify-between gap-4">
    <div class="min-w-0">
      <h2 class="text-sm font-semibold text-slate-100">Node #{{ detail_node_id }}</h2>
      <code class="text-[11px] text-cyan-500">octa_client.nodes.find({{ detail_node_id }})</code>
    </div>
    {% if close_path %}
      <a href="{{ close_path }}" class="text-xs text-slate-500 transition-colors hover:text-slate-300">Close detail</a>
    {% endif %}
  </div>

  <div class="flex gap-1 border-b border-slate-800 pb-0">
    <a href="{{ query_url(request, 'node_tab', 'summary') }}" class="px-3 py-1.5 text-xs transition-colors {{ 'border-b-2 border-cyan-500 text-cyan-400 -mb-px' if node_tab == 'summary' else 'text-slate-500 hover:text-slate-300' }}">Summary</a>
    <a href="{{ query_url(request, 'node_tab', 'raw') }}" class="px-3 py-1.5 text-xs transition-colors {{ 'border-b-2 border-cyan-500 text-cyan-400 -mb-px' if node_tab == 'raw' else 'text-slate-500 hover:text-slate-300' }}">Raw JSON</a>
  </div>

  {% if node_tab == "raw" %}
    {% set data = node %}
    {% include "shared/json_viewer.html" %}
  {% else %}
    <div class="space-y-0.5">
      {% for label, value in node_summary_rows(node) %}
        <div class="flex items-center justify-between gap-4 border-b border-slate-800/60 py-2 text-xs">
          <span class="shrink-0 text-slate-500">{{ label }}</span>
          <span class="min-w-0 break-words text-right font-mono text-slate-300">{{ value }}</span>
        </div>
      {% endfor %}
    </div>
  {% endif %}
</div>