{{template "main.html" .}}

{{define "title"}}Home{{end}}

{{define "content"}}
<div class="hero bg-base-100 rounded-box shadow-xl">
    <div class="hero-content text-center">
        <div class="max-w-md">
            <h1 class="text-5xl font-bold">{{home.Message}}</h1>
            <p class="py-6">This example app demonstrates the ReadySite application framework with DaisyUI and HTMX.</p>
            <button class="btn btn-primary" hx-get="/api/click" hx-target="#click-result" hx-swap="innerHTML">
                Click Me
            </button>
            <div id="click-result" class="mt-4"></div>
        </div>
    </div>
</div>

<h2 class="text-2xl font-bold mt-8 mb-4">Live Streaming</h2>
<p class="mb-4 opacity-70">Server-Sent Events with HTMX - the time updates every second via SSE.</p>
<div class="stats shadow mb-8">
    <div class="stat">
        <div class="stat-title">Server Time</div>
        <div class="stat-value" hx-ext="sse" sse-connect="/api/live" sse-swap="time">--:--:--</div>
        <div class="stat-desc">Live via SSE</div>
    </div>
</div>

<h2 class="text-2xl font-bold mt-8 mb-4">Interactive Island</h2>
<p class="mb-4 opacity-70">This React component is an "island" - interactive JavaScript within an HTMX-driven page.</p>
<div class="max-w-xs mx-auto">
    {{render "Counter" home.CounterProps}}
</div>

<h2 class="text-2xl font-bold mt-8 mb-4">Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    {{range $post := home.Posts}}
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">{{$post.Title}}</h2>
            <p>{{$post.Content}}</p>
            <div class="card-actions justify-end text-sm opacity-50">
                {{$post.CreatedAt.Format "Jan 2, 2006"}}
            </div>
        </div>
    </div>
    {{else}}
    <div class="col-span-full text-center py-8 opacity-50">
        <p>No posts yet.</p>
    </div>
    {{end}}
</div>
{{end}}