From 129dfdd7c85b7f84b1e4824d3018d06a8dc41f9e Mon Sep 17 00:00:00 2001
From: c0de <c0de@c0de.dev>
Date: Fri, 29 Dec 2023 18:34:55 -0600
Subject: [PATCH] format the html

---
 templates/card.html | 121 +++++++++++++++++++-------------------------
 1 file changed, 52 insertions(+), 69 deletions(-)

diff --git a/templates/card.html b/templates/card.html
index 5b60734..0d4f792 100644
--- a/templates/card.html
+++ b/templates/card.html
@@ -1,75 +1,58 @@
-<div class="col">
-  <div class="card shadow-sm">
-    {% if this.title and this.title|length >= 1 and not this.headline %}
-    <div class="card-header position-relative">
-      {{ this.title }}
-      <a
-        href="#"
-        class="btn btn-link float-end"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        data-bs-title="Add a reaction"
-      >
-        <i class="bi-heart-fill position-absolute translate-middle top-50 end-1 text-danger"></i>
-      </a>
-    </div>
-    {% endif %}
+<div class="card shadow-sm">
 
-    <img
-      class="card-image-top"
-      src="{{ this.src }}"
-      alt="{{ this.alt_text if this.alt_text else this.title }}"
-    />
+{% if this.headline and this.headline|length >= 1 and not this.title %}
+  <div class="card-header position-relative">
 
-    {% if this.description and this.description|length >= 1 %}
-    <div class="card-body position-relative">
-      {% if this.headline and this.headline|length >= 1 %}
-      <h5 class="card-title">{{ this.headline }}</h5>
-      <a
-        href="#"
-        class="btn btn-link position-absolute bottom-1 end-0"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        data-bs-title="Add a reaction"
-      >
-        <i class="bi-heart-fill text-danger"></i>
-      </a>
-      {% endif %}
-      <p class="card-text">{{ this.description }}</p>
-    </div>
-    {% endif %}
+  {{ this.headline }}
 
-    {% if this.reactions and gallery.max_reactions_per_card|int >= 1 %}
-    <div class="card-footer text-body-secondary text-end">
-
-      {% set reaction_iterations = namespace(value=0) %}
-      {% for reaction, reaction_count in this.reactions|dictsort(by="value") %}
-        {# Don't render reaction if we've reached the max number, or its counter is 0 (or lower) #}
-        {% if reaction_iterations.value|int != gallery.max_reactions_per_card|int and reaction_count|int >= 1 %}
-
-      <button class="btn btn-link btn-sm disabled text-body position-relative">
-        {# TODO: Enable the button, and make clicking it toggle adding/removing that reaction to the counter, also color reaction button #}
-        <i class="bi-{{ reaction }}"></i>
-
-          {# Only show counter if more than 2 people gave the same reaction #}
-          {% if reaction_count|int >= 2 %}
-        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-body-inverted text-body-inverted">
-            {# Don't render reaction counts larger than 1000 #}
-            {{ reaction_count if reaction_count <= 999 else '1K+' }}
-          <span class="visually-hidden">
-            {{ reaction_count }} people reacted with {{ reaction }}
-          </span>
-        </span>
-          {% endif %}
-
-      </button>
-
-          {% set reaction_iterations.value = reaction_iterations.value + 1 %}
-        {% endif %}
-      {% endfor %}
-      {% set reaction_iterations = none %}
-    </div>
-    {% endif %}
+  {% if gallery.reactions_enabled|default(False) %}
+    <a href="#" class="btn btn-link float-end">
+      <i class="bi-heart-fill position-absolute translate-middle top-50 end-1 text-danger"></i>
+    </a>
+  {% endif %}
 
   </div>
+{% endif %}
+
+  <img
+    class="card-image-top"
+    src="{{ this.src }}"
+    alt="{{ this.alt_text if this.alt_text else this.title }}"
+  />
+
+{% if this.description and this.description|length >= 1 %}
+  <div class="card-body position-relative">
+
+  {% if this.title and this.title|length >= 1 %}
+    <h5 class="card-title">{{ this.title }}</h5>
+
+    {% if this.subtitle and this.subtitle|length >= 1 %}
+    <h6 class="card-subtitle mb-2 text-body-secondary">{{ this.subtitle }}</h6>
+    {% endif %}
+
+    {% if gallery.reactions_enabled|default(False) %}
+    <a href="#" class="btn btn-link position-absolute bottom-1 end-0">
+      <i class="bi-heart-fill text-danger"></i>
+    </a>
+    {% endif %}
+  {% endif %}
+
+    <p class="card-text">{{ this.description }}</p>
+
+  {% if this.subtext and this.subtext|length >= 1 %}
+    <p class="card-text">
+      <small class="text-body-secondary">
+        {{ this.subtext }}
+      </small>
+    </p>
+  {% endif %}
+
+  </div>
+{% endif %}
+
+{# Don't render reaction section if disabled or max reactions are zero (or less) #}
+{% if gallery.reactions_enabled|default(False) or gallery.max_reactions_per_card|int <= 0 %}
+  {% include 'card_reaction_section.html' %}
+{% endif %}
+
 </div>