{{ define "settings-panel-devices" }}
<section class="card bg-base-200 shadow-sm p-6 space-y-6">
    <div>
        <h2 class="text-xl font-semibold">Authorized Devices</h2>
        <p class="text-base-content/70 mt-1">Devices authorized via <code class="cmd">docker-credential-atcr</code> credential helper.</p>
    </div>

    <div class="bg-base-200 rounded-lg p-4 space-y-4">
        <h3 class="font-semibold">First Time Setup</h3>
        <ol class="list-decimal list-inside space-y-4 text-sm">
            <li>Install credential helper:
                <pre class="mt-2 p-3 bg-base-300 rounded-lg overflow-x-auto"><code>curl -fsSL {{ .SiteURL }}/static/install.sh | bash</code></pre>
            </li>
            <li>Configure Docker to use the helper. Add to <code class="cmd">~/.docker/config.json</code>:
                <pre class="mt-2 p-3 bg-base-300 rounded-lg overflow-x-auto"><code>{
  "credHelpers": {
    "{{ .RegistryURL }}": "atcr"
  }
}</code></pre>
            </li>
            <li>Run any Docker command:
                <div class="mt-2">{{ template "docker-command" (print (pullPrefix .OciClient) .RegistryURL "/" .Profile.Handle "/myimage") }}</div>
            </li>
            <li>Browser will open for authorization - click Approve</li>
            <li>Done! Device is automatically authorized</li>
        </ol>

        <div class="pt-3 border-t border-base-300 text-sm">
            <strong>Fallback:</strong> Use <a href="https://bsky.app/settings/app-passwords" target="_blank" class="link link-primary">app password</a> with <code class="cmd">docker login {{ .RegistryURL }}</code> for quick start (no device tracking)
        </div>
    </div>

    <div class="space-y-3">
        <h3 class="font-semibold">Your Authorized Devices</h3>
        <div class="overflow-x-auto">
            <table class="table table-zebra">
                <thead>
                    <tr>
                        <th>Device Name</th>
                        <th>IP Address</th>
                        <th>Created</th>
                        <th>Last Used</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="devices-table"
                       hx-get="/api/devices"
                       hx-trigger="load, every 30s, devicesChanged from:body"
                       hx-swap="innerHTML">
                    <tr><td colspan="5" class="text-center">{{ icon "loader-2" "size-4 animate-spin inline-block" }} Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
{{ end }}