{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Events{% endblock %}
{% block page_title %}Events{% endblock %}
{% block page_subtitle %}Asynchronous scoped event bus (Layer 14){% endblock %}
{% block layer_indicator %}L14 Events{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <div>
    <span class="text-sm text-slate-500">{{ events|length }} recent event{{ events|length|pluralize }}</span>
  </div>
  <div class="flex items-center gap-2">
    <span class="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-50 text-blue-700 text-xs font-medium ring-1 ring-blue-600/20">
      {{ subscription_count }} active subscription{{ subscription_count|pluralize }}
    </span>
  </div>
</div>

{% if events %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Event Type</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Target</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Actor</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Scope</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Timestamp</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for event in events %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">{% include "components/_state_badge.html" with state=event.event_type %}</td>
        <td class="px-4 py-3">
          {% if event.target_type %}
          <span class="text-sm text-slate-700">{{ event.target_type }}</span>
          {% if event.target_id %}<span class="text-xs text-slate-400 font-mono">:{{ event.target_id|truncate_id }}</span>{% endif %}
          {% else %}
          <span class="text-xs text-slate-400">—</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ event.actor_id|truncate_id }}</td>
        <td class="px-4 py-3">
          {% if event.scope_id %}
          <span class="text-xs font-mono text-slate-400">{{ event.scope_id|truncate_id }}</span>
          {% else %}
          <span class="text-xs text-slate-300">Global</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ event.timestamp|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{% include "components/_empty_state.html" with title="No events emitted" message="Events are emitted as actions occur throughout the system. Activity will appear here automatically." %}
{% endif %}
{% endblock %}