only show card footer if there are reactions

templates/card.html

@@ -25,16 +25,16 @@
       <p class="card-text">{{ gallery.description | default('') }}</p>
     </div>
 
-    <div class="card-footer text-body-secondary text-end">
     {% if gallery.reactions %}
+    <div class="card-footer text-body-secondary text-end">
       {% for reaction in gallery.reactions %}
       {# TODO: limit total number of reactions shown #}
-      <span class="badge rounded-pill">
-        <i class="bi-{{ reaction }}" style="color: black;"></i>
+      <span class="badge rounded-pill text-body">
+        <i class="bi-{{ reaction }}"></i>
       </span>
       {% endfor %}
-      {% endif %}
     </div>
+    {% endif %}
 
   </div>
 </div>

test.py

@@ -21,7 +21,7 @@ template_vars = {
             "bootstrap": {
                 "src": "./templates/example/bootstrap.bundle.min.js",
             },
-            "theme": {"src": ".templates/example/color-modes.js"},
+            "theme": {"src": "./templates/example/color-modes.js"},
         },
         "css": {
             "bootstrap": {"src": "./templates/example/bootstrap.min.css"},
@@ -73,7 +73,12 @@ template_vars = {
             "src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
             "description": "An arctic fox :3",
             "title": "fox",
-            "reactions": ["heart", "backpack3", "balloon", "bag-x"],
+            "reactions": [],
+        },
+        {
+            "src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
+            "description": "An arctic fox :3",
+            "title": "fox",
         },
     ],
 }