.

cards/templates/cards/_card_item.html

@@ -7,7 +7,20 @@
     </div>
     <div class="title-band">{{ card.name }}</div>
     <div class="card-body">
-      <div class="subtitle is-7"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div>
+      <div class="subtitle is-7">
+        <strong>Era:</strong> {{ card.get_era_display }}
+        &nbsp;&mdash;&nbsp;
+        <strong>Diet:</strong>
+        {% if card.diet == 'herbivore' %}
+          <span class="tag is-light is-small" title="Herbivore"><span role="img" aria-label="Herbivore">🌿</span> Herbivore</span>
+        {% elif card.diet == 'carnivore' %}
+          <span class="tag is-light is-small" title="Carnivore"><span role="img" aria-label="Carnivore">🥩</span> Carnivore</span>
+        {% elif card.diet == 'omnivore' %}
+          <span class="tag is-light is-small" title="Omnivore"><span role="img" aria-label="Omnivore">🍽️</span> Omnivore</span>
+        {% else %}
+          {{ card.get_diet_display }}
+        {% endif %}
+      </div>
       {% if card.facts_list %}
         <ul class="fact-list is-size-7">
           {% for fact in card.facts_list|slice:":2" %}
@@ -52,7 +65,7 @@
       <div class="buttons" style="margin-top:0.6rem">
         <button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
         <button class="button is-small is-primary" hx-get="{% url 'cards:preview' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Preview</button>
-        
+
         <button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-target="#card-{{ card.pk }}" hx-swap="outerHTML">Delete</button>
       </div>
     </div>