1<button
 2    type="button"
 3    class="inline-flex items-center cursor-pointer text-xs rounded-full px-2.5 py-px bg-white/20 text-white/80 whitespace-nowrap hover:bg-white/30"
 4    data-toolbar-tab="Observer">
 5    {% if observer.is_persisting() %}
 6        <span class="relative inline-flex size-2 mr-2.5">
 7            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
 8            <span class="relative inline-flex size-2 rounded-full bg-red-500"></span>
 9        </span>
10    {% elif observer.is_summarizing() %}
11        <span class="relative inline-flex size-2 mr-2">
12            <span class="relative inline-flex size-2 rounded-full bg-zinc-500"></span>
13        </span>
14    {% elif not observer.is_enabled() %}
15        <span class="rounded-full bg-zinc-500 w-2 h-2 inline-block mr-2"></span>
16    {% endif %}
17
18    {% if observer.get_current_trace_summary() %}
19        {{ observer.get_current_trace_summary() }}
20    {% elif observer.is_persisting() %}
21        Recording (no summary)
22    {% elif observer.is_summarizing() %}
23        No summary
24    {% elif observer.is_enabled() %}
25        Observing
26    {% else %}
27        Observer disabled
28    {% endif %}
29</button>