.

cards/templates/cards/list.html

@@ -17,6 +17,58 @@
 
   <div id="htmx-form"></div>
 
+  <form id="cards-filter" method="get" hx-get="{% url 'cards:list' %}" hx-target="#cards-list" hx-swap="innerHTML" hx-trigger="change delay:250ms">
+    <div class="field has-addons">
+      <div class="control">
+        <input class="input" type="search" name="q" placeholder="Search name…" value="{{ current_q }}">
+      </div>
+      <div class="control">
+        <div class="select">
+          <select name="era">
+            <option value="all" {% if current_era == 'all' %}selected{% endif %}>All eras</option>
+            {% for code,label in eras %}
+              <option value="{{ code }}" {% if current_era == code %}selected{% endif %}>{{ label }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+      <div class="control">
+        <div class="select">
+          <select name="diet">
+            <option value="all" {% if current_diet == 'all' %}selected{% endif %}>All diets</option>
+            {% for code,label in diets %}
+              <option value="{{ code }}" {% if current_diet == code %}selected{% endif %}>{{ label }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+      <div class="control">
+        <div class="select">
+          <select name="sort">
+            <option value="" {% if not current_sort %}selected{% endif %}>Sort (default)</option>
+            <option value="name" {% if current_sort == 'name' %}selected{% endif %}>Name</option>
+            <option value="created" {% if current_sort == 'created' %}selected{% endif %}>Newest</option>
+            <option value="speed" {% if current_sort == 'speed' %}selected{% endif %}>Speed</option>
+            <option value="weight" {% if current_sort == 'weight' %}selected{% endif %}>Weight</option>
+            <option value="height" {% if current_sort == 'height' %}selected{% endif %}>Height</option>
+            <option value="intelligence" {% if current_sort == 'intelligence' %}selected{% endif %}>Intelligence</option>
+          </select>
+        </div>
+      </div>
+      <div class="control">
+        <div class="select">
+          <select name="order">
+            <option value="asc" {% if current_order == 'asc' %}selected{% endif %}>Asc</option>
+            <option value="desc" {% if current_order == 'desc' %}selected{% endif %}>Desc</option>
+          </select>
+        </div>
+      </div>
+      <div class="control">
+        <button class="button is-info" type="submit">Apply</button>
+      </div>
+    </div>
+  </form>
+
   <div id="cards-list">
     {% include 'cards/_cards_list.html' %}
   </div>

cards/views.py

@@ -13,11 +13,57 @@ def is_htmx(request):
 
 
 def card_list(request):
-    cards = Dinosaur.objects.all()
+    # Basic filtering/search/sort via GET params so the UI can request
+    # updated lists using HTMX or a regular browser GET.
+    qs = Dinosaur.objects.all()
+
+    # Search by name
+    q = (request.GET.get('q') or '').strip()
+    if q:
+        qs = qs.filter(name__icontains=q)
+
+    # Filter by era and diet
+    era = request.GET.get('era')
+    if era and era != 'all':
+        qs = qs.filter(era=era)
+    diet = request.GET.get('diet')
+    if diet and diet != 'all':
+        qs = qs.filter(diet=diet)
+
+    # Sorting: allow a small whitelist of fields to avoid unexpected orders
+    sort_map = {
+        'name': 'name',
+        'created': 'created_at',
+        'speed': 'speed',
+        'weight': 'weight',
+        'height': 'height',
+        'intelligence': 'intelligence',
+    }
+    sort_by = request.GET.get('sort')
+    order = request.GET.get('order', 'asc')
+    if sort_by in sort_map:
+        field = sort_map[sort_by]
+        if order == 'desc':
+            field = '-' + field
+        qs = qs.order_by(field)
+
     background = BackgroundImage.get_active() if BackgroundImage.objects.exists() else None
+
+    context = {
+        'cards': qs,
+        'background': background,
+        'eras': Dinosaur.ERA_CHOICES,
+        'diets': Dinosaur.DIET_CHOICES,
+        'current_q': q,
+        'current_era': era or 'all',
+        'current_diet': diet or 'all',
+        'current_sort': sort_by or '',
+        'current_order': order,
+    }
+
     if is_htmx(request):
-        return render(request, 'cards/_cards_list.html', {'cards': cards, 'background': background})
-    return render(request, 'cards/list.html', {'cards': cards, 'background': background})
+        return render(request, 'cards/_cards_list.html', context)
+    return render(request, 'cards/list.html', context)
 
 
 def card_create(request):