From 39de3983f137e59ec6c89e5cfdaebbd825dcc859 Mon Sep 17 00:00:00 2001
From: Stephan Kerkman <stephan@kerkman.io>
Date: Thu, 28 May 2026 21:56:09 +0200
Subject: [PATCH] feat: add card gallery partial and plant card page templates

---
 .../plants/partials/card_gallery.html         | 38 ++++++++++++++++++-
 plants/templates/plants/plant_card.html       |  7 +++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/plants/templates/plants/partials/card_gallery.html b/plants/templates/plants/partials/card_gallery.html
index 4e9c7ac..585d5b8 100644
--- a/plants/templates/plants/partials/card_gallery.html
+++ b/plants/templates/plants/partials/card_gallery.html
@@ -1 +1,37 @@
-<div class="mb-3"></div>
+<div class="mb-3">
+    {% with card_photos=plant.card_photos.all %}
+    {% if card_photos %}
+    <div class="d-flex flex-wrap gap-2 mb-2">
+        {% for photo in card_photos %}
+        <div>
+            <img src="{{ photo.image.url }}" width="80" height="80"
+                 class="rounded" style="object-fit:cover;" alt="">
+            <div class="d-flex gap-1 mt-1">
+                <form method="post" action="{% url 'delete_card_photo' photo.pk %}"
+                      hx-post="{% url 'delete_card_photo' photo.pk %}"
+                      hx-target="#card-gallery" hx-swap="outerHTML">
+                    {% csrf_token %}
+                    <button type="submit" class="btn btn-outline-danger btn-sm py-0 px-1"
+                            style="font-size:.7rem;" title="Delete">✕</button>
+                </form>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+    {% endwith %}
+
+    {% if plant.card_photos.count < 3 %}
+    <form method="post" action="{% url 'upload_card_photo' plant.pk %}" enctype="multipart/form-data"
+          hx-post="{% url 'upload_card_photo' plant.pk %}" hx-target="#card-gallery" hx-swap="outerHTML"
+          hx-encoding="multipart/form-data">
+        {% csrf_token %}
+        <div class="d-flex gap-2 align-items-center">
+            <input type="file" name="image" accept="image/*" capture="environment"
+                   class="form-control form-control-sm" style="max-width:220px;">
+            <button type="submit" class="btn btn-sm btn-outline-secondary">Upload</button>
+        </div>
+    </form>
+    {% endif %}
+    <small class="text-muted">Up to 3 photos — front &amp; back of the label</small>
+</div>
diff --git a/plants/templates/plants/plant_card.html b/plants/templates/plants/plant_card.html
index 5eb3d04..3a97e4e 100644
--- a/plants/templates/plants/plant_card.html
+++ b/plants/templates/plants/plant_card.html
@@ -1,9 +1,14 @@
 {% extends "plants/base.html" %}
 {% block title %}Plant card — {{ plant.name }} — PlantDB{% endblock %}
 {% block content %}
+
 <div class="d-flex align-items-center gap-2 mb-3">
     <a href="{% url 'plant_detail' plant.pk %}" class="btn btn-sm btn-outline-secondary">← {{ plant.name }}</a>
     <h5 class="mb-0">Plant card</h5>
 </div>
-<div id="card-gallery"></div>
+
+<div id="card-gallery">
+    {% include "plants/partials/card_gallery.html" %}
+</div>
+
 {% endblock %}