<%= if @items == [] do %>

<.icon name="hero-signal-slash" class="h-8 w-8 text-gray-400 dark:text-gray-500" />

<%= if @search != "" do %> No results for "{@search}" <% else %> {t("No activity yet")} <% end %>

<%= if @search != "" do %> {t("Try adjusting your search terms or clearing the filters.")} <% else %> {t( "Your network operations log is empty. Events will appear here in real time as config changes, alerts, device events, and syncs happen across your organization." )} <% end %>

<% else %> <%!-- Item count summary --%>

Showing {length(@items)} events matching "{@search}" {t("Live")}

<%= for {period, period_items} <- @grouped_items do %> <%!-- Time Period Header --%>

{period} ({length(period_items)})

<%!-- Vertical timeline line --%>

<%= for item <- period_items do %>

<%!-- Timeline dot --%>

<%!-- Content --%>

<.icon name={item.icon} class={[ "h-4 w-4 flex-shrink-0", severity_icon_color(item.severity, item.type) ]} /> {relative_time(item.timestamp, @now)} {type_label(item.type)} <%!-- Device/site link --%> <.link :if={item.device_name && item.link} navigate={item.link} class="inline-flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" > <.icon name="hero-server-stack" class="h-3 w-3" /> {item.device_name} <.icon name="hero-server-stack" class="h-3 w-3" /> {item.device_name}

<%= if item.link do %> <.link navigate={item.link} class="hover:underline"> {item.summary} <% else %> {item.summary} <% end %>

{item.detail}

<.icon name="hero-map-pin" class="h-3 w-3" /> {item.site_name}

<%!-- Link arrow --%>

<.link navigate={item.link} class="text-gray-400 hover:text-blue-500 dark:text-gray-600 dark:hover:text-blue-400" > <.icon name="hero-arrow-right" class="h-4 w-4" />

<% end %>

<% end %> <%!-- Load More --%>

<% end %>