{% set max_height = max_height or "max-h-72" %}
{% set payload = error_payload(error) %}
<div class="space-y-3 rounded-xl border border-rose-900/40 bg-rose-500/5 p-4">
  <div class="flex items-start gap-3">
    <span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-rose-400"></span>
    <div class="min-w-0">
      <div class="text-sm font-medium text-rose-200">{{ payload["class"] }}</div>
      <p class="mt-1 break-words text-xs leading-5 text-rose-200/80">{{ payload["message"] or "Request failed" }}</p>
    </div>
  </div>

  <div class="grid grid-cols-1 gap-2 text-xs sm:grid-cols-3">
    <div class="rounded-lg border border-slate-800 bg-slate-950/70 px-3 py-2">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Status</div>
      <div class="mt-1 font-mono text-slate-200">{{ payload.get("status", "—") }}</div>
    </div>
    <div class="rounded-lg border border-slate-800 bg-slate-950/70 px-3 py-2">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Request ID</div>
      <div class="mt-1 break-all font-mono text-slate-200">{{ payload.get("request_id", "—") }}</div>
    </div>
    <div class="rounded-lg border border-slate-800 bg-slate-950/70 px-3 py-2">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Type</div>
      <div class="mt-1 break-all font-mono text-slate-200">{{ payload["class"] }}</div>
    </div>
  </div>

  {% set data = payload %}
  {% include "shared/json_viewer.html" %}
</div>