{% if not debug_events_enabled %}
<div data-webhook-events-received="false">
<div class="min-h-[18rem] bg-zinc-50 border border-dashed border-zinc-300 rounded-2xl flex flex-col items-center justify-center text-center px-6">
    <svg class="w-8 h-8 text-zinc-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M4.93 19h14.14c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.2 16c-.77 1.33.19 3 1.73 3z"/>
    </svg>
    <p class="text-zinc-700 font-semibold">Webhook inbox is disabled</p>
    <p class="text-zinc-500 text-sm mt-1 max-w-md">Enable Django DEBUG or set CREDO_ENABLE_DEBUG_EVENTS=True while testing.</p>
</div>
</div>
{% elif events %}
<div data-webhook-events-received="true">
<div class="space-y-3">
    {% for event in events %}
    <div class="bg-white border border-zinc-200 rounded-2xl p-4 shadow-sm">
        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
            <div>
                <div class="flex items-center gap-2 mb-1">
                    <span class="px-2.5 py-1 rounded-lg text-xs font-bold {% if event.outcome == 'success' %}bg-emerald-100 text-emerald-700{% else %}bg-red-100 text-red-700{% endif %}">
                        {{ event.kind }}
                    </span>
                    <span class="text-xs text-zinc-500">{{ event.received_at|date:"H:i:s" }}</span>
                </div>
                <h3 class="font-semibold text-zinc-900 text-sm">{{ event.title }}</h3>
            </div>
            <span class="px-2.5 py-1 rounded-lg text-xs font-bold uppercase {% if event.outcome == 'success' %}bg-zinc-900 text-white{% else %}bg-zinc-100 text-zinc-700{% endif %}">
                {{ event.outcome }}
            </span>
        </div>

        {% if event.details %}
        <dl class="mt-4 grid sm:grid-cols-2 gap-3">
            {% for key, value in event.details.items %}
                {% if value != None and value != "" %}
                <div class="bg-zinc-50 border border-zinc-100 rounded-xl px-3 py-2">
                    <dt class="text-[10px] uppercase tracking-widest font-bold text-zinc-400">{{ key }}</dt>
                    <dd class="text-sm text-zinc-800 break-all mt-1">{{ value }}</dd>
                </div>
                {% endif %}
            {% endfor %}
        </dl>
        {% endif %}
    </div>
    {% endfor %}
</div>
</div>
{% else %}
<div data-webhook-events-received="false">
<div class="min-h-[18rem] bg-zinc-50 border border-dashed border-zinc-300 rounded-2xl flex flex-col items-center justify-center text-center px-6">
    <svg class="w-8 h-8 text-zinc-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 010 5.656l-1.414 1.414a4 4 0 01-5.657-5.657l1.414-1.414m7.071 0l1.414-1.414a4 4 0 00-5.657-5.657L9.586 4.515m4.242 5.657L9.586 14.414"/>
    </svg>
    <p class="text-zinc-700 font-semibold">No Credo callback or webhook has arrived yet</p>
    <p class="text-zinc-500 text-sm mt-1 max-w-md">This panel only shows real requests that hit the SDK callback/webhook endpoint in this running Django process.</p>
</div>
</div>
{% endif %}