{{template "docs.html" .}}

{{define "title"}}API Reference{{end}}

{{define "content"}}
<article class="space-y-12">
    <header>
        <div class="w-12 h-1 rounded-full bg-gradient-to-r from-violet-500 to-cyan-500 mb-6"></div>
        <h1 class="text-3xl font-bold text-white mb-3">API Reference</h1>
        <p class="text-[#888] text-lg">RESTful API for collections and records.</p>
    </header>

    <!-- Architecture Diagram -->
    <section class="space-y-6">
        <div>
            <h2 class="text-xl font-semibold text-white">How It Works</h2>
            <p class="text-[#888] mt-1">ReadySite connects your systems to your users through a unified data layer.</p>
        </div>

        <div class="border border-white/10 rounded-xl p-6 bg-[#1a1a1a]/50">
            <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
                <!-- Your Systems -->
                <div class="flex-1 text-center">
                    <div class="inline-flex flex-col items-center gap-3 p-4 rounded-lg border border-violet-400/20 bg-violet-400/5">
                        <svg class="w-10 h-10 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <rect x="2" y="3" width="20" height="14" rx="2"/>
                            <path d="M8 21h8M12 17v4"/>
                        </svg>
                        <span class="text-white font-medium">Your Systems</span>
                        <span class="text-xs text-[#666]">CRM, ERP, Services</span>
                    </div>
                </div>

                <!-- Arrow -->
                <div class="flex flex-col items-center gap-2">
                    <div class="hidden lg:block w-16 h-0.5 bg-gradient-to-r from-violet-400 to-cyan-400"></div>
                    <div class="lg:hidden h-8 w-0.5 bg-gradient-to-b from-violet-400 to-cyan-400"></div>
                    <span class="text-xs text-cyan-400 font-medium">API</span>
                    <code class="text-[10px] text-[#666]">POST /api/records</code>
                </div>

                <!-- ReadySite Database -->
                <div class="flex-1 text-center">
                    <div class="inline-flex flex-col items-center gap-3 p-4 rounded-lg border border-cyan-400/20 bg-cyan-400/5">
                        <svg class="w-10 h-10 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <ellipse cx="12" cy="5" rx="9" ry="3"/>
                            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                            <path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/>
                        </svg>
                        <span class="text-white font-medium">ReadySite</span>
                        <span class="text-xs text-[#666]">Collections & Records</span>
                    </div>
                </div>

                <!-- Arrow -->
                <div class="flex flex-col items-center gap-2">
                    <div class="hidden lg:block w-16 h-0.5 bg-gradient-to-r from-cyan-400 to-emerald-400"></div>
                    <div class="lg:hidden h-8 w-0.5 bg-gradient-to-b from-cyan-400 to-emerald-400"></div>
                    <span class="text-xs text-emerald-400 font-medium">Views</span>
                    <code class="text-[10px] text-[#666]">{{"{{range .Records}}"}}</code>
                </div>

                <!-- Users -->
                <div class="flex-1 text-center">
                    <div class="inline-flex flex-col items-center gap-3 p-4 rounded-lg border border-emerald-400/20 bg-emerald-400/5">
                        <svg class="w-10 h-10 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <circle cx="12" cy="8" r="4"/>
                            <path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>
                        </svg>
                        <span class="text-white font-medium">Your Users</span>
                        <span class="text-xs text-[#666]">Instant Updates</span>
                    </div>
                </div>
            </div>

            <p class="text-center text-sm text-[#888] mt-6">
                Sync data via API → Store in collections → Render instantly in pages
            </p>
        </div>

        <!-- Whiteboard Diagram -->
        <div class="border border-white/10 rounded-xl p-8 bg-gradient-to-br from-[#1a1a1a] to-[#0d0d0d] overflow-hidden relative">
            <!-- Background grid pattern -->
            <div class="absolute inset-0 opacity-5" style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 20px 20px;"></div>

            <div class="relative">
                {{template "architecture-diagram" .}}
            </div>
        </div>
    </section>

    <section class="space-y-4">
        <h2 class="text-xl font-semibold text-white">Base URL</h2>
        <div class="relative group">
            <pre class="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 text-sm"><code class="text-[#e5e5e5]">https://your-site.com/api</code></pre>
            <button onclick="navigator.clipboard.writeText('https://your-site.com/api'); showCopied(this)" class="absolute top-3 right-3 text-xs text-[#666] hover:text-white transition-colors opacity-0 group-hover:opacity-100">Copy</button>
        </div>
        <p class="text-sm text-[#888]">All endpoints return JSON. Include your token in the Authorization header:</p>
        <div class="relative group mt-3">
            <pre class="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 text-sm"><code class="text-[#e5e5e5]">Authorization: Bearer your-token-here</code></pre>
        </div>
        <p class="text-sm text-[#888] mt-3">Errors return JSON with a <code class="text-violet-400 bg-violet-400/10 px-1 py-0.5 rounded text-xs">message</code> field:</p>
        <div class="relative group mt-3">
            <pre class="bg-[#1a1a1a] border border-white/10 rounded-lg p-4 text-sm"><code class="text-[#e5e5e5]">{"message": "record not found"}  <span class="text-[#666]">// 404</span>
{"message": "unauthorized"}      <span class="text-[#666]">// 401</span></code></pre>
        </div>

        <!-- Tip callout -->
        <div class="flex gap-3 p-4 rounded-lg border border-emerald-400/20 bg-emerald-400/[0.03]">
            <svg class="w-5 h-5 text-emerald-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
            <div>
                <span class="text-emerald-400 font-medium text-sm">Tip</span>
                <p class="text-sm text-[#888] mt-1">Don't want to write API calls? The <a href="/docs/ai-assistant" class="text-violet-400 hover:text-violet-300">AI assistant</a> can create, update, and delete records for you through natural language.</p>
            </div>
        </div>
    </section>

    <section class="space-y-6" id="records">
        <h2 class="text-xl font-semibold text-white">Records</h2>

        <div class="space-y-4">
            <div class="border border-white/10 rounded-lg p-4">
                <div class="flex items-center gap-3 mb-2">
                    <span class="text-xs font-medium px-2 py-0.5 rounded bg-emerald-400/10 text-emerald-400">GET</span>
                    <code class="text-sm text-white">/collections/{collectionId}/records</code>
                </div>
                <p class="text-sm text-[#888]">List all records with optional filtering and pagination.</p>
            </div>

            <div class="border border-white/10 rounded-lg p-4">
                <div class="flex items-center gap-3 mb-2">
                    <span class="text-xs font-medium px-2 py-0.5 rounded bg-emerald-400/10 text-emerald-400">GET</span>
                    <code class="text-sm text-white">/collections/{collectionId}/records/{id}</code>
                </div>
                <p class="text-sm text-[#888]">Get a single record by ID.</p>
            </div>

            <div class="border border-white/10 rounded-lg p-4">
                <div class="flex items-center gap-3 mb-2">
                    <span class="text-xs font-medium px-2 py-0.5 rounded bg-cyan-400/10 text-cyan-400">POST</span>
                    <code class="text-sm text-white">/collections/{collectionId}/records</code>
                </div>
                <p class="text-sm text-[#888]">Create a new record. Returns 201 on success.</p>
            </div>

            <div class="border border-white/10 rounded-lg p-4">
                <div class="flex items-center gap-3 mb-2">
                    <span class="text-xs font-medium px-2 py-0.5 rounded bg-amber-400/10 text-amber-400">PATCH</span>
                    <code class="text-sm text-white">/collections/{collectionId}/records/{id}</code>
                </div>
                <p class="text-sm text-[#888]">Update an existing record.</p>
            </div>

            <div class="border border-white/10 rounded-lg p-4">
                <div class="flex items-center gap-3 mb-2">
                    <span class="text-xs font-medium px-2 py-0.5 rounded bg-red-400/10 text-red-400">DELETE</span>
                    <code class="text-sm text-white">/collections/{collectionId}/records/{id}</code>
                </div>
                <p class="text-sm text-[#888]">Delete a record. Returns 204 on success.</p>
            </div>
        </div>
    </section>

    <section class="space-y-6" id="realtime">
        <h2 class="text-xl font-semibold text-white">Real-time</h2>

        <div class="border border-white/10 rounded-lg p-4">
            <div class="flex items-center gap-3 mb-2">
                <span class="text-xs font-medium px-2 py-0.5 rounded bg-emerald-400/10 text-emerald-400">GET</span>
                <code class="text-sm text-white">/collections/{collectionId}/subscribe</code>
            </div>
            <p class="text-sm text-[#888] mb-4">Subscribe to changes via Server-Sent Events.</p>

            <div class="flex flex-wrap gap-4 text-xs mb-4">
                <span class="text-emerald-400">connect</span>
                <span class="text-cyan-400">create</span>
                <span class="text-amber-400">update</span>
                <span class="text-red-400">delete</span>
            </div>

            <div class="relative group">
                <pre class="bg-[#1a1a1a] rounded-lg p-3 text-xs overflow-x-auto"><code class="text-[#e5e5e5]"><span class="text-violet-400">const</span> events = <span class="text-violet-400">new</span> EventSource(<span class="text-emerald-400">'/api/collections/posts/subscribe'</span>);
events.addEventListener(<span class="text-emerald-400">'create'</span>, e => {
  console.log(JSON.parse(e.data));
});</code></pre>
                <button onclick="navigator.clipboard.writeText(`const events = new EventSource('/api/collections/posts/subscribe');\nevents.addEventListener('create', e => {\n  console.log(JSON.parse(e.data));\n});`); showCopied(this)" class="absolute top-2 right-2 text-xs text-[#666] hover:text-white transition-colors opacity-0 group-hover:opacity-100">Copy</button>
            </div>

            <div class="mt-4">
                <div class="text-sm text-white font-medium mb-2">Event payload</div>
                <div class="relative group">
                    <pre class="bg-[#1a1a1a] rounded-lg p-3 text-xs overflow-x-auto"><code class="text-[#e5e5e5]"><span class="text-[#666]">// Each event sends a JSON payload:</span>
{
  "action": "create",           <span class="text-[#666]">// "create", "update", or "delete"</span>
  "record": {
    "id": "abc123",
    "title": "New Post",
    "content": "Hello world"
  }
}</code></pre>
                </div>
            </div>
        </div>
    </section>

    <section class="space-y-6" id="filtering">
        <h2 class="text-xl font-semibold text-white">Filtering</h2>

        <!-- Info callout -->
        <div class="flex gap-3 p-4 rounded-lg border border-cyan-400/20 bg-cyan-400/[0.03]">
            <svg class="w-5 h-5 text-cyan-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <div>
                <span class="text-cyan-400 font-medium text-sm">Note</span>
                <p class="text-sm text-[#888] mt-1">Pass filters as the <code class="text-violet-400 bg-violet-400/10 px-1 py-0.5 rounded text-xs">filter</code> query parameter: <code class="text-[#ccc] bg-white/5 px-1 py-0.5 rounded text-xs">/api/collections/posts/records?filter=status = 'published' &amp;&amp; views > 100</code></p>
            </div>
        </div>

        <div class="border border-white/10 rounded-lg divide-y divide-white/10 text-sm">
            <div class="p-3 flex items-center gap-4">
                <code class="text-violet-400 w-16">=</code>
                <span class="text-[#888]">Equal</span>
                <code class="text-[#666] ml-auto">status = 'published'</code>
            </div>
            <div class="p-3 flex items-center gap-4">
                <code class="text-violet-400 w-16">!=</code>
                <span class="text-[#888]">Not equal</span>
                <code class="text-[#666] ml-auto">status != 'draft'</code>
            </div>
            <div class="p-3 flex items-center gap-4">
                <code class="text-violet-400 w-16">&gt; &lt;</code>
                <span class="text-[#888]">Comparison</span>
                <code class="text-[#666] ml-auto">views > 100</code>
            </div>
            <div class="p-3 flex items-center gap-4">
                <code class="text-violet-400 w-16">~</code>
                <span class="text-[#888]">Contains</span>
                <code class="text-[#666] ml-auto">title ~ 'hello'</code>
            </div>
            <div class="p-3 flex items-center gap-4">
                <code class="text-violet-400 w-16">&amp;&amp;</code>
                <span class="text-[#888]">AND</span>
                <code class="text-[#666] ml-auto">a = 1 && b = 2</code>
            </div>
            <div class="p-3 flex items-center gap-4">
                <code class="text-violet-400 w-16">||</code>
                <span class="text-[#888]">OR</span>
                <code class="text-[#666] ml-auto">a = 1 || b = 2</code>
            </div>
        </div>
    </section>

    <!-- What's Next -->
    <section class="border-t border-white/10 pt-12 space-y-4">
        <h2 class="text-xl font-semibold text-white">What's next?</h2>
        <div class="grid sm:grid-cols-2 gap-4">
            <a href="/docs/collections" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-cyan-400 font-medium mb-1">Collections</div>
                <p class="text-sm text-[#888]">Define schemas, manage records, and use collections in templates.</p>
            </a>
            <a href="/docs/endpoints" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-pink-400 font-medium mb-1">Endpoints</div>
                <p class="text-sm text-[#888]">Write custom API logic with serverless Lua scripts.</p>
            </a>
            <a href="/docs/templates" class="border border-white/10 rounded-lg p-5 hover:border-white/20 hover:bg-white/[0.02] transition-all">
                <div class="text-emerald-400 font-medium mb-1">Templates</div>
                <p class="text-sm text-[#888]">Use template functions to display collection data on your pages.</p>
            </a>
        </div>
    </section>
</article>
{{end}}