{% extends "base.html" %}
{% block title %}Memlord — Search{% endblock %}
{% block content %}

<div x-data="searchPage()" x-init="init()">

    <div class="page-header">
        <h1 class="page-title" x-text="query ? 'Search results' : 'Search'"></h1>
    </div>

    <p class="info-bar" x-show="query && !loading">
        <span x-text="results.length + ' result' + (results.length !== 1 ? 's' : '')"></span>
        for <strong x-text="'&quot;' + query + '&quot;'"></strong>
    </p>

    <div x-show="loading && query" style="text-align:center;padding:3rem;color:var(--text-4)">Searching…</div>

    <template x-for="m in results" :key="m.id">
        <div class="card" :class="m.memory_type ? 'card--' + m.memory_type : ''">
            <div class="card-header">
                <a :href="'/memory/' + m.workspace_id + '/' + m.id" style="flex:1;min-width:0;color:inherit;text-decoration:none;">
                    <div class="card-name" x-text="m.name"></div>
                    <div class="card-content" x-text="m.content.length > 280 ? m.content.slice(0, 280) + '…' : m.content"></div>
                </a>
                <span class="score-badge" x-text="m.rrf_score"></span>
            </div>
            <div class="card-meta">
                <template x-if="m.memory_type">
                    <span class="badge badge-type" :class="'badge-type--' + m.memory_type" x-text="m.memory_type"></span>
                </template>
                <template x-if="m.workspace_name">
                    <span class="badge" style="background:rgba(124,58,237,.15);color:#a78bfa;border:1px solid rgba(124,58,237,.3)" x-text="m.workspace_name"></span>
                </template>
                <template x-for="t in m.tags" :key="t">
                    <a :href="'/?tag=' + t" class="tag" x-text="'#' + t"></a>
                </template>
                <span class="card-date" x-text="fmtLocal(m.created_at)"></span>
            </div>
        </div>
    </template>

    <div x-show="!loading && query && results.length === 0" class="empty-state">
        <div class="empty-state-icon">🔍</div>
        <div class="empty-state-title">No results found</div>
        <div class="empty-state-desc">Try different keywords or a broader query.</div>
    </div>

    <div x-show="!query" class="empty-state">
        <div class="empty-state-icon">🔍</div>
        <div class="empty-state-title">Search your memories</div>
        <div class="empty-state-desc">Enter a query above to search using hybrid BM25 + semantic search.</div>
    </div>

</div>

<script>
function searchPage() {
    return {
        results: [],
        loading: false,
        query: '{{ query }}',

        async init() {
            if (!this.query) return;
            this.loading = true;
            const r = await fetch('/api/search?q=' + encodeURIComponent(this.query));
            const data = await r.json();
            this.results = data.results;
            this.loading = false;
        },
    };
}
</script>

{% endblock %}