{% if results %}
<div class="mono text-xs text-faint mb-4">{{ results|length }} results for &ldquo;{{ query }}&rdquo;</div>
{% for sym in results %}
<div class="card card-glow mb-2" style="padding:0;overflow:hidden">
    <div style="padding:12px 16px;cursor:pointer"
         onclick="var s=document.getElementById('sym-src-{{ loop.index }}'),a=document.getElementById('sym-arr-{{ loop.index }}');if(s.classList.contains('open')){s.classList.remove('open');a.classList.remove('open')}else{s.classList.add('open');a.classList.add('open');if(!s.dataset.loaded){s.dataset.loaded='1';htmx.ajax('GET','/htmx/symbol?id={{ sym.symbol_id|urlencode }}','#sym-src-{{ loop.index }}')}}"
    >
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <span class="badge badge-{{ sym.kind }}">{{ sym.kind }}</span>
                <span class="mono text-white" style="font-weight:600;font-size:13px">{{ sym.name }}</span>
                {% if sym.language %}
                <span class="mono text-xs text-faint">{{ sym.language }}</span>
                {% endif %}
                {% if sym.repo %}
                <span class="mono text-xs" style="color:var(--purple);opacity:0.7">{{ sym.repo }}</span>
                {% endif %}
            </div>
            <span id="sym-arr-{{ loop.index }}" class="sym-expand">&#9654;</span>
        </div>
        {% if sym.signature %}
        <pre class="code-block" style="margin:8px 0 0;padding:8px 12px;border:none;background:var(--bg-subtle)"><code class="language-{% if sym.language == 'python' %}python{% elif sym.language == 'typescript' or sym.language == 'tsx' %}typescript{% elif sym.language == 'javascript' %}javascript{% elif sym.language == 'go' %}go{% elif sym.language == 'rust' %}rust{% elif sym.language == 'java' %}java{% elif sym.language == 'c' %}c{% elif sym.language == 'cpp' %}cpp{% elif sym.language == 'ruby' %}ruby{% elif sym.language == 'c_sharp' %}csharp{% else %}none{% endif %}">{{ sym.signature[:200] }}</code></pre>
        {% endif %}
        <div class="flex items-center gap-3 mt-2">
            <span class="mono text-xs text-faint">{{ sym.file }}:{{ sym.line }}</span>
        </div>
    </div>
    <div id="sym-src-{{ loop.index }}" class="sym-source"></div>
</div>
{% endfor %}
{% elif query %}
<div class="empty-state">
    <div style="font-size:20px;margin-bottom:8px;opacity:0.3">&#8709;</div>
    No results for &ldquo;{{ query }}&rdquo;
</div>
{% endif %}
<script>if(typeof Prism!=='undefined')Prism.highlightAll();</script>