dotfiles/app/lib/prymn_web/live/server_live/show.html.heex

<div class="mx-auto max-w-2xl">
  <.header>
    <span class="relative flex items-center">
      <button>
        Server <%= @server.name %>
        <.icon name="hero-chevron-down" />
      </button>
      <button class="ml-4">
        <.icon class="h-3 w-3" name="hero-pencil" />
      </button>
      <span
        role="tooltip"
        class={[
          "absolute -left-6 inline-flex h-3 w-3 before:-translate-x-1/2 before:-translate-y-full",
          "before:-top-2 before:left-1/2 before:absolute before:text-sm before:text-white",
          "before:font-normal before:content-[attr(data-tip)] before:opacity-0",
          "hover:before:opacity-100 before:py-1 before:px-2 before:bg-black",
          "before:rounded before:pointer-events-none before:transition-opacity"
        ]}
        data-tip={@health.message}
      >
        <%= case @health.message do %>
          <% "Connected" -> %>
            <span class="absolute top-0 left-0 h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
            <span class="h-3 w-3 rounded-full bg-green-500" />
          <% "Disconnected" -> %>
            <span class="h-3 w-3 rounded-full bg-red-500" />
          <% _ -> %>
            <span class="h-3 w-3 rounded-full bg-yellow-500" />
        <% end %>
      </span>
    </span>
    <:subtitle>
      <%= @server.public_ip %>
    </:subtitle>
    <:actions>
      <.button>+ New App</.button>
      <.button class="border border-black bg-transparent text-black hover:text-white">
        Quick actions <.icon name="hero-chevron-down" />
      </.button>
    </:actions>
  </.header>
  <div class="my-3 text-sm text-slate-700">
    <%= for {name, task} <- @health.tasks do %>
      Background task in progress: <%= name %>
      <p><%= task.progress %> complete</p>
    <% end %>
  </div>
  <div :if={@server.status == :unregistered} class="my-10">
    <p class="mb-9">
      Connect to your server using root credentials and execute the following command:
    </p>
    <div class="group inline-flex items-center rounded-lg bg-gray-800 p-4 pl-6 text-white">
      <code class="flex gap-4">
        <span class="select-none text-gray-500">#</span>
        <span class="flex-1">
          <%= @registration_command %>
        </span>
      </code>
      <button type="button" tabindex="-1">
        <.icon
          name="hero-document-duplicate-solid"
          class="invisible ml-4 animate-bounce text-gray-500 group-hover:visible"
        />
      </button>
    </div>
  </div>
  <div :if={@server.status == :registered} class="my-10">
    <.live_component
      id={"system_info-#{@server.name}"}
      module={PrymnWeb.SystemInfo}
      ip={@server.public_ip}
    />
    <section class="mt-4">
      <form phx-change="change_dry_run">
        <.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
      </form>
    </section>
    <section class="mt-4">
      <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
      <p class="mt-4">
        Updates: <%= 0 %> pending updates.
        <.button type="button" class="ml-4" phx-click="system_update">
          Update now
        </.button>
        <p :for={output <- assigns.update_output}>
          <%= output %>
        </p>
      </p>
    </section>
    <section class="mt-4">
      <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
        Backups
      </h2>
      <.table id="backups" rows={[%{date: "2023-10-11"}, %{date: "2023-10-10"}]}>
        <:col :let={backup} label="Date"><%= backup.date %></:col>
        <:action>
          <.button>Restore</.button>
        </:action>
      </.table>
    </section>
    <section class="mt-4">
      <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
        Manage Services
      </h2>
      <.table
        id="services"
        rows={[%{name: "mariadb", status: "Active"}, %{name: "php8.0", status: "Disabled"}]}
      >
        <:col :let={service} label="Service"><%= service.name %></:col>
        <:col :let={service} label="Status"><%= service.status %></:col>
        <:action>
          <.button>Activate</.button>
          <.button>Deactivate</.button>
        </:action>
      </.table>
    </section>
  </div>
  <.back navigate={~p"/servers"}>Back to servers</.back>
</div>