{# plants/templates/plants/partials/plant_list_results.html #}
{% for plant in plants %}
<a href="{% url 'plant_detail' plant.pk %}"
   class="flex items-center gap-3 bg-white rounded-2xl px-3 py-2.5 shadow-sm mb-2.5 no-underline block">
  {% if plant.species and plant.species.api_image_url %}
  <img src="{{ plant.species.api_image_url }}" width="52" height="52"
       class="rounded-xl flex-shrink-0" style="object-fit:cover;">
  {% elif plant.thumbnail_url %}
  <img src="{{ plant.thumbnail_url }}" width="52" height="52"
       class="rounded-xl flex-shrink-0" style="object-fit:cover;">
  {% else %}
  <div class="w-[52px] h-[52px] bg-[#D8F3DC] rounded-xl flex-shrink-0 flex items-center justify-center text-2xl">🌿</div>
  {% endif %}
  <div class="flex-1 min-w-0">
    <div class="font-nunito font-extrabold text-[14px] text-[#1A1208] truncate">{{ plant.name }}</div>
    {% if plant.location %}
    <span class="inline-block font-nunito text-[10px] font-bold px-2 py-0.5 rounded-full bg-[#FFF3E8] text-[#F07040] mt-0.5">
      {{ plant.location.name }}
    </span>
    {% endif %}
  </div>
  <span class="text-[#D0C0B0] font-bold text-lg">›</span>
</a>
{% empty %}
<p class="font-nunito text-sm text-[#B0A090] text-center py-8">No plants found.</p>
{% endfor %}