<!doctype html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OpenClaw Detector - Astrix Security</title>
    <meta
      name="description"
      content="Security dashboard for detecting OpenClaw AI agent installations"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="app">
      <!-- Header -->
      <header class="header">
        <img src="assets/astrix-logo.png" alt="Astrix" class="logo" />
        <div class="header-actions">
          <button class="btn-ghost" id="themeToggle" title="Toggle theme">
            <svg
              class="icon sun-icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <circle cx="12" cy="12" r="5"></circle>
              <line x1="12" y1="1" x2="12" y2="3"></line>
              <line x1="12" y1="21" x2="12" y2="23"></line>
              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
              <line x1="1" y1="12" x2="3" y2="12"></line>
              <line x1="21" y1="12" x2="23" y2="12"></line>
              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
            <svg
              class="icon moon-icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
          </button>
          <button
            class="btn-ghost"
            onclick="
              window.open('mailto:openclaw-support@astrix.security', '_blank')
            "
            title="Email us"
          >
            <svg
              class="icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
              ></path>
              <polyline points="22,6 12,13 2,6"></polyline>
            </svg>
          </button>
          <button
            class="btn-ghost"
            onclick="
              window.open(
                'https://linkedin.com/company/astrix-security',
                '_blank',
              )
            "
            title="LinkedIn"
          >
            <svg
              class="icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
              ></path>
              <rect x="2" y="9" width="4" height="12"></rect>
              <circle cx="4" cy="4" r="2"></circle>
            </svg>
          </button>
          <button
            class="btn-outline"
            onclick="
              window.open(
                'https://astrix.security/learn/blog/introducing-astrix-openclaw-moltbot-footprint-scanner/',
                '_blank',
              )
            "
          >
            <svg
              class="icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="2" y1="12" x2="22" y2="12"></line>
              <path
                d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
              ></path>
            </svg>
            Read Our Blog
          </button>
        </div>
      </header>

      <!-- Main Content -->
      <main class="main-content">
        <div class="container">
          <!-- Page Header -->
          <div class="page-header">
            <h1>OpenClaw Endpoints</h1>
            <p>Detected endpoints with OpenClaw AI agent installations</p>
            <p
              class="text-muted"
              style="font-size: 0.875rem; margin-top: 0.25rem"
            >
              Generated {{GENERATED_AT}}
            </p>
          </div>

          <!-- Stats -->
          <div class="stats-grid">
            <div class="stat-card stat-destructive">
              <div class="stat-icon pulse">
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
                  ></path>
                  <line x1="12" y1="8" x2="12" y2="15"></line>
                  <circle
                    cx="12"
                    cy="17"
                    r="1.5"
                    style="fill: currentColor; stroke: none"
                  ></circle>
                </svg>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{THREATS_COUNT}}</div>
                <div class="stat-label">Threats Detected</div>
              </div>
            </div>
          </div>

          <!-- Table -->
          <div class="table-container">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Endpoint</th>
                  <th>Username</th>
                  <th>OS</th>
                  <th>Last Seen</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {{TABLE_ROWS}}
              </tbody>
            </table>
          </div>
        </div>
      </main>

      <!-- Drawer Overlay -->
      <div
        class="drawer-overlay"
        id="drawerOverlay"
        onclick="closeDrawer()"
      ></div>

      <!-- Drawer -->
      <div class="drawer" id="drawer">
        <div class="drawer-header">
          <h2 id="drawerTitle">Endpoint Details</h2>
          <button class="btn-icon" onclick="closeDrawer()">
            <svg
              class="icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
        <div class="drawer-content" id="drawerContent">
          <!-- Content populated by JavaScript -->
        </div>
        <div class="drawer-footer">
          <a
            class="btn-contact"
            href="mailto:openclaw-support@astrix.security?subject=OpenClaw%20detection%20-%20Request%20for%20more%20information"
          >
            <svg
              class="icon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
              ></path>
              <polyline points="22,6 12,13 2,6"></polyline>
            </svg>
            Contact Astrix for More Details
          </a>
        </div>
      </div>
    </div>

    <script>
      window.REPORT_ENDPOINTS = {{ENDPOINTS_JSON}};
    </script>
    <script src="script.js"></script>
  </body>
</html>
