{% if empty %}
<!-- Empty state: no query yet — show suggested queries -->
<div class="empty-state">
    <div class="empty-icon">🧠</div>
    <h3>Search your brain</h3>
    <p class="text-muted">Find conversations, ideas, and insights across all your data.</p>
    <div class="suggested-queries">
        <p><small><strong>Try searching for:</strong></small></p>
        <button class="outline suggested-query" onclick="suggestedSearch(this)">architecture decisions</button>
        <button class="outline suggested-query" onclick="suggestedSearch(this)">what was I thinking about</button>
        <button class="outline suggested-query" onclick="suggestedSearch(this)">open questions</button>
        <button class="outline suggested-query" onclick="suggestedSearch(this)">project ideas</button>
        <button class="outline suggested-query" onclick="suggestedSearch(this)">debugging sessions</button>
    </div>
</div>
{% elif error is defined and error %}
<article>
    <header>⚠️ Search Error</header>
    <p>{{ error }}</p>
</article>
{% elif results|length == 0 %}
<article class="empty-state-no-results">
    <div class="empty-icon">🔍</div>
    <p>No results found for "<strong>{{ query }}</strong>"</p>
    <p><small class="text-muted">{{ mode }} search · {{ duration_ms }}ms</small></p>
    <p><small>Try a different search mode or broader terms.</small></p>
</article>
{% else %}
<div class="search-meta">
    <small>
        <strong>{{ total_results }} result{{ 's' if total_results != 1 else '' }}</strong>
        for "<strong>{{ query }}</strong>"
        <span class="search-speed" style="opacity: 0.5; font-size: 0.8em;">{{ duration_ms }}ms</span>
    </small>
</div>

{% for result in results %}
<article class="search-result">
    <header>
        <div class="result-header">
            {% if result.similarity is not none %}
            <span class="match-badge {{ result.match_class }}">
                {{ result.similarity_dot }} {{ result.match_label }}
                <small>({{ "%.0f"|format(result.similarity * 100) }}%)</small>
            </span>
            {% endif %}
            <span class="result-date">{{ result.date }}</span>
            {% if result.source %}
            <span class="result-source">
                {% set source_names = {"claude-code": "Claude Code", "clawdbot": "Clawdbot", "chatgpt": "ChatGPT", "cursor": "Cursor", "gemini-cli": "Gemini CLI", "claude-desktop": "Claude Desktop"} %}
                <kbd>{{ source_names.get(result.source, result.source) }}</kbd>
            </span>
            {% endif %}
            {% if result.role %}
            <span class="result-role">
                <small>{{ result.role }}</small>
            </span>
            {% endif %}
        </div>
        <strong>{{ result.conversation_title }}</strong>
    </header>

    {% if result.type == 'summary' %}
    <!-- Summary result: show extra metadata -->
    <p>{{ result.content_preview }}</p>
    {% if result.domain %}
    <small>
        <strong>Domain:</strong> {{ result.domain }}
        {% if result.importance %} · {{ result.importance }}{% endif %}
        {% if result.thinking_stage %} · {{ result.thinking_stage }}{% endif %}
    </small>
    {% endif %}
    {% if result.concepts %}
    <p><small><strong>Concepts:</strong> {{ result.concepts|join(', ') }}</small></p>
    {% endif %}
    {% if result.open_questions and result.open_questions[0] != 'none identified' %}
    <details>
        <summary><small>Open Questions ({{ result.open_questions|length }})</small></summary>
        <ul>
        {% for q in result.open_questions %}
            <li><small>{{ q }}</small></li>
        {% endfor %}
        </ul>
    </details>
    {% endif %}
    {% if result.decisions and result.decisions[0] != 'none identified' %}
    <details>
        <summary><small>Decisions ({{ result.decisions|length }})</small></summary>
        <ul>
        {% for d in result.decisions %}
            <li><small>{{ d }}</small></li>
        {% endfor %}
        </ul>
    </details>
    {% endif %}
    {% else %}
    <!-- Message result -->
    <p>{{ result.content_preview }}</p>
    {% endif %}

    <footer>
        <small>Conv: <code>{{ result.conversation_id[:12] }}...</code></small>
        <a href="/conversation/{{ result.conversation_id }}?highlight={{ query }}"
           role="button" class="outline secondary" style="padding: 0.25rem 0.75rem; font-size: 0.8rem;">
            View Full Conversation →
        </a>
    </footer>
</article>
{% endfor %}

{% if has_more is defined and has_more %}
<button class="outline"
        hx-get="/api/search?q={{ query }}&mode={{ mode }}&offset={{ offset + limit }}&limit={{ limit }}"
        hx-target="this"
        hx-swap="outerHTML">
    Load More ↓
</button>
{% endif %}
{% endif %}