{{define "obsidian-notes"}}
{{if .Notes}}
<section class="section-spacing">
    <!-- Section Header with Brand Color -->
    <div class="flex items-center gap-3 mb-6">
        <div class="w-1 h-8 bg-obsidian rounded"></div>
        <h2 class="text-2xl font-bold text-gray-900">Recent Notes</h2>
    </div>

    <div class="card-grid">
        {{range .Notes}}
        <div class="note-card">
            <h3 class="font-semibold text-gray-900 mb-2">{{.Title}}</h3>
            <p class="text-sm text-gray-600 mb-3 line-clamp-3">{{.Content}}</p>
            <div class="flex justify-between items-center text-xs">
                <span class="text-gray-500">{{.Modified.Format "Jan 2, 3:04 PM"}}</span>
                {{if .Tags}}
                <div class="flex gap-1 flex-wrap">
                    {{range .Tags}}
                    <span class="badge bg-purple-100 text-purple-800">#{{.}}</span>
                    {{end}}
                </div>
                {{end}}
            </div>
        </div>
        {{end}}
    </div>
</section>
{{end}}
{{end}}