templates/search.html

{% extends "base.html" %}
{% block title %}Search - MemoryBot{% endblock %}
{% block body %}
<div class="min-h-full flex">
    {% include "partials/sidebar.html" %}
    <div class="flex-1" style="margin-left:256px;padding:32px;">
        <div style="max-width:900px;margin:0 auto;">
            <div class="slide-up" style="margin-bottom:32px;">
                <h1 style="font-size:28px;font-weight:800;color:var(--text-primary);margin:0;">Search Memories</h1>
                <p style="margin-top:6px;color:var(--text-secondary);font-size:15px;">Search through all uploaded memories using AI-powered search</p>
            </div>

            <form method="POST" action="/search" style="margin-bottom:32px;">
                <div style="display:flex;gap:12px;">
                    <div style="flex:1;position:relative;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position:absolute;left:16px;top:50%;transform:translateY(-50%);"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                        <input type="text" name="query" value="{{ query }}" placeholder="Search memories..." class="input-field" style="padding:14px 16px 14px 44px;font-size:15px;border-radius:14px;">
                    </div>
                    <select name="profile_id" class="select-field" style="width:200px;padding:14px 16px;border-radius:14px;">
                        <option value="">All profiles</option>
                        {% for p in profiles %}
                        <option value="{{ p.id }}" {% if selected_profile is defined and selected_profile == p.id %}selected{% endif %}>{{ p.name }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="btn-primary" style="padding:14px 28px;border-radius:14px;font-size:15px;">
                        Search
                    </button>
                </div>
            </form>

            {% if results %}
            <p style="font-size:13px;color:var(--text-muted);margin-bottom:16px;">Found <strong style="color:var(--accent-purple);">{{ results|length }}</strong> result{{ 's' if results|length != 1 }}</p>
            <div style="display:flex;flex-direction:column;gap:12px;">
                {% for r in results %}
                <div class="card slide-up" style="padding:20px;">
                    <div style="display:flex;align-items:flex-start;gap:16px;">
                        <div style="width:4px;min-height:40px;border-radius:2px;background:var(--gradient-primary);flex-shrink:0;"></div>
                        <div style="flex:1;">
                            {% if r.profile_name is defined %}
                            <span class="badge badge-purple" style="margin-bottom:8px;">{{ r.profile_name }}</span>
                            {% endif %}
                            <p style="color:var(--text-primary);font-size:14px;line-height:1.6;margin:0;">{{ r.content }}</p>
                            <div style="display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--text-muted);">
                                <span style="display:flex;align-items:center;gap:4px;">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                    Relevance: {{ (r.score * 100)|round(1) }}%
                                </span>
                                <span>Chunk {{ r.chunk_index + 1 }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% elif query %}
            <div class="card" style="padding:64px 32px;text-align:center;">
                <div class="empty-state-icon" style="margin:0 auto 16px;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                </div>
                <p style="color:var(--text-secondary);font-size:14px;margin:0;">No results found for "<strong style="color:var(--text-primary);">{{ query }}</strong>". Try different keywords or upload more files.</p>
            </div>
            {% else %}
            <div class="card" style="padding:64px 32px;text-align:center;">
                <div class="empty-state-icon" style="margin:0 auto 16px;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent-purple)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                </div>
                <h3 style="font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 8px;">Search Your Memories</h3>
                <p style="color:var(--text-secondary);font-size:14px;margin:0;">Enter a query above to search through all uploaded memories</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}