{{define "notes-tab"}}
<div class="space-y-10">
    <!-- Error Messages -->
    {{template "error-banner" .}}

    <!-- Search Bar -->
    <div class="mb-6">
        <input type="text"
               name="q"
               placeholder="Search notes..."
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-obsidian focus:border-transparent"
               hx-get="/tabs/notes"
               hx-trigger="keyup changed delay:300ms"
               hx-target="#notes-results"
               hx-indicator="#search-indicator">
    </div>

    <!-- Notes Results -->
    <div id="notes-results">
        {{if .Notes}}
            {{template "obsidian-notes" .}}
        {{else}}
            <div class="text-center py-20">
                <svg class="mx-auto h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                <h3 class="mt-6 text-xl font-medium text-gray-900">No notes found</h3>
                <p class="mt-2 text-sm text-gray-500 max-w-md mx-auto">
                    Configure your Obsidian vault path in the settings to see your recent notes displayed here.
                </p>
            </div>
        {{end}}
    </div>
</div>
{{end}}