<%!-- Header: title + actions, then tabs below on mobile --%>

{@page_title}

<% percent = if @device_quota.limit != :unlimited and @device_quota.limit > 0 do (@device_quota.current / @device_quota.limit * 100) |> trunc() else 0 end %> <% badge_class = cond do @current_scope.user.is_superuser -> "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400" @device_quota.limit != :unlimited and @device_quota.current >= @device_quota.limit -> "bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400" percent >= 90 -> "bg-orange-50 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400" @device_quota.limit == :unlimited -> "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400" true -> "bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400" end %> <%= cond do %> <% @current_scope.user.is_superuser -> %> {@device_quota.current} <% @device_quota.limit == :unlimited -> %> {@device_quota.current} <% true -> %> {@device_quota.current}/{@device_quota.limit} <% end %>
<%= if @has_devices do %> <%= if @reorder_mode do %> <.button id="reset-order" type="button" phx-click="reset_order" data-confirm={t("Reset all sites and devices to alphabetical order?")} > <.icon name="hero-arrow-path" class="h-4 w-4" /> <.button type="button" phx-click="toggle_reorder_mode" variant="primary"> <.icon name="hero-check" class="h-4 w-4" /> <% else %> <.button id="toggle-reorder-mode" type="button" phx-click="toggle_reorder_mode" title="Reorder devices and sites" > <.icon name="hero-bars-arrow-up" class="h-4 w-4" /> <% end %> <% end %> <.button :if={!@sites_enabled || @has_sites} navigate={~p"/devices/new"} variant="primary"> <.icon name="hero-plus" class="h-4 w-4" /> {t("New")} <%= if @has_devices and not @reorder_mode do %> <.button id="force-rediscover-all" type="button" phx-click="force_rediscover_all" title="Rediscover all devices" data-confirm={ t("This will trigger SNMP discovery for all SNMP-enabled devices. Continue?") } > <.icon name="hero-magnifying-glass" class="h-4 w-4" /> <% end %>
<%!-- Tabs on second line --%>
<%= case @active_tab do %> <% "existing" -> %> <%= if @sites_enabled && !@has_sites && @has_devices do %>
<.icon name="hero-information-circle" class="h-5 w-5 text-blue-400 flex-shrink-0" />

{t("Organize your devices with sites")} โ€” <.link navigate={~p"/sites/new"} class="font-medium underline"> {t("Create a site")}

<% end %> <%= if !@has_devices do %>
<.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500 dark:text-gray-400" />

{t("No devices")}

{t("Get started by adding your first device.")}

<.button navigate={~p"/devices/new"} variant="primary"> <.icon name="hero-plus" class="h-5 w-5" /> {t("New Device")}
<% else %> <%!-- Sticky Status Bar + Search --%>
<%!-- Search --%>
<.icon name="hero-magnifying-glass" class="absolute left-2.5 top-2 h-4 w-4 text-gray-400" />
<%!-- Status summary + filter buttons --%>
{@total_devices}
<%!-- Device Table --%>
<%= for row <- @device_rows do %> <%= if row.type == :site_header do %> <% else %> <% end %> <% end %>
Drag {t("Device")} {t("Status")}
<%= if row.site do %> <.link navigate={~p"/sites/#{row.site.id}"} class="font-semibold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400" > {row.site.name} <% else %> {if @sites_enabled, do: "Unassigned", else: "All Devices"} <% end %> ยท {row.stats.total} 0} class="text-green-600 dark:text-green-400" > {row.stats.up} 0} class="text-red-600 dark:text-red-400 font-medium" > {row.stats.down} <%= if row.site && @site_subscribers[row.site.id] do %> <.icon name="hero-users" class="inline h-3 w-3" /> {@site_subscribers[row.site.id].account_count} <% end %>
<.icon name="hero-map-pin" class="inline h-3 w-3" /> {row.site.location}
<.link navigate={~p"/devices/#{row.device.id}"} class={[ "flex items-center gap-2 pr-3 text-inherit no-underline", @reorder_mode && "pl-2", !@reorder_mode && "pl-4 sm:pl-3", "py-2" ]} > {row.device.name} <.link navigate={~p"/devices/#{row.device.id}"} class={[ "block px-3 text-inherit no-underline", "py-2" ]} > {row.device.status |> to_string() |> String.upcase()}
<% end %> <% "discovered" -> %> <%= if @discovered_devices == [] do %>
<.icon name="hero-magnifying-glass" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500 dark:text-gray-400" />

{t("No discovered devices")}

{t("Devices will appear here as they are discovered via LLDP/CDP.")}

<% else %>
Showing {(@pagination.page - 1) * @pagination.per_page + 1}-{min( @pagination.page * @pagination.per_page, @pagination.total_count )} of {@pagination.total_count} discovered devices
<.table id="discovered-devices" rows={@discovered_devices}> <:col :let={discovered} label={t("Identifier")}> <%= case discovered.identifier.type do %> <% :mac -> %>
MAC {discovered.identifier.value}
<% :ip -> %>
IP {discovered.identifier.value}
<% :hostname -> %>
HOST {discovered.identifier.value}
<% _ -> %> Unknown <% end %> <:col :let={discovered} label={t("Hostname")}> <%= if discovered.hostname do %> {discovered.hostname} <% else %> - <% end %> <:col :let={discovered} label={t("Type")}>
<.icon name="hero-server" class="h-4 w-4 text-gray-500 dark:text-gray-400" /> {device_type_label(discovered.device_type)}
<:col :let={discovered} label={t("Manufacturer")}> <%= if discovered.manufacturer do %> {discovered.manufacturer} <% else %> - <% end %> <:col :let={discovered} label={t("Discovered By")}>
<%= if length(discovered.discovered_by) == 1 do %> <% [first] = discovered.discovered_by %> <.link navigate={~p"/devices/#{first.device_id}"} class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300" > {first.device_name} ({first.interface}) <% else %> {length(discovered.discovered_by)} devices <% end %>
<:col :let={discovered} label={t("Last Seen")}> <.timestamp datetime={discovered.last_seen} class="text-sm text-gray-600 dark:text-gray-400" /> <:col :let={discovered} label={t("Actions")}> <.button phx-click="add_discovered_device" phx-value-identifier={Jason.encode!(discovered.identifier)} variant="primary" > <.icon name="hero-plus" class="h-3 w-3" /> Add <%= if @pagination.total_pages > 1 do %>
<.link :if={@pagination.page > 1} patch={~p"/devices?tab=discovered&page=#{@pagination.page - 1}"} class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" > {t("Previous")} <.link :if={@pagination.page < @pagination.total_pages} patch={~p"/devices?tab=discovered&page=#{@pagination.page + 1}"} class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700" > {t("Next")}
<% end %> <% end %> <% end %>