{% for result in results %}
<div class="list-group-item">
    <div class="d-flex align-items-center gap-2 mb-1">
        {% if result.default_image and result.default_image.thumbnail %}
        <img src="{{ result.default_image.thumbnail }}" width="40" height="40" class="rounded" style="object-fit:cover; flex-shrink:0;">
        {% else %}
        <div style="width:40px; height:40px; background:#d8f3dc; border-radius:.375rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;">🌿</div>
        {% endif %}
        <div>
            <div class="fw-semibold">{{ result.common_name }}</div>
            <small class="text-muted fst-italic">{{ result.scientific_name|join:", " }}</small>
        </div>
    </div>
    <form method="POST" action="{% url 'species_select' %}">
        {% csrf_token %}
        <input type="hidden" name="perenual_id" value="{{ result.id }}">
        <input type="hidden" name="common_name" value="{{ result.common_name }}">
        <input type="hidden" name="scientific_name" value="{{ result.scientific_name|join:', ' }}">
        <input type="hidden" name="watering" value="{{ result.watering|default:'' }}">
        <input type="hidden" name="sunlight" value="{{ result.sunlight|join:', ' }}">
        <input type="hidden" name="pruning_months" value="{{ result.pruning_month|join:', ' }}">
        <input type="hidden" name="api_image_url" value="{{ result.default_image.regular_url|default:'' }}">
        <button type="submit" class="btn btn-sm btn-success">Select →</button>
    </form>
</div>
{% empty %}
{% if error %}
<p class="list-group-item text-warning">⚠️ {{ error }}</p>
{% elif q %}
<p class="list-group-item text-muted">No results for "{{ q }}"</p>
{% endif %}
{% endfor %}