{% extends "plants/base.html" %}
{% block title %}Plants — BloomBase{% endblock %}
{% block content %}
<div class="mb-3">
    <input
        type="search"
        name="q"
        value="{{ q }}"
        class="form-control"
        placeholder="🔍 Search plants..."
        hx-get="{% url 'plant_list' %}"
        hx-trigger="input changed delay:300ms"
        hx-target="#plant-list"
        hx-swap="innerHTML"
    >
</div>

<div class="btn-group w-100 mb-3" role="group">
    <a href="{% url 'plant_list' %}" class="btn btn-sm {% if not filter %}btn-success{% else %}btn-outline-success{% endif %}">All</a>
    <a href="{% url 'plant_list' %}?filter=indoor" class="btn btn-sm {% if filter == 'indoor' %}btn-success{% else %}btn-outline-success{% endif %}">Indoor</a>
    <a href="{% url 'plant_list' %}?filter=outdoor" class="btn btn-sm {% if filter == 'outdoor' %}btn-success{% else %}btn-outline-success{% endif %}">Outdoor</a>
</div>

<div id="plant-list">
    {% include "plants/partials/plant_list_results.html" %}
</div>
{% endblock %}