{% extends "base.html" %}

{% block title %}Topics - Agent Bus{% endblock %}

{% block header_nav %}
<span class="text-xs opacity-60">TOPICS</span>
{% endblock %}

{% block status_left %}
<span class="opacity-60">{{ topics|length }} topic{% if topics|length != 1 %}s{% endif %}</span>
{% endblock %}

{% block content %}
<div class="p-6">
    {% if topics %}
    <div class="max-w-xl space-y-3">
        <div class="text-sm font-semibold">Select a topic</div>
        <div class="text-xs opacity-70">
            Choose a topic from the sidebar to view messages.
        </div>
        <div class="text-xs opacity-60">
            Tip: press <kbd class="kbd kbd-xs">⌘</kbd> <kbd class="kbd kbd-xs">K</kbd> to search topics.
        </div>
    </div>
    {% else %}
    <div class="flex flex-col items-center justify-center h-64 opacity-50">
        <svg class="w-12 h-12 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
        </svg>
        <span class="text-sm">No topics yet</span>
        <span class="text-xs mt-1">Topics will appear when agents start communicating</span>
    </div>
    {% endif %}
</div>
{% endblock %}