{% extends "base.html" %}
{% block content %}
{% set mr_data = response_data(mr_sessions) or [] %}
{% set render_data = response_data(render_sessions) or [] %}
{% set vpn_data = response_data(vpn_sessions) or [] %}
{% set tabs = [
  {"id": "mr", "label": "Machine Rental", "hook": "octa_client.services.mr.list", "path": "/services/mr", "data": mr_data, "error": response_error(mr_sessions)},
  {"id": "render", "label": "Render", "hook": "octa_client.services.render.list", "path": "/services/render", "data": render_data, "error": response_error(render_sessions)},
  {"id": "vpn", "label": "VPN", "hook": "octa_client.services.vpn.list", "path": "/services/vpn", "data": vpn_data, "error": response_error(vpn_sessions)}
] %}
{% set active = (tabs | selectattr('id', 'equalto', active_tab) | list | first) or tabs[0] %}
<div class="w-full max-w-full space-y-6">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h1 class="text-lg font-semibold text-slate-100">Services</h1>
      <p class="mt-1 text-sm text-slate-500">
        Available resources for each service type. Uses the Python SDK client against the currently selected transport.
      </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/services?tab={{ active_tab }}" 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>

  <div class="rounded-lg border border-amber-800/40 bg-amber-500/5 px-4 py-3 text-xs text-amber-400">
    Start mutations (<code>mr.create</code>, <code>render.create</code>, <code>vpn.create</code>) exist on <code>octa_client.services.*</code> but are intentionally not wired up here — use Diagnostics for manual request inspection.
  </div>

  <div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900">
    <div class="flex gap-1 border-b border-slate-800 px-4 pt-2">
      {% for tab_item in tabs %}
        <a href="/playground/services?tab={{ tab_item.id }}" class="px-4 py-2.5 text-sm transition-colors {{ 'border-b-2 border-cyan-500 text-cyan-400 -mb-px font-medium' if active_tab == tab_item.id else 'text-slate-500 hover:text-slate-300' }}">{{ tab_item.label }}</a>
      {% endfor %}
    </div>

    <div class="space-y-4 px-4 py-4">
      <div class="flex items-center justify-between gap-4">
        <code class="text-[11px] text-violet-400">{{ active.hook }}</code>
        <span class="text-xs text-slate-500">status: <span class="text-slate-300">{{ 'error' if active.error else 'success' }}</span></span>
      </div>

      {% if active.error %}
        {% set error = active.error %}
        {% include "shared/error_card.html" %}
      {% else %}
        <div class="space-y-3">
          <div class="text-xs text-slate-500">{{ active.data|length }} items</div>
          <div class="overflow-hidden rounded-lg border border-slate-800 bg-slate-950/40">
            {% set data = active.data %}
            {% set max_height = "max-h-[32rem]" %}
            {% include "shared/json_viewer.html" %}
          </div>
        </div>
      {% endif %}
    </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">Request Reference</div>
    {% set data = {"method": "GET", "path": active.path, "resource": active.hook, "transport": playground_transport_label} %}
    {% set max_height = "max-h-20" %}
    {% include "shared/json_viewer.html" %}
  </div>
</div>
{% endblock %}