{{define "trello-board"}}
<div class="board-card">
    <!-- Board Header -->
    <div class="flex items-center justify-between mb-4">
        <h3 class="font-bold text-lg text-gray-900">{{.Name}}</h3>
    </div>

    <!-- Add Card Form (Collapsible) -->
    {{if .Lists}}
    <details class="mb-4">
        <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors">
            + Add Card
        </summary>
        <form hx-post="/cards"
              hx-target="closest .board-card"
              hx-swap="outerHTML"
              class="mt-3 space-y-2 bg-white/40 p-3 rounded-lg">
            <input type="hidden" name="board_id" value="{{.ID}}">

            <select name="list_id"
                    required
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                <option value="">Select list...</option>
                {{range .Lists}}
                <option value="{{.ID}}">{{.Name}}</option>
                {{end}}
            </select>

            <input type="text"
                   name="name"
                   placeholder="Card title"
                   required
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">

            <button type="submit"
                    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                Add Card
            </button>
        </form>
    </details>
    {{end}}

    <!-- Cards List -->
    <div class="space-y-3 max-h-96 overflow-y-auto scrollbar-thin">
        {{range .Cards}}
        <div class="trello-card-item">
            <div class="flex items-start gap-2">
                <!-- Complete Checkbox -->
                <input type="checkbox"
                       hx-post="/cards/complete"
                       hx-vals='{"card_id": "{{.ID}}"}'
                       hx-target="closest .trello-card-item"
                       hx-swap="outerHTML"
                       class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">

                <div class="flex-1">
                    <p class="font-medium text-sm text-gray-900 mb-2">{{.Name}}</p>
                    <div class="flex flex-wrap gap-2 items-center">
                        {{if .ListName}}
                        <span class="badge bg-gray-100 text-gray-700">
                            {{.ListName}}
                        </span>
                        {{end}}
                        {{if .DueDate}}
                        <span class="badge bg-red-100 text-red-800">
                            Due: {{.DueDate.Format "Jan 2"}}
                        </span>
                        {{end}}
                        {{if .URL}}
                        <a href="{{.URL}}" target="_blank"
                           class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors">
                            View →
                        </a>
                        {{end}}
                    </div>
                </div>
            </div>
        </div>
        {{end}}
    </div>
</div>
{{end}}