{% set _reason = result.reason.value %}

{# ── Reason metadata ──────────────────────────────────────────────── #}
{% if _reason == 'RULE_MATCH' %}
  {% set _badge = 'bg-indigo-50 text-indigo-700 ring-indigo-600/20' %}
  {% set _label = 'Rule matched' %}
  {% set _icon_colour = 'text-indigo-500' %}
{% elif _reason == 'TARGET_MATCH' %}
  {% set _badge = 'bg-green-50 text-green-700 ring-green-600/20' %}
  {% set _label = 'Individual target' %}
  {% set _icon_colour = 'text-green-500' %}
{% elif _reason == 'FALLTHROUGH' %}
  {% set _badge = 'bg-blue-50 text-blue-700 ring-blue-600/20' %}
  {% set _label = 'Default rule (fallthrough)' %}
  {% set _icon_colour = 'text-blue-500' %}
{% elif _reason == 'OFF' %}
  {% set _badge = 'bg-slate-100 text-slate-600 ring-slate-400/20' %}
  {% set _label = 'Flag disabled' %}
  {% set _icon_colour = 'text-slate-400' %}
{% elif _reason == 'PREREQUISITE_FAIL' %}
  {% set _badge = 'bg-orange-50 text-orange-700 ring-orange-600/20' %}
  {% set _label = 'Prerequisite failed' %}
  {% set _icon_colour = 'text-orange-500' %}
{% elif _reason == 'ERROR' %}
  {% set _badge = 'bg-red-50 text-red-700 ring-red-600/20' %}
  {% set _label = 'Evaluation error' %}
  {% set _icon_colour = 'text-red-500' %}
{% else %}
  {% set _badge = 'bg-slate-100 text-slate-600 ring-slate-400/20' %}
  {% set _label = _reason %}
  {% set _icon_colour = 'text-slate-400' %}
{% endif %}

{% set _is_error = result.error_message or _reason in ['ERROR', 'PREREQUISITE_FAIL'] %}
{% set _panel_border = 'border-red-200 bg-red-50' if _is_error else 'border-slate-200 bg-slate-50' %}

<div class="mt-5 border-t border-slate-100 pt-5 space-y-4">

    {# ── Header row ──────────────────────────────────────────────────── #}
    <div class="flex items-center justify-between gap-2">
        <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Evaluation Result</span>
        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ring-1 ring-inset {{ _badge }}">
            {{ _label }}
        </span>
    </div>

    {# ── Main result card ─────────────────────────────────────────────── #}
    <div class="rounded-xl border {{ _panel_border }} p-4">
        <dl class="space-y-3">

            {# Value #}
            <div class="flex items-start justify-between gap-4">
                <dt class="text-xs font-medium text-slate-500 shrink-0 pt-0.5">Value</dt>
                <dd class="text-sm font-mono font-bold text-slate-900 text-right break-all">{{ value_json }}</dd>
            </div>

            {# Variation #}
            {% if result.variation %}
            <div class="flex items-center justify-between gap-4">
                <dt class="text-xs font-medium text-slate-500 shrink-0">Variation</dt>
                <dd>
                    <code class="text-xs font-mono bg-white border border-slate-200 text-slate-700 px-2 py-0.5 rounded-md">{{ result.variation }}</code>
                </dd>
            </div>
            {% endif %}

            {# Reason #}
            <div class="flex items-center justify-between gap-4">
                <dt class="text-xs font-medium text-slate-500 shrink-0">Reason</dt>
                <dd class="text-xs font-mono text-slate-700">{{ _reason }}</dd>
            </div>

            {# Rule (RULE_MATCH) #}
            {% if result.rule_id %}
            <div class="flex items-start justify-between gap-4">
                <dt class="text-xs font-medium text-slate-500 shrink-0 pt-0.5">Matched rule</dt>
                <dd class="text-right">
                    {% if rule_description %}
                    <span class="block text-xs font-medium text-indigo-700">{{ rule_description }}</span>
                    {% endif %}
                    <code class="text-xs font-mono text-slate-400">{{ result.rule_id }}</code>
                </dd>
            </div>
            {% endif %}

            {# Prerequisite failed #}
            {% if result.prerequisite_key %}
            <div class="flex items-center justify-between gap-4">
                <dt class="text-xs font-medium text-slate-500 shrink-0">Failed prerequisite</dt>
                <dd>
                    <code class="text-xs font-mono bg-orange-50 border border-orange-100 text-orange-700 px-2 py-0.5 rounded-md">{{ result.prerequisite_key }}</code>
                </dd>
            </div>
            {% endif %}

            {# Error message #}
            {% if result.error_message %}
            <div class="flex items-start justify-between gap-4">
                <dt class="text-xs font-medium text-slate-500 shrink-0 pt-0.5">Error</dt>
                <dd class="text-xs text-red-700 text-right break-words">{{ result.error_message }}</dd>
            </div>
            {% endif %}

        </dl>
    </div>

    {# ── Context summary ──────────────────────────────────────────────── #}
    <div class="rounded-lg border border-slate-200 bg-white p-3">
        <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">Context evaluated</p>
        <dl class="space-y-1.5">
            <div class="flex items-center gap-2">
                <dt class="text-xs text-slate-400 w-16 shrink-0">key</dt>
                <dd><code class="text-xs font-mono text-slate-700 bg-slate-100 px-1.5 py-0.5 rounded">{{ ctx_key }}</code></dd>
            </div>
            <div class="flex items-center gap-2">
                <dt class="text-xs text-slate-400 w-16 shrink-0">kind</dt>
                <dd><code class="text-xs font-mono text-slate-700 bg-slate-100 px-1.5 py-0.5 rounded">{{ ctx_kind }}</code></dd>
            </div>
            {% for attr_k, attr_v in ctx_attributes.items() %}
            <div class="flex items-center gap-2">
                <dt class="text-xs text-slate-400 w-16 shrink-0">{{ attr_k }}</dt>
                <dd><code class="text-xs font-mono text-slate-700 bg-slate-100 px-1.5 py-0.5 rounded">{{ attr_v }}</code></dd>
            </div>
            {% endfor %}
        </dl>
    </div>

    {# ── Evaluate again link ───────────────────────────────────────────── #}
    <div class="flex justify-end">
        <button type="button"
                onclick="document.getElementById('eval-result').innerHTML=''"
                class="text-xs text-slate-400 hover:text-slate-600 transition-colors">
            ← Evaluate again
        </button>
    </div>

</div>