<html>
  <head>
    <title>sketch-container-status demo</title>
    <link rel="stylesheet" href="demo.css" />
    <link rel="stylesheet" href="/dist/tailwind.css" />
    <script type="module" src="../sketch-container-status.ts"></script>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const containerStatus = document.querySelector("#status-2");
        containerStatus.state = {
          hostname: "example.hostname",
          initial_commit: "decafbad",
          message_count: 27,
          os: "linux",
          total_usage: {
            start_time: "around lunch",
            messages: 1337,
            input_tokens: 3,
            output_tokens: 1000,
            cache_read_input_tokens: 28,
            cache_creation_input_tokens: 12354,
            total_cost_usd: 2.03,
          },
          working_dir: "/app",
          session_id: "demo-session-123",
          skaband_addr: "https://sketch.dev",
          open_ports: [
            { proto: "tcp", port: 22, process: "ssh", pid: 100 },
            { proto: "tcp", port: 80, process: "nginx", pid: 200 },
            { proto: "tcp", port: 3000, process: "node", pid: 300 },
            { proto: "tcp", port: 8080, process: "python", pid: 400 },
            { proto: "tcp", port: 9000, process: "go", pid: 500 }
          ]
        };
      });
    </script>
  </head>
  <body>
    <h1>sketch-container-status demo</h1>

    Empty:
    <sketch-container-status id="status-1"></sketch-container-status>

    With state fields set:
    <sketch-container-status id="status-2"></sketch-container-status>
  </body>
</html>