{{define "awaiting_agent"}}
{{$page := .Page}}
{{/*
  Polled status fragment for the Add-host pending page. Wrapper
  carries the HTMX poll trigger only while State == "awaiting" —
  state == "connected" or "expired" both stop polling. The wrapper
  is what HTMX swaps via hx-swap=outerHTML, so the trigger getting
  removed is what stops the loop.
*/}}
<div class="col-span-7"
     {{if eq $page.State "awaiting"}}hx-get="/hosts/pending/{{$page.Token}}/awaiting"
     hx-trigger="every 2s"
     hx-swap="outerHTML"{{end}}>

  {{if eq $page.State "connected"}}
    <div class="panel rounded-[7px] px-7 py-6"
         style="border-color: color-mix(in oklch, var(--ok), transparent 60%);">
      <div class="text-[11px] uppercase tracking-[0.1em] font-semibold text-ok mb-3">Agent connected</div>
      <div class="flex items-center gap-3">
        <span class="dot dot-online"></span>
        <span class="mono text-[14px] text-ink">{{$page.HostName}}</span>
        <span class="text-[12px] text-ink-mute">— enrolled, online{{if $page.LastSeenAt}}, last heartbeat {{relTime $page.LastSeenAt}}{{end}}</span>
      </div>
      <div class="mt-4 flex gap-2">
        <a href="/hosts/{{$page.HostID}}" class="btn btn-primary">Open host →</a>
        <a href="/hosts/{{$page.HostID}}/schedules" class="btn">View schedules</a>
      </div>
    </div>

  {{else if eq $page.State "expired"}}
    <div class="panel rounded-[7px] px-7 py-6"
         style="border-color: color-mix(in oklch, var(--bad), transparent 60%);">
      <div class="text-[11px] uppercase tracking-[0.1em] font-semibold text-bad mb-3">Token expired</div>
      <p class="text-[13px] text-ink-mid leading-[1.55]">
        The 1-hour window has elapsed without the agent connecting.
        Mint a fresh token and run the new install command.
      </p>
      <div class="mt-4">
        <a href="/hosts/new" class="btn btn-primary">Mint a new token</a>
      </div>
    </div>

  {{else}}
    <div class="panel rounded-[7px] px-7 py-6">
      <div class="text-[11px] uppercase tracking-[0.1em] text-ink-fade mb-3">Awaiting agent connection</div>
      <div class="flex items-center gap-3">
        <span class="dot dot-offline pulse"></span>
        <span class="text-[12px] text-ink-mute">— polling every 2s; this page redirects to the host detail when enrolment lands.</span>
      </div>
      <div class="mt-4 px-3 py-2.5 rounded-[5px] mono text-[11.5px] text-ink-mute leading-[1.7]"
           style="background: var(--bg); border: 1px solid var(--line-soft);">
        <div>token expires <span class="text-ink-mid">{{relTime $page.ExpiresAt}}</span></div>
        <div class="text-ink-fade">awaiting POST /api/agents/enroll …</div>
      </div>
    </div>
  {{end}}

</div>
{{end}}