<.link patch={~p"/alerts"} class={[ "px-4 py-2 text-sm font-medium rounded-l-lg", @filter == "active" && "bg-blue-600 text-white dark:bg-blue-500", @filter != "active" && "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800" ]} > Active Alerts <.link patch={~p"/alerts?filter=all"} class={[ "px-4 py-2 text-sm font-medium rounded-r-lg border-l border-gray-200 dark:border-white/10", @filter == "all" && "bg-blue-600 text-white dark:bg-blue-500", @filter != "all" && "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800" ]} > All Alerts

<.icon name="hero-bell-slash" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />

No alerts

<%= if @filter == "active" do %> There are no active alerts for this organization. <% else %> No alerts have been triggered yet. <% end %>

<%= for alert <- @alerts do %>

<%= case alert.alert_type do %> <% :device_down -> %> <.icon name="hero-exclamation-triangle" class="h-4 w-4" /> Device Down <% :device_up -> %> <.icon name="hero-check-circle" class="h-4 w-4" /> Device Recovered <% end %> <%= if alert.resolved_at do %> Resolved <% end %> <%= if alert.acknowledged_at do %> Acknowledged <% end %>

<.link navigate={~p"/devices/#{alert.device.id}"} class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300" > {alert.device.name}

{alert.message}

Triggered: {ToweropsWeb.TimeHelpers.format_iso8601(alert.triggered_at, @timezone)}

<%= if alert.acknowledged_at do %>

Acknowledged: {ToweropsWeb.TimeHelpers.format_iso8601(alert.acknowledged_at, @timezone)} <%= if alert.acknowledged_by do %> by {alert.acknowledged_by.email} <% end %>

<% end %> <%= if alert.resolved_at do %>

Resolved: {ToweropsWeb.TimeHelpers.format_iso8601(alert.resolved_at, @timezone)}

<% end %>

Site: <.link navigate={~p"/sites/#{alert.device.site.id}"} class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300" > {alert.device.site.name}

<%= if alert.alert_type == :device_down && is_nil(alert.acknowledged_at) && is_nil(alert.resolved_at) do %> <.button phx-click="acknowledge" phx-value-id={alert.id} variant="primary"> <.icon name="hero-check" class="h-4 w-4" /> Acknowledge <% end %>

<% end %>