docsys/templates/search.html

107 lines
6.3 KiB
HTML

{{template "base" .}}
{{define "content"}}
<div class="space-y-8">
<!-- Header -->
<div class="text-center max-w-2xl mx-auto">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Search Documents</h1>
<p class="text-gray-500 dark:text-gray-400">Find documents by content, title, vendor, or notes</p>
</div>
<!-- Search Form -->
<div class="max-w-2xl mx-auto">
<form action="/search" method="GET" class="relative">
<input type="search" name="q" value="{{.Query}}" placeholder="Search for anything..."
class="w-full pl-12 pr-4 py-4 text-lg rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-all"
autofocus>
<svg class="absolute left-4 top-4.5 h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<button type="submit" class="absolute right-3 top-3 px-4 py-2 bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium rounded-xl transition-colors">
Search
</button>
</form>
<!-- Quick filters -->
<div class="flex flex-wrap gap-2 mt-4 justify-center">
<span class="text-sm text-gray-500 dark:text-gray-400">Try:</span>
<a href="/search?q=duke+energy" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">duke energy</a>
<a href="/search?q=insurance" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">insurance</a>
<a href="/search?q=2026" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">2026</a>
</div>
</div>
<!-- Results -->
{{if .Query}}
<div class="max-w-4xl mx-auto">
{{if .Documents}}
<div class="flex items-center justify-between mb-4">
<p class="text-gray-600 dark:text-gray-400">
Found <span class="font-semibold text-gray-900 dark:text-white">{{len .Documents}}</span> result{{if ne (len .Documents) 1}}s{{end}} for "{{.Query}}"
</p>
<a href="/api/export?q={{.Query}}" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">Export results →</a>
</div>
<div class="space-y-4">
{{range .Documents}}
<a href="/document/{{.ID}}" class="block bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover:border-brand-300 dark:hover:border-brand-600 transition-all card-hover group">
<div class="flex items-start justify-between">
<div class="flex-1 min-w-0">
<div class="flex items-center space-x-2 mb-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300">
{{categoryIcon .Category}} {{title .Category}}
</span>
{{if .Type}}
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
{{title .Type}}
</span>
{{end}}
{{if .ProcessedAt}}
<span class="text-xs text-gray-500 dark:text-gray-400">📅 {{formatDateTime .ProcessedAt}}</span>
{{else if .Date}}
<span class="text-xs text-gray-500 dark:text-gray-400">{{formatDate .Date}}</span>
{{end}}
{{if .Score}}
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
🧠 {{printf "%.0f" (multiply .Score 100)}}% match
</span>
{{end}}
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors mb-1">{{.Title}}</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm line-clamp-2">{{truncate .Summary 200}}</p>
{{if .Vendor}}
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Vendor: {{.Vendor}}</p>
{{end}}
</div>
{{if .Amount}}
<div class="ml-4 text-right">
<span class="text-lg font-semibold text-gray-900 dark:text-white">{{.Amount}}</span>
</div>
{{end}}
</div>
</a>
{{end}}
</div>
{{else}}
<div class="text-center py-12">
<svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-1">No results found</h3>
<p class="text-gray-500 dark:text-gray-400">Try different keywords or check your spelling</p>
</div>
{{end}}
</div>
{{else}}
<!-- Empty state -->
<div class="max-w-2xl mx-auto text-center py-12">
<svg class="w-24 h-24 mx-auto text-gray-200 dark:text-gray-700 mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<h3 class="text-xl font-medium text-gray-900 dark:text-white mb-2">Search your documents</h3>
<p class="text-gray-500 dark:text-gray-400">Enter a search term above to find documents by content, title, vendor, or notes.</p>
</div>
{{end}}
</div>
{{end}}