{# plants/templates/plants/plant_list.html #}
{% extends "plants/base.html" %}
{% block title %}Plants — BloomBase{% endblock %}
{% block content %}

<div class="px-4 pt-6">

  <!-- Header -->
  <div class="flex justify-between items-center mb-4">
    <h1 class="font-nunito font-black text-[22px] text-[#1A1208]">All Plants</h1>
    <a href="{% url 'plant_add' %}"
       class="bb-fab w-10 h-10 flex items-center justify-center rounded-full no-underline text-xl font-light">+</a>
  </div>

  <!-- Search -->
  <div class="flex items-center gap-2 bg-[#F5F0EA] rounded-full px-4 py-2.5 mb-3">
    <svg width="16" height="16" fill="none" stroke="#B0A090" stroke-width="2" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
    </svg>
    <input
      type="search"
      name="q"
      value="{{ q }}"
      placeholder="Search plants…"
      class="flex-1 bg-transparent font-nunito text-sm font-semibold text-[#1A1208]
             placeholder-[#C0B0A0] outline-none"
      hx-get="{% url 'plant_list' %}"
      hx-trigger="input changed delay:300ms"
      hx-target="#plant-list"
      hx-swap="innerHTML"
    >
  </div>

  <!-- Location filter chips -->
  <div class="flex gap-2 overflow-x-auto pb-2 mb-4 scrollbar-hide">
    <a href="{% url 'plant_list' %}"
       class="flex-shrink-0 px-4 py-1.5 rounded-full font-nunito font-bold text-[12px]
              {% if not location_filter %}bg-[#F07040] text-white{% else %}bg-white text-[#B0A090] border border-[#F0E4D4]{% endif %}
              no-underline">
      All
    </a>
    {% for loc in locations %}
    <a href="{% url 'plant_list' %}?location={{ loc.pk }}"
       class="flex-shrink-0 px-4 py-1.5 rounded-full font-nunito font-bold text-[12px]
              {% if location_filter == loc.pk|stringformat:'s' %}bg-[#F07040] text-white{% else %}bg-white text-[#B0A090] border border-[#F0E4D4]{% endif %}
              no-underline">
      {{ loc.name }}
    </a>
    {% endfor %}
  </div>

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

</div>
{% endblock %}