<.breadcrumb items={[ %{label: "Dashboard", navigate: ~p"/dashboard"}, %{label: "Sites", navigate: ~p"/sites"}, %{label: @site.name} ]} />

{@site.name}

<.icon name="hero-map-pin" class="h-4 w-4 inline" /> {@site.location} <%= if @site.latitude && @site.longitude do %> ({Float.round(@site.latitude, 4)}, {Float.round(@site.longitude, 4)}) <% end %>

<%= if @site.latitude && @site.longitude do %>
<% end %> <%= if @device != [] do %>
<.button type="button" phx-click="force_rediscover_all" class="btn-sm" data-confirm={ t("This will trigger SNMP discovery for all devices at this site. Continue?") } > <.icon name="hero-magnifying-glass" class="h-4 w-4" /> {t("Force Rediscover All")}
<% end %> <%!-- Quick Actions --%>
<.button navigate={~p"/devices/new?site_id=#{@site.id}"} variant="primary" class="btn-sm"> <.icon name="hero-plus" class="h-4 w-4" /> {t("Add Device")} <%= if @site.latitude && @site.longitude do %> <.button navigate={~p"/sites-map?lat=#{@site.latitude}&lng=#{@site.longitude}&zoom=15"} class="btn-sm" > <.icon name="hero-map" class="h-4 w-4" /> {t("View on Map")} <% end %> <.button navigate={~p"/sites/#{@site.id}/edit"} class="btn-sm"> <.icon name="hero-pencil" class="h-4 w-4" /> {t("Edit Site")}
<%!-- Summary Stat Cards --%>
<%!-- Subscribers --%>
<.icon name="hero-users" class="h-4 w-4" /> {t("Subscribers")}

{format_number(@site_summary.subscribers || 0)}

<%!-- Financial data: role-gated --%> <%= if @can_view_financials do %> <%!-- MRR --%>
<.icon name="hero-currency-dollar" class="h-4 w-4" /> {t("Monthly Revenue")}

{format_mrr(@site_summary.mrr)}

<% end %> <%!-- Device Count --%>
<.icon name="hero-server" class="h-4 w-4" /> {t("Devices")}

{format_number(@site_summary.device_count)} <%= if @site_summary.devices_down > 0 do %> ({@site_summary.devices_down} {t("down")}) <% end %>

<%!-- Active Alerts --%>
0, do: "border-red-200 dark:border-red-900/50", else: "border-gray-200 dark:border-white/10" ) ]}>
<.icon name="hero-bell-alert" class="h-4 w-4" /> {t("Active Alerts")}

0, do: "text-red-600 dark:text-red-400", else: "text-gray-900 dark:text-white" ) ]}> {length(@active_alerts)}

<%!-- Backhaul Capacity Card --%> <%= if @capacity_summary.interfaces != [] do %>

<.icon name="hero-signal" class="h-4 w-4 inline mr-1" />{t("Backhaul Capacity")}

{format_capacity(@capacity_summary.total_capacity_bps)} {t("total")}
{Float.round(@capacity_summary.utilization_pct, 1)}%
{t("Throughput")}

{format_capacity(@capacity_summary.total_throughput_bps)}

{t("Headroom")}

{format_capacity( max( 0, @capacity_summary.total_capacity_bps - @capacity_summary.total_throughput_bps ) )}

{t("Interfaces")}

{length(@capacity_summary.interfaces)}

<% end %> <%!-- QoE Summary Card --%> <%= if @qoe_summary do %>

{t("Preseem QoE Score")}

{if @qoe_summary[:score], do: Float.round(@qoe_summary[:score] / 1, 1), else: "—"}

<%= if @qoe_summary[:capacity_score] do %>

Capacity

{@qoe_summary[:capacity_score]}%

<% end %>
<% end %> <%!-- Subscriber Impact Breakdown by Device --%> <%= if @site_impact && @site_impact.subscriber_count > 0 do %>

<.icon name="hero-users" class="h-4 w-4" /> {t("Subscriber Impact")}

{format_number(@site_impact.subscriber_count)} subscribers <%= if @can_view_financials && @site_impact.mrr do %> {format_mrr(@site_impact.mrr)}/mo <% end %>
<%= if @site_impact.devices != [] do %>
<%= if @can_view_financials do %> <% end %> <%= for dev <- @site_impact.devices do %> <%= if @can_view_financials do %> <% end %> <% end %>
{t("Device")} {t("Subscribers")}{t("MRR")}
{dev.name || dev.device_id} {dev.count} {format_mrr(dev.mrr)}
<% end %>
<% end %>
<%!-- Left Column --%>
<%!-- Site Details --%>

{t("Site Details")}

<%= if @site.parent_site do %>
Parent Site
<.link navigate={~p"/sites/#{@site.parent_site.id}"} class="link link-primary text-sm" > {@site.parent_site.name}
<% end %> <%= if @site.location do %>
Location
{@site.location}
<% end %> <%= if @site.description do %>
Description
{@site.description}
<% end %>
<%= if @site.child_sites != [] do %>

{t("Child Sites")}

  • <.link navigate={~p"/sites/#{child.id}"} class="link link-primary text-sm"> {child.name}
<% end %>
<%!-- Active Alerts Panel --%>

<.icon name="hero-bell-alert" class="h-5 w-5" /> Active Alerts <%= if @active_alerts != [] do %> {length(@active_alerts)} <% end %>

<%= if @active_alerts == [] do %>
<.icon name="hero-check-circle" class="mx-auto h-8 w-8 text-green-500" />

No active alerts

<% else %>
<.icon name={insight_urgency_icon(alert_severity(alert.alert_type))} class={[ "h-5 w-5 mt-0.5 shrink-0", insight_urgency_class(alert_severity(alert.alert_type)) ]} />

{alert.message}

{time_ago(alert.triggered_at)}

<% end %>
<%!-- Recent Config Changes Panel — hidden, feature temporarily disabled --%>
<%!-- Right Column --%>
<%!-- Device Health Grid --%>

<.icon name="hero-server" class="h-5 w-5" /> Device Health

<.button navigate={~p"/devices/new?site_id=#{@site.id}"} variant="primary" class="btn-sm" > <.icon name="hero-plus" class="h-4 w-4" /> Add
<%= if @device == [] do %>
<.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />

{t("Add your first device")}

{t("Start monitoring by adding network devices to this site.")}

<.button navigate={~p"/devices/new?site_id=#{@site.id}"} variant="primary"> <.icon name="hero-plus" class="h-5 w-5" /> Add Device
<% else %>
<%= if @can_view_financials do %> <% end %> <%= if @can_view_financials do %> <% end %>
{t("Device")} {t("Latency")}
{eq.name}
"text-gray-400" ms when ms < 50 -> "text-green-600 dark:text-green-400" ms when ms < 200 -> "text-yellow-600 dark:text-yellow-400" _ -> "text-red-600 dark:text-red-400" end ]}> {format_response_time(@response_times[eq.id])}
<% end %>
<%!-- Insights Panel --%> <%= if @insights != [] do %>

<.icon name="hero-light-bulb" class="h-5 w-5" /> Preseem Insights

<.icon name={insight_urgency_icon(insight.urgency)} class={["h-5 w-5 mt-0.5 shrink-0", insight_urgency_class(insight.urgency)]} />

{insight.title}

<%= if insight.description do %>

{insight.description}

<% end %>
<% end %>
<%!-- Latency Chart --%> <%= if @latency_chart_data do %>

<.icon name="hero-chart-bar" class="h-4 w-4" /> {t("Site Latency — Last 24 Hours")}

{t("Loading chart...")}
<% end %>