{% extends "plants/base.html" %}
{% block title %}Plants — BloomBase{% endblock %}
{% block content %}
<div class="d-grid mb-3">
    <a href="{% url 'plant_add' %}" class="btn btn-success">+ Add a plant</a>
</div>
<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="d-flex align-items-center gap-2 mb-3">
    <div class="btn-group flex-wrap flex-grow-1" role="group">
        <a href="{% url 'plant_list' %}" class="btn btn-sm {% if not location_filter %}btn-success{% else %}btn-outline-success{% endif %}">All</a>
        {% for loc in locations %}
        <a href="{% url 'plant_list' %}?location={{ loc.pk }}" class="btn btn-sm {% if location_filter == loc.pk|stringformat:'s' %}btn-success{% else %}btn-outline-success{% endif %}">{{ loc.name }}</a>
        {% endfor %}
    </div>
    <a href="{% url 'location_list' %}" class="btn btn-sm btn-outline-secondary flex-shrink-0" title="Manage areas">⚙️</a>
</div>

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