58 lines
2.1 KiB
HTML
58 lines
2.1 KiB
HTML
{# 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 %}
|