towerops/lib/towerops_web/controllers/graphql_docs_html/index.html.heex

<!-- Sidebar -->
<div class="hidden lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-72 lg:flex-col xl:w-80">
  <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-zinc-900/10 px-6 pt-4 pb-8 dark:border-white/10">
    <!-- Logo -->
    <div class="flex h-16 shrink-0 items-center">
      <.link navigate={~p"/"} class="text-2xl font-bold text-zinc-900 dark:text-white">
        Towerops GraphQL API
      </.link>
    </div>

    <!-- Navigation -->
    <nav class="flex flex-1 flex-col">
      <ul role="list" class="flex flex-1 flex-col gap-y-7">
        <!-- Guides Section -->
        <li>
          <h2 class="text-xs font-semibold text-zinc-900 dark:text-white">Guides</h2>
          <ul role="list" class="mt-3 space-y-1 border-l border-zinc-900/10 dark:border-white/5">
            <li>
              <a href="#introduction" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
                Introduction
              </a>
            </li>
            <li>
              <a href="#authentication" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
                Authentication
              </a>
            </li>
            <li>
              <a href="#endpoint" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
                Endpoint
              </a>
            </li>
          </ul>
        </li>

        <!-- Queries Section -->
        <li>
          <h2 class="text-xs font-semibold text-zinc-900 dark:text-white">Queries</h2>
          <ul role="list" class="mt-3 space-y-1 border-l border-zinc-900/10 dark:border-white/5">
            <li><a href="#query-devices" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Devices</a></li>
            <li><a href="#query-sites" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Sites</a></li>
            <li><a href="#query-alerts" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Alerts</a></li>
            <li><a href="#query-agents" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Agents</a></li>
            <li><a href="#query-organization" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Organization</a></li>
            <li><a href="#query-members" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Members</a></li>
            <li><a href="#query-integrations" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Integrations</a></li>
            <li><a href="#query-activity" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Activity</a></li>
            <li><a href="#query-metrics" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Metrics & Interfaces</a></li>
          </ul>
        </li>

        <!-- Mutations Section -->
        <li>
          <h2 class="text-xs font-semibold text-zinc-900 dark:text-white">Mutations</h2>
          <ul role="list" class="mt-3 space-y-1 border-l border-zinc-900/10 dark:border-white/5">
            <li><a href="#mutation-devices" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Device CRUD</a></li>
            <li><a href="#mutation-sites" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Site CRUD</a></li>
            <li><a href="#mutation-alerts" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Alert Actions</a></li>
            <li><a href="#mutation-agents" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Agent Management</a></li>
            <li><a href="#mutation-organization" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Organization</a></li>
            <li><a href="#mutation-members" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Members</a></li>
            <li><a href="#mutation-integrations" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Integrations</a></li>
          </ul>
        </li>

        <!-- Types Section -->
        <li>
          <h2 class="text-xs font-semibold text-zinc-900 dark:text-white">Types</h2>
          <ul role="list" class="mt-3 space-y-1 border-l border-zinc-900/10 dark:border-white/5">
            <li><a href="#types" class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">All Types</a></li>
          </ul>
        </li>

        <!-- Links -->
        <li class="mt-auto">
          <.link navigate={~p"/docs/api"} class="block py-1 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
            ← REST API Docs
          </.link>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Main content -->
<div class="lg:pl-72 xl:pl-80">
  <div class="mx-auto max-w-3xl px-6 py-10 lg:px-8">

    <!-- Introduction -->
    <section id="introduction" class="mb-16">
      <h1 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">GraphQL API</h1>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
        The TowerOps GraphQL API provides a flexible, strongly-typed interface for querying and managing your network infrastructure.
        Request exactly the data you need in a single request — no over-fetching, no under-fetching.
      </p>
      <p class="mt-2 text-gray-600 dark:text-gray-400">
        The GraphQL API uses the same authentication as the
        <.link navigate={~p"/docs/api"} class="text-blue-600 hover:text-blue-500 dark:text-blue-400">REST API</.link>
        and provides equivalent functionality with the added benefit of nested queries and precise field selection.
      </p>
    </section>

    <!-- Authentication -->
    <section id="authentication" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Authentication</h2>
      <p class="mt-4 text-gray-600 dark:text-gray-400">
        Authenticate using a Bearer token in the <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">Authorization</code> header.
        API tokens can be created in your organization settings.
      </p>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>Authorization: Bearer <%= @sample_token %></code></pre>
      </div>
    </section>

    <!-- Endpoint -->
    <section id="endpoint" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Endpoint</h2>
      <p class="mt-4 text-gray-600 dark:text-gray-400">
        All GraphQL requests are sent as <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">POST</code> to a single endpoint:
      </p>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400"><code>POST https://app.towerops.net/api/graphql</code></pre>
      </div>
      <p class="mt-4 text-gray-600 dark:text-gray-400">
        Send a JSON body with a <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">query</code> field
        and optional <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">variables</code>:
      </p>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>curl -X POST https://app.towerops.net/api/graphql \
  -H "Authorization: Bearer <%= @sample_token %>" \
  -H "Content-Type: application/json" \
  -d '{"query": "{ devices { id name ipAddress status } }"}'</code></pre>
      </div>
    </section>

    <!-- Queries: Devices -->
    <section id="query-devices" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Devices</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">devices</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">List all devices. Optionally filter by site or status.</p>
      <div class="mt-3 overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead><tr class="border-b border-zinc-200 dark:border-zinc-700">
            <th class="py-2 pr-4 text-left font-medium text-zinc-900 dark:text-white">Argument</th>
            <th class="py-2 pr-4 text-left font-medium text-zinc-900 dark:text-white">Type</th>
            <th class="py-2 text-left font-medium text-zinc-900 dark:text-white">Description</th>
          </tr></thead>
          <tbody class="text-gray-600 dark:text-gray-400">
            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-2 pr-4 font-mono text-xs">siteId</td><td class="py-2 pr-4">ID</td><td class="py-2">Filter by site</td></tr>
            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-2 pr-4 font-mono text-xs">status</td><td class="py-2 pr-4">String</td><td class="py-2">Filter by status (up, down, unknown)</td></tr>
            <tr><td class="py-2 pr-4 font-mono text-xs">limit</td><td class="py-2 pr-4">Int</td><td class="py-2">Max results (default: 100)</td></tr>
          </tbody>
        </table>
      </div>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  devices(siteId: "uuid", status: "up") {
    id
    name
    ipAddress
    status
    lastCheckedAt
    monitoringEnabled
    snmpEnabled
    deviceRole
    site {
      id
      name
      location
    }
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">device</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">Get a single device by ID.</p>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  device(id: "device-uuid") {
    id
    name
    ipAddress
    status
    description
    snmpVersion
    snmpPort
    checkIntervalSeconds
    site { id name }
  }
}</code></pre>
      </div>
    </section>

    <!-- Queries: Sites -->
    <section id="query-sites" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Sites</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">sites</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">List all sites for the organization.</p>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  sites {
    id
    name
    description
    location
    snmpVersion
    snmpCommunity
    insertedAt
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">site</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">Get a single site by ID.</p>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{ site(id: "site-uuid") { id name location } }</code></pre>
      </div>
    </section>

    <!-- Queries: Alerts -->
    <section id="query-alerts" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Alerts</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">alerts</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">List alerts. Filter by status or device.</p>
      <div class="mt-3 overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead><tr class="border-b border-zinc-200 dark:border-zinc-700">
            <th class="py-2 pr-4 text-left font-medium text-zinc-900 dark:text-white">Argument</th>
            <th class="py-2 pr-4 text-left font-medium text-zinc-900 dark:text-white">Type</th>
            <th class="py-2 text-left font-medium text-zinc-900 dark:text-white">Description</th>
          </tr></thead>
          <tbody class="text-gray-600 dark:text-gray-400">
            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-2 pr-4 font-mono text-xs">status</td><td class="py-2 pr-4">String</td><td class="py-2">active, acknowledged, or resolved</td></tr>
            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-2 pr-4 font-mono text-xs">deviceId</td><td class="py-2 pr-4">ID</td><td class="py-2">Filter by device</td></tr>
            <tr><td class="py-2 pr-4 font-mono text-xs">limit</td><td class="py-2 pr-4">Int</td><td class="py-2">Max results (default: 100)</td></tr>
          </tbody>
        </table>
      </div>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  alerts(status: "active", limit: 10) {
    id
    alertType
    message
    triggeredAt
    acknowledgedAt
    resolvedAt
    deviceId
    device {
      id
      name
      ipAddress
    }
    acknowledgedByEmail
  }
}</code></pre>
      </div>
    </section>

    <!-- Queries: Agents -->
    <section id="query-agents" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Agents</h2>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  agents {
    id
    name
    enabled
    lastSeenAt
    lastIp
    isCloudPoller
    deviceCount
    metadata
  }
}

# Single agent
{ agent(id: "agent-uuid") { id name enabled deviceCount } }</code></pre>
      </div>
    </section>

    <!-- Queries: Organization -->
    <section id="query-organization" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Organization</h2>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  organization {
    id
    name
    slug
    subscriptionPlan
    useSites
    snmpVersion
    snmpCommunity
    snmpPort
    snmpTransport
    mikrotikEnabled
    mikrotikUsername
    mikrotikPort
    mikrotikUseSsl
    defaultAgentTokenId
  }
}</code></pre>
      </div>
    </section>

    <!-- Queries: Members -->
    <section id="query-members" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Members</h2>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  members {
    id
    email
    role
    insertedAt
  }
}</code></pre>
      </div>
    </section>

    <!-- Queries: Integrations -->
    <section id="query-integrations" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Integrations</h2>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  integrations {
    id
    provider
    enabled
    syncIntervalMinutes
    lastSyncedAt
    lastSyncStatus
  }
}</code></pre>
      </div>
    </section>

    <!-- Queries: Activity -->
    <section id="query-activity" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Activity</h2>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  activity(limit: 20) {
    summary
    detail
    timestamp
    severity
    deviceName
    siteName
    link
    type
  }
}</code></pre>
      </div>
    </section>

    <!-- Queries: Metrics & Interfaces -->
    <section id="query-metrics" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Query: Metrics & Interfaces</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">deviceMetrics</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">Get time-series metrics for a device.</p>
      <div class="mt-3 overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead><tr class="border-b border-zinc-200 dark:border-zinc-700">
            <th class="py-2 pr-4 text-left font-medium text-zinc-900 dark:text-white">Argument</th>
            <th class="py-2 pr-4 text-left font-medium text-zinc-900 dark:text-white">Type</th>
            <th class="py-2 text-left font-medium text-zinc-900 dark:text-white">Description</th>
          </tr></thead>
          <tbody class="text-gray-600 dark:text-gray-400">
            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-2 pr-4 font-mono text-xs">deviceId</td><td class="py-2 pr-4">ID!</td><td class="py-2">Required device ID</td></tr>
            <tr class="border-b border-zinc-100 dark:border-zinc-800"><td class="py-2 pr-4 font-mono text-xs">sensorType</td><td class="py-2 pr-4">String</td><td class="py-2">Filter by sensor type</td></tr>
            <tr><td class="py-2 pr-4 font-mono text-xs">timeRange</td><td class="py-2 pr-4">String</td><td class="py-2">e.g. "24h", "72h" (default: "24h")</td></tr>
          </tbody>
        </table>
      </div>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  deviceMetrics(deviceId: "device-uuid", timeRange: "48h") {
    timestamp
    value
    status
    checkName
    checkType
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">deviceInterfaces</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">Get SNMP interfaces for a device.</p>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>{
  deviceInterfaces(deviceId: "device-uuid") {
    id
    ifIndex
    ifName
    ifDescr
    ifType
    ifSpeed
    ifAdminStatus
    ifOperStatus
    ifAlias
  }
}</code></pre>
      </div>
    </section>

    <!-- Mutations: Devices -->
    <section id="mutation-devices" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Mutation: Devices</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">createDevice</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  createDevice(input: {
    ipAddress: "192.168.1.1"
    name: "Core Router"
    siteId: "site-uuid"
    snmpEnabled: true
    snmpVersion: "2c"
    snmpCommunity: "public"
  }) {
    id
    name
    ipAddress
    status
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">updateDevice</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  updateDevice(id: "device-uuid", input: {
    name: "Updated Router"
    monitoringEnabled: false
  }) {
    id
    name
    monitoringEnabled
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">deleteDevice</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  deleteDevice(id: "device-uuid") {
    success
    message
  }
}</code></pre>
      </div>
    </section>

    <!-- Mutations: Sites -->
    <section id="mutation-sites" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Mutation: Sites</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">createSite</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  createSite(input: {
    name: "Main Office"
    location: "New York, NY"
    snmpCommunity: "public"
  }) {
    id
    name
    location
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">updateSite / deleteSite</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">Same pattern as device mutations.</p>
    </section>

    <!-- Mutations: Alerts -->
    <section id="mutation-alerts" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Mutation: Alert Actions</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">acknowledgeAlert</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  acknowledgeAlert(id: "alert-uuid") {
    id
    acknowledgedAt
    acknowledgedByEmail
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">resolveAlert</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  resolveAlert(id: "alert-uuid") {
    id
    resolvedAt
  }
}</code></pre>
      </div>
    </section>

    <!-- Mutations: Agents -->
    <section id="mutation-agents" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Mutation: Agent Management</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">createAgent</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-400">Creates a new agent token. The raw token is only returned once.</p>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  createAgent(name: "DC1 Agent") {
    id
    name
    token
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">deleteAgent</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation { deleteAgent(id: "agent-uuid") { success message } }</code></pre>
      </div>
    </section>

    <!-- Mutations: Organization -->
    <section id="mutation-organization" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Mutation: Organization Settings</h2>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  updateOrganization(input: {
    name: "My Network"
    useSites: true
    snmpVersion: "2c"
    snmpCommunity: "public"
    mikrotikEnabled: true
    mikrotikUsername: "admin"
    mikrotikPort: 8729
    mikrotikUseSsl: true
  }) {
    id
    name
    useSites
    snmpVersion
    mikrotikEnabled
  }
}</code></pre>
      </div>
    </section>

    <!-- Mutations: Members -->
    <section id="mutation-members" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Mutation: Members</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">sendInvitation</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  sendInvitation(email: "user@example.com", role: "admin") {
    id
    email
    role
    expiresAt
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">updateMemberRole</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  updateMemberRole(id: "user-uuid", role: "admin") {
    id
    email
    role
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">removeMember / cancelInvitation</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation { removeMember(id: "user-uuid") { success message } }
mutation { cancelInvitation(id: "invitation-uuid") { success message } }</code></pre>
      </div>
    </section>

    <!-- Mutations: Integrations -->
    <section id="mutation-integrations" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Mutation: Integrations</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">createIntegration</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  createIntegration(input: {
    provider: "preseem"
    enabled: true
    credentials: "{\"api_key\": \"xxx\"}"
    syncIntervalMinutes: 10
  }) {
    id
    provider
    enabled
  }
}</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">testIntegration</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>mutation {
  testIntegration(id: "integration-uuid") {
    success
    message
  }
}</code></pre>
      </div>
    </section>

    <!-- Types Reference -->
    <section id="types" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Types Reference</h2>
      <p class="mt-4 text-gray-600 dark:text-gray-400">
        All field names use camelCase in GraphQL queries (Absinthe automatically converts from Elixir's snake_case).
      </p>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">Device</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        id, name, ipAddress, description, displayOrder, status, lastCheckedAt, lastStatusChangeAt,
        monitoringEnabled, checkIntervalSeconds, snmpEnabled, snmpVersion, snmpCommunity, snmpCommunitySource,
        snmpPort, snmpTransport, snmpTransportSource, lastDiscoveryAt, lastSnmpPollAt,
        snmpv3SecurityLevel, snmpv3Username, snmpv3AuthProtocol, snmpv3PrivProtocol, snmpv3CredentialSource,
        mikrotikUsername, mikrotikPort, mikrotikSshPort, mikrotikUseSsl, mikrotikEnabled, mikrotikCredentialSource,
        deviceRole, deviceRoleSource, siteId, organizationId, insertedAt, updatedAt, site
      </p>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Site</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        id, name, description, location, displayOrder, snmpVersion, snmpCommunity, snmpPort, snmpTransport,
        snmpv3SecurityLevel, snmpv3Username, snmpv3AuthProtocol, snmpv3PrivProtocol,
        mikrotikUsername, mikrotikPort, mikrotikSshPort, mikrotikUseSsl, mikrotikEnabled,
        organizationId, agentTokenId, parentSiteId, insertedAt, updatedAt
      </p>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Alert</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        id, alertType, message, triggeredAt, acknowledgedAt, resolvedAt, emailSentAt,
        deviceId, acknowledgedById, gaiiaImpact, insertedAt, device, acknowledgedByEmail
      </p>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Agent</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        id, name, enabled, isCloudPoller, allowRemoteDebug, lastSeenAt, lastIp, metadata,
        organizationId, insertedAt, updatedAt, deviceCount
      </p>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Organization</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        id, name, slug, subscriptionPlan, useSites, snmpVersion, snmpCommunity, snmpPort, snmpTransport,
        snmpv3SecurityLevel, snmpv3Username, snmpv3AuthProtocol, snmpv3PrivProtocol,
        mikrotikEnabled, mikrotikUsername, mikrotikPort, mikrotikSshPort, mikrotikUseSsl,
        defaultAgentTokenId, insertedAt, updatedAt
      </p>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Member</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">id, email, role, isDefault, userId, insertedAt</p>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Integration</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        id, provider, enabled, syncIntervalMinutes, lastSyncedAt, lastSyncStatus, organizationId, insertedAt, updatedAt
      </p>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">ActivityItem</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">summary, detail, timestamp, severity, icon, deviceName, siteName, link, type</p>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Utility Types</h3>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        <strong>DeleteResult:</strong> success (Boolean!), message (String)<br/>
        <strong>TestResult:</strong> success (Boolean!), message (String)<br/>
        <strong>MetricPoint:</strong> timestamp, value, status, checkName, checkType<br/>
        <strong>Interface:</strong> id, ifIndex, ifName, ifDescr, ifType, ifSpeed, ifAdminStatus, ifOperStatus, ifAlias<br/>
        <strong>Invitation:</strong> id, email, role, expiresAt, acceptedAt, insertedAt<br/>
        <strong>AgentWithToken:</strong> id, name, enabled, token, insertedAt
      </p>
    </section>

    <!-- curl Examples -->
    <section id="examples" class="mb-16">
      <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">curl Examples</h2>

      <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">List devices with site info</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>curl -X POST https://app.towerops.net/api/graphql \
  -H "Authorization: Bearer <%= @sample_token %>" \
  -H "Content-Type: application/json" \
  -d '{"query": "{ devices { id name ipAddress status site { id name location } } }"}'</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">Get active alerts</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>curl -X POST https://app.towerops.net/api/graphql \
  -H "Authorization: Bearer <%= @sample_token %>" \
  -H "Content-Type: application/json" \
  -d '{"query": "{ alerts(status: \"active\") { id alertType message triggeredAt device { name ipAddress } } }"}'</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">Create a device</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>curl -X POST https://app.towerops.net/api/graphql \
  -H "Authorization: Bearer <%= @sample_token %>" \
  -H "Content-Type: application/json" \
  -d '{"query": "mutation { createDevice(input: { ipAddress: \"192.168.1.1\", name: \"Core Router\", snmpEnabled: true }) { id name status } }"}'</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">Acknowledge an alert</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>curl -X POST https://app.towerops.net/api/graphql \
  -H "Authorization: Bearer <%= @sample_token %>" \
  -H "Content-Type: application/json" \
  -d '{"query": "mutation { acknowledgeAlert(id: \"alert-uuid\") { id acknowledgedAt } }"}'</code></pre>
      </div>

      <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">Using variables</h3>
      <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>curl -X POST https://app.towerops.net/api/graphql \
  -H "Authorization: Bearer <%= @sample_token %>" \
  -H "Content-Type: application/json" \
  -d '{
    "query": "query GetDevice($id: ID!) { device(id: $id) { id name ipAddress status site { name } } }",
    "variables": {"id": "device-uuid"}
  }'</code></pre>
      </div>
    </section>

  </div>
</div>