{{define "roomlist"}}
<div id="roomlist" hx-get="/" hx-trigger="sse:roomlistupdate" hx-target="#ancestor">
{{range .}}
<p>
    {{.ID}}
</p>
<div class="room-item mb-3 p-4 border rounded-lg hover:bg-gray-50 transition-colors">
    <div class="flex justify-between items-center">
        <div hx-get="/room-join?id={{.ID}}" hx-target="#ancestor" class="room-info">
            <div class="text-sm text-gray-500">
                Created {{.CreatedAt.Format "2 Jan 2006 15:04"}} by 
                <span class="font-medium text-gray-700">{{.CreatorName}}</span>
            </div>
            <div class="mt-1 flex items-center gap-3">
                <span class="px-2 py-1 text-xs font-medium rounded-full {{if .IsGameRunning}}bg-green-100 text-green-800{{else}}bg-gray-100 text-gray-600{{end}}">
                    {{if .IsRunning}}Game Active{{else}}Waiting Room{{end}}
                </span>
            </div>
        </div>
    </div>
</div>
{{end}}
</div>
{{end}}