{% extends "layout.html" %}

{% block title %}{{ console_display_name() }} - Memory{% endblock %}
{% block header_title %}{{ console_display_name() }} - Memory{% endblock %}

{% block content %}
<div class="terminal-container webgate-page">
    <div class="webgate-header">
        <h2>Memory</h2>
        <p class="text-muted text-sm">Cross-session recall for the local owner. Search, or leave blank to browse the most recent.</p>
    </div>
    <form id="memory-search" class="webgate-search" onsubmit="return false;">
        <input id="memory-q" type="text" class="form-control" placeholder="Search recall…" autocomplete="off" />
        <button id="memory-go" type="submit" class="btn btn-primary">Search</button>
    </form>
    <div id="memory-results" class="webgate-list">
        <div class="loading">Loading…</div>
    </div>
</div>

<script>
(function () {
    const q = document.getElementById('memory-q');
    const out = document.getElementById('memory-results');
    async function load() {
        out.innerHTML = '<div class="loading">Loading…</div>';
        try {
            const params = new URLSearchParams({ q: q.value || '', limit: '20' });
            const res = await fetch('/api/webgate/memory?' + params.toString());
            const body = await res.json();
            const items = Array.isArray(body) ? body : (body.items || []);
            const mode = body.mode || (q.value ? 'search' : 'browse');
            if (!items.length) {
                out.innerHTML = '<div class="webgate-empty">' +
                    (mode === 'search' ? 'No matches.' : 'No memories yet.') + '</div>';
                return;
            }
            out.innerHTML = '';
            const caption = document.createElement('div');
            caption.className = 'text-muted text-sm webgate-caption';
            caption.textContent = mode === 'search'
                ? items.length + ' match' + (items.length === 1 ? '' : 'es') + ' for “' + q.value + '”'
                : 'showing the ' + items.length + ' most recent memories';
            out.appendChild(caption);
            items.forEach(function (t) {
                const div = document.createElement('div');
                div.className = 'webgate-item';
                div.textContent = t;
                out.appendChild(div);
            });
        } catch (e) {
            out.innerHTML = '<div class="webgate-empty">Could not load memory.</div>';
        }
    }
    document.getElementById('memory-search').addEventListener('submit', load);
    load();
})();
</script>
{% endblock %}