<.header>
{t("Activity Feed")}
<:subtitle> {t("Real-time NOC operations log — config changes, alerts, events, and syncs")} <%!-- Search Bar --%>
<.icon name="hero-magnifying-glass" class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" />
<%!-- Filter Chips with Counts --%>
Filter: <%= for {type, label, icon} <- filter_options() do %> <% end %>
<%!-- Timeline --%>
<%= 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 %> <%!-- Period group header row --%> <%= for item <- period_items do %> <%!-- Severity bar --%> <%!-- Time --%> <%!-- Type --%> <%!-- Event --%> <%!-- Device / Site --%> <%!-- Link arrow --%> <% end %> <% end %>
Time Type Event Device / Site
{period} ({length(period_items)})
<.icon name={item.icon} class={[ "h-3.5 w-3.5 flex-shrink-0", severity_icon_color(item.severity, item.type) ]} /> {relative_time(item.timestamp, @now)}
{type_label(item.type)}

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

{item.detail}

<.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 leading-snug" > <.icon name="hero-server-stack" class="h-3 w-3 flex-shrink-0" /> {item.device_name} <.icon name="hero-server-stack" class="h-3 w-3 flex-shrink-0" /> {item.device_name}
<.icon name="hero-map-pin" class="h-3 w-3 flex-shrink-0" /> {item.site_name}
<.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" />
<%!-- Load More --%>
<% end %>