{% extends "base.html" %}
{% block content %}
{% set profile_data = response_data(profile) %}
{% set balance_data = response_data(balance) %}
{% set profile_error = response_error(profile) %}
{% set balance_error = response_error(balance) %}
{% set profile_hash = profile_data or {} %}
{% set balance_hash = balance_data or {} %}
{% set balance_value = balance_hash.get("balance") or balance_hash.get("amount") or ((balance_hash.values()|list)[0] if balance_hash else None) %}
{% set profile_formatted %}
  <div class="space-y-0.5">
    <div class="flex items-center justify-between gap-4 border-b border-slate-800/60 py-2 text-xs">
      <span class="text-slate-500">Account UUID</span>
      <span class="min-w-0 break-all text-right font-mono text-slate-300">{{ profile_hash.get("account_uuid") or profile_hash.get("account", {}).get("uuid") or "—" }}</span>
    </div>
    <div class="flex items-center justify-between gap-4 border-b border-slate-800/60 py-2 text-xs">
      <span class="text-slate-500">Email</span>
      <span class="min-w-0 break-all text-right font-mono text-slate-300">{{ profile_hash.get("email") or profile_hash.get("account", {}).get("email") or "—" }}</span>
    </div>
    <div class="flex items-center justify-between gap-4 border-b border-slate-800/60 py-2 text-xs">
      <span class="text-slate-500">Avatar</span>
      <span class="min-w-0 break-all text-right font-mono text-slate-300">{{ profile_hash.get("avatar") or "—" }}</span>
    </div>
  </div>
{% endset %}
{% set balance_formatted %}
  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
    <div class="rounded-lg border border-slate-800 bg-slate-950/70 p-4">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Balance</div>
      <div class="mt-2 break-all text-base font-semibold text-slate-100">{{ balance_value or "—" }}</div>
    </div>
    <div class="rounded-lg border border-slate-800 bg-slate-950/70 p-4">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Currency</div>
      <div class="mt-2 break-all text-base font-semibold text-slate-100">{{ balance_hash.get("currency") or balance_hash.get("unit") or "OCTA" }}</div>
    </div>
  </div>
{% endset %}

<div class="w-full max-w-full space-y-6">
  <div>
    <h1 class="text-lg font-semibold text-slate-100">Account</h1>
    <p class="mt-1 text-sm text-slate-500">
      Direct account view for the Python playground. The Dashboard uses the same panels in a condensed layout.
    </p>
  </div>

  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    {% set title = "Profile" %}
    {% set hook = "octa_client.accounts.profile" %}
    {% set data = profile_data %}
    {% set error = profile_error %}
    {% set locked = not playground_api_key_present %}
    {% set tab_param = "profile_tab" %}
    {% set current_tab = request.query_params.get("profile_tab", "formatted") %}
    {% set empty_copy = "No data available." %}
    {% set locked_copy = "Enter an API key in the sidebar to load this resource" %}
    {% set badge = none %}
    {% set formatted = profile_formatted %}
    {% include "shared/resource_panel.html" %}

    {% set title = "Balance" %}
    {% set hook = "octa_client.accounts.balance" %}
    {% set data = balance_data %}
    {% set error = balance_error %}
    {% set locked = not playground_api_key_present %}
    {% set tab_param = "balance_tab" %}
    {% set current_tab = request.query_params.get("balance_tab", "formatted") %}
    {% set empty_copy = "No data available." %}
    {% set locked_copy = "Enter an API key in the sidebar to load this resource" %}
    {% set badge = none %}
    {% set formatted = balance_formatted %}
    {% include "shared/resource_panel.html" %}
  </div>
</div>
{% endblock %}