{% if error %}
<p class="list-group-item text-warning small">⚠️ Perenual: {{ error }}</p>
{% endif %}

{% for result in perenual_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 class="flex-grow-1">
            <div class="fw-semibold">{{ result.common_name }}</div>
            <small class="text-muted fst-italic">{{ result.scientific_name|join:", " }}</small>
        </div>
        <span class="badge bg-success" style="font-size:.65rem;">Perenual</span>
    </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>
{% endfor %}

{% 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 perenual_results and not vpc_results and not error and q %}
<p class="list-group-item text-muted">No results for "{{ q }}"</p>
{% endif %}