{{define "planning-tab"}}
<div class="space-y-6">
    <!-- Google Calendar Events -->
    {{if .Events}}
    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-white/10">
        <h2 class="text-xl font-semibold mb-4 flex items-center gap-2 text-shadow-sm">
            <span>📅</span> Upcoming Events
        </h2>
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {{range .Events}}
            <a href="{{.HTMLLink}}" target="_blank" class="block bg-white/5 hover:bg-white/10 transition-colors rounded-lg p-3 border border-white/5 group">
                <div class="flex justify-between items-start mb-1">
                    <h3 class="font-medium text-white group-hover:text-primary-300 transition-colors truncate">{{.Summary}}</h3>
                    <span class="text-xs text-white/50 bg-white/10 px-1.5 py-0.5 rounded">{{.Start.Format "Jan 2"}}</span>
                </div>
                <div class="text-xs text-white/60 mb-1">
                    {{if eq (.Start.Format "15:04") "00:00"}}
                        All Day
                    {{else}}
                        {{.Start.Format "3:04 PM"}} - {{.End.Format "3:04 PM"}}
                    {{end}}
                </div>
                {{if .Description}}
                <p class="text-xs text-white/40 line-clamp-2">{{.Description}}</p>
                {{end}}
            </a>
            {{end}}
        </div>
    </div>
    {{end}}

    <!-- Trello Boards Section -->
    {{template "trello-boards" .}}
</div>
{{end}}