towerops/lib/towerops_web/live/site_live/show.html.heex

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  current_organization={@current_organization}
  active_page="sites"
>
  <.header>
    {@page_title}
    <:subtitle>{@site.location}</:subtitle>
    <:actions>
      <.button navigate={~p"/orgs/#{@current_organization.slug}/sites/#{@site.id}/edit"}>
        <.icon name="hero-pencil" class="h-4 w-4" /> Edit
      </.button>
    </:actions>
  </.header>

  <div class="mt-8 grid gap-6 md:grid-cols-2">
    <div>
      <h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Site Details</h3>
      <dl class="space-y-4">
        <%= if @site.parent_site do %>
          <div>
            <dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Parent Site</dt>
            <dd class="mt-1">
              <.link
                navigate={~p"/orgs/#{@current_organization.slug}/sites/#{@site.parent_site.id}"}
                class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
              >
                {@site.parent_site.name}
              </.link>
            </dd>
          </div>
        <% end %>
        <%= if @site.location do %>
          <div>
            <dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Location</dt>
            <dd class="mt-1 text-zinc-900 dark:text-zinc-100">{@site.location}</dd>
          </div>
        <% end %>
        <%= if @site.description do %>
          <div>
            <dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Description</dt>
            <dd class="mt-1 text-zinc-900 dark:text-zinc-100">{@site.description}</dd>
          </div>
        <% end %>
      </dl>

      <%= if @site.child_sites != [] do %>
        <div class="mt-6">
          <h4 class="text-sm font-semibold mb-3 text-zinc-900 dark:text-zinc-100">Child Sites</h4>
          <ul class="space-y-2">
            <li :for={child <- @site.child_sites}>
              <.link
                navigate={~p"/orgs/#{@current_organization.slug}/sites/#{child.id}"}
                class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
              >
                {child.name}
              </.link>
            </li>
          </ul>
        </div>
      <% end %>
    </div>

    <div>
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Device</h3>
        <.button
          navigate={~p"/orgs/#{@current_organization.slug}/devices/new?site_id=#{@site.id}"}
          variant="primary"
        >
          <.icon name="hero-plus" class="h-4 w-4" /> Add Device
        </.button>
      </div>

      <%= if @device == [] do %>
        <div class="rounded-lg border-2 border-dashed border-zinc-300 bg-zinc-50 p-8 text-center dark:border-zinc-700 dark:bg-zinc-900">
          <.icon name="hero-server" class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600" />
          <h4 class="mt-4 text-base font-semibold text-zinc-900 dark:text-zinc-100">
            Add your first device
          </h4>
          <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
            Start monitoring by adding network devices to this site.
          </p>
          <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
            You can add routers, switches, servers, or any device with an IP address.
          </p>
          <div class="mt-6">
            <.button
              navigate={~p"/orgs/#{@current_organization.slug}/devices/new?site_id=#{@site.id}"}
              variant="primary"
            >
              <.icon name="hero-plus" class="h-5 w-5" /> Add Device
            </.button>
          </div>
        </div>
      <% else %>
        <div class="space-y-3">
          <.link
            :for={eq <- @device}
            navigate={~p"/orgs/#{@current_organization.slug}/devices/#{eq.id}"}
            class="flex items-center justify-between rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900 hover:border-zinc-300 dark:hover:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors cursor-pointer"
          >
            <div>
              <p class="font-medium text-zinc-900 dark:text-zinc-100">{eq.name}</p>
              <p class="text-sm text-zinc-600 dark:text-zinc-400">{eq.ip_address}</p>
            </div>
            <span class={[
              "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
              eq.status == :up &&
                "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
              eq.status == :down && "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
              eq.status == :unknown &&
                "bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
            ]}>
              {eq.status |> to_string() |> String.upcase()}
            </span>
          </.link>
        </div>
      <% end %>
    </div>
  </div>
  <!-- Latency Chart -->
  <%= if @latency_chart_data do %>
    <div class="mt-8">
      <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
        <div class="px-4 py-3 border-b border-zinc-200 dark:border-zinc-700">
          <h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
            Site Latency - Last 24 Hours
          </h3>
        </div>
        <div class="p-4">
          <div
            id="site-latency-chart"
            phx-hook="SensorChart"
            data-chart={@latency_chart_data}
            data-unit="ms"
            data-auto-scale="true"
            style="height: 400px;"
          >
            <canvas></canvas>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</Layouts.authenticated>