{% for plant in plants %}
<a href="{% url 'plant_detail' plant.pk %}" class="text-decoration-none">
    <div class="card mb-2">
        <div class="card-body d-flex align-items-center gap-3 py-2">
            {% if plant.species and plant.species.api_image_url %}
            <img src="{{ plant.species.api_image_url }}" width="48" height="48" class="rounded" style="object-fit:cover; flex-shrink:0;">
            {% elif plant.thumbnail_url %}
            <img src="{{ plant.thumbnail_url }}" width="48" height="48" class="rounded" style="object-fit:cover; flex-shrink:0;">
            {% else %}
            <div style="width:48px; height:48px; background:#d8f3dc; border-radius:.375rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;">🌿</div>
            {% endif %}
            <div>
                <div class="fw-semibold" style="color:#1b4332;">{{ plant.name }}</div>
                <small class="text-muted">
                    {{ plant.location }}
                </small>
            </div>
        </div>
    </div>
</a>
{% empty %}
<p class="text-muted text-center mt-4">No plants found.</p>
{% endfor %}