{% for result in vpc_results %}
<div class="list-group-item">
    <div class="d-flex align-items-center gap-2 mb-1">
        {% if result.thumbnail_url %}
        <img src="{{ result.thumbnail_url }}" width="40" height="40" class="rounded" style="object-fit:cover; flex-shrink:0;">
        {% else %}
        <div style="width:40px; height:40px; background:#e8f5e9; border-radius:.375rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;">🌱</div>
        {% endif %}
        <div class="flex-grow-1">
            <div class="fw-semibold">{{ result.common_name }}</div>
            {% if result.scientific_name %}<small class="text-muted fst-italic">{{ result.scientific_name }}</small>{% endif %}
        </div>
        <span class="badge" style="background:#3a86ff; font-size:.65rem;">VPC</span>
    </div>
    <form method="POST" action="{% url 'vpc_select' %}">
        {% csrf_token %}
        <input type="hidden" name="vpc_slug" value="{{ result.slug }}">
        <button type="submit" class="btn btn-sm btn-primary">Select →</button>
    </form>
</div>
{% endfor %}

{% if not vpc_results and not error and q %}
<p class="list-group-item text-muted small">No VPC results for "{{ q }}"</p>
{% endif %}