<.header> {t("Network Map")} {t("Experimental")} <:subtitle>{t("Visual topology of your network infrastructure")} <:actions>
Live
<%= if @loading do %>
<.icon name="hero-arrow-path" class="h-12 w-12 text-gray-400 animate-spin mx-auto" />

Loading network topology...

<% else %>
<.icon name="hero-server" class="h-6 w-6 text-gray-400" />
{t("Total Devices")}
{@topology.stats.total_devices}
<.icon name="hero-check-circle" class="h-6 w-6 text-green-400" />
{t("Added Devices")}
{@topology.stats.added_devices}
<.icon name="hero-magnifying-glass" class="h-6 w-6 text-blue-400" />
{t("Discovered")}
{@topology.stats.discovered_devices}
<.icon name="hero-link" class="h-6 w-6 text-purple-400" />
{t("Connections")}
{@topology.stats.total_links}

{t("Topology Visualization")}

{t("Click and drag to pan, scroll to zoom, click nodes for details")}

Last updated: <.timestamp datetime={@topology.last_updated} timezone={@timezone} />
<%= if @selected_node_detail do %>

{t("Node Details")}

{@selected_node_detail.name}

<%= if @selected_node_detail.type == :discovered do %> {t("Discovered")} <% end %>
<%= if @selected_node_detail.ip_address do %>
<.icon name="hero-globe-alt" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" /> {@selected_node_detail.ip_address}
<% end %> <%= if @selected_node_detail.site_name do %>
<.icon name="hero-map-pin" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" /> {@selected_node_detail.site_name}
<% end %> <%= if @selected_node_detail.manufacturer do %>
<.icon name="hero-building-office" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" /> {@selected_node_detail.manufacturer}
<% end %>
<.icon name="hero-tag" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" /> {@selected_node_detail.role}
<%= if @selected_node_detail.status && @selected_node_detail.status != :unknown do %>
{@selected_node_detail.status}
<% end %>
<%= if length(@selected_node_detail.connections) > 0 do %>

{t("Connections")} ({length(@selected_node_detail.connections)})

<%= for conn <- @selected_node_detail.connections do %>

{conn.device_name}

<%= if conn.interface do %>

{conn.interface}

<% end %>
{conn.link_type} 0.9 -> "text-green-600 dark:text-green-400" conn.confidence >= 0.5 -> "text-yellow-600 dark:text-yellow-400" true -> "text-gray-500 dark:text-gray-400" end ]}> {trunc(conn.confidence * 100)}%
<% end %>
<% end %> <%= if @selected_node_detail.type == :managed do %>
<.link navigate={~p"/devices/#{@selected_node_detail.id}"} class="flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-400/10 rounded-md hover:bg-blue-100 dark:hover:bg-blue-400/20" > <.icon name="hero-arrow-top-right-on-square" class="h-4 w-4 mr-1.5" /> {t("View Device")}
<% end %>
<% end %>
<%!-- Device roles --%>
Roles:
Router
Switch
Wireless
Firewall
Server
Unknown
Discovered
<%!-- Link confidence --%>
Links:
High confidence
Medium confidence
Low confidence
<%= if @topology.stats.total_devices == 0 do %>
<.icon name="hero-map" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />

{t("No network topology available")}

{t("Add devices with SNMP enabled to start building your network map.")}

{t("The topology is automatically discovered via LLDP and CDP protocols.")}

<.button navigate={~p"/devices/new"} variant="primary"> <.icon name="hero-plus" class="h-5 w-5" /> Add Your First Device
<% end %> <% end %>