{%- set is_forbidden = FS3V_CODE == 403 -%}
{%- set panel_title = 'Access denied' if is_forbidden else (FS3V_CODE | default('Error')) -%}
{%- set panel_hint = 'Your account does not have permission for this action or path.' if is_forbidden else 'The request could not be completed.' -%}
<div class="mx-auto my-8 max-w-2xl overflow-hidden rounded-2xl border border-red-100 bg-white shadow-[0_18px_48px_rgba(15,23,42,0.08)] ring-1 ring-red-100/70">
  <div class="h-1.5 bg-gradient-to-r from-red-500 via-rose-400 to-orange-300"></div>
  <div class="flex items-start gap-4 px-6 py-6">
    <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl bg-red-50 text-red-600 ring-1 ring-red-100">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
           stroke-width="1.6" stroke="currentColor"
           class="h-5 w-5">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
      </svg>
    </div>
    <div class="min-w-0 flex-1">
      <div class="flex flex-wrap items-center gap-2">
        <span class="inline-flex items-center rounded-full bg-red-50 px-2.5 py-1 text-[11px] font-semibold tracking-[0.12em] text-red-700 ring-1 ring-inset ring-red-100">
          {{ FS3V_CODE | default('ERROR') }}
        </span>
        <span class="text-xs font-medium uppercase tracking-[0.14em] text-gray-400">
          Request blocked
        </span>
      </div>
      <h1 class="mt-3 text-2xl font-semibold tracking-tight text-gray-950">{{ panel_title }}</h1>
      <p class="mt-2 text-sm leading-6 text-gray-600">{{ FS3V_MESSAGE | default('Something went wrong.') }}</p>
      <p class="mt-3 text-xs font-medium tracking-[0.08em] text-gray-400 uppercase">{{ panel_hint }}</p>
    </div>
  </div>
</div>