{% extends "base.html" %}

{% block title %}API Log — Tink Demo{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-4 py-8">

  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-2xl font-bold text-white">📋 API Request Log</h1>
      <p class="text-slate-400 text-sm mt-1">Alle Tink API-kald i denne session</p>
    </div>
    <div class="flex items-center gap-3">
      <span class="text-slate-400 text-sm">{{ log_count }} kald registreret</span>
      {% if log_count > 0 %}
      <form method="post" action="/demo/log/clear">
        <button type="submit"
          class="text-xs px-3 py-1.5 rounded bg-slate-700 hover:bg-slate-600 text-slate-300 transition">
          Ryd log
        </button>
      </form>
      {% endif %}
      <a href="/demo/step/1"
        class="text-xs px-3 py-1.5 rounded bg-violet-600 hover:bg-violet-500 text-white transition">
        ← Tilbage til demo
      </a>
    </div>
  </div>

  {% if log_count == 0 %}
  <div class="rounded-xl border border-slate-700 bg-slate-800/50 p-12 text-center">
    <div class="text-4xl mb-4">📭</div>
    <p class="text-slate-400">Ingen API-kald endnu.</p>
    <p class="text-slate-500 text-sm mt-1">Gå igennem demo-steppene for at se kaldene her.</p>
    <a href="/demo/step/1" class="inline-block mt-4 px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 text-white text-sm transition">
      Start fra Step 1
    </a>
  </div>
  {% else %}

  <div class="space-y-3">
    {% for entry in log %}
    <div class="rounded-xl border {% if entry.ok %}border-emerald-700/40 bg-emerald-900/10{% else %}border-red-700/40 bg-red-900/10{% endif %} overflow-hidden">

      {# Header row #}
      <button onclick="this.nextElementSibling.classList.toggle('hidden')"
        class="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-white/5 transition">

        {# Method badge #}
        <span class="text-xs font-mono font-bold px-2 py-0.5 rounded
          {% if entry.method == 'GET' %}bg-blue-500/20 text-blue-300 border border-blue-500/30
          {% else %}bg-violet-500/20 text-violet-300 border border-violet-500/30{% endif %}">
          {{ entry.method }}
        </span>

        {# Status badge #}
        <span class="text-xs font-mono px-2 py-0.5 rounded
          {% if entry.ok %}bg-emerald-500/20 text-emerald-300 border border-emerald-500/30
          {% else %}bg-red-500/20 text-red-300 border border-red-500/30{% endif %}">
          {{ entry.status }}
        </span>

        {# URL — strip domain for cleanliness #}
        <span class="font-mono text-sm text-slate-200 flex-1 truncate">
          {{ entry.url | replace("https://api.tink.com", "") }}
        </span>

        {# Time + duration #}
        <span class="text-xs text-slate-500 font-mono">{{ entry.ts }}</span>
        <span class="text-xs text-slate-500 font-mono">{{ entry.duration_ms }}ms</span>

        <svg class="w-4 h-4 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      {# Collapsible body — hidden by default #}
      <div class="hidden border-t {% if entry.ok %}border-emerald-700/20{% else %}border-red-700/20{% endif %} px-4 py-3 grid grid-cols-1 md:grid-cols-2 gap-4">

        {% if entry.req_body %}
        <div>
          <div class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Request</div>
          <pre class="text-xs font-mono text-slate-300 bg-slate-900/60 rounded p-3 overflow-auto max-h-48 whitespace-pre-wrap">{{ entry.req_body | tojson(indent=2) }}</pre>
        </div>
        {% endif %}

        <div {% if not entry.req_body %}class="md:col-span-2"{% endif %}>
          <div class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">Response</div>
          <pre class="text-xs font-mono text-slate-300 bg-slate-900/60 rounded p-3 overflow-auto max-h-48 whitespace-pre-wrap">{{ entry.resp_body | tojson(indent=2) }}</pre>
        </div>

      </div>
    </div>
    {% endfor %}
  </div>

  {% endif %}
</div>
{% endblock %}