From d293691f338a551caf6a96ba269e98c18d221183 Mon Sep 17 00:00:00 2001
From: Greg <gregman@livingonlinenow.com>
Date: Sun, 1 Jun 2025 18:21:57 +0200
Subject: [PATCH] feat: consumed yet or not added and recommended_by

---
 content/movies/inception.md  |  2 ++
 layouts/_default/single.html | 34 ++++++++++++++++++++++++++++++++++
 layouts/partials/card.html   | 22 ++++++++++++++++++++++
 3 files changed, 58 insertions(+)

diff --git a/content/movies/inception.md b/content/movies/inception.md
index 903cab2..77adc91 100644
--- a/content/movies/inception.md
+++ b/content/movies/inception.md
@@ -3,6 +3,8 @@ title: "Inception"
 category: "Movies"
 image: "/img/inception.jpg"
 rating: 4.8
+consumed: true
+recommended_by: "Christopher"
 description: "A mind-bending thriller about dream invasion."
 link:
   url: "#"
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index fefc694..5df5d16 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -37,6 +37,18 @@
                 </div>
                 {{ end }}
                 
+                {{ if eq .Params.consumed false }}
+                <div class="detail-consumed-status">
+                    <span class="not-consumed-badge-detail">Not {{ if eq .Params.category "Books" }}Read{{ else if eq .Params.category "Movies" }}Watched{{ else if eq .Params.category "TV Series" }}Watched{{ else if eq .Params.category "Restaurants" }}Visited{{ else if eq .Params.category "Recipes" }}Made{{ else if eq .Params.category "Concerts" }}Attended{{ else }}Experienced{{ end }} Yet</span>
+                </div>
+                {{ end }}
+                
+                {{ with .Params.recommended_by }}
+                <div class="detail-recommended">
+                    <span class="recommended-label">Recommended by:</span> {{ . }}
+                </div>
+                {{ end }}
+                
                 {{ with .Params.description }}
                 <div class="detail-description">{{ . }}</div>
                 {{ end }}
@@ -234,6 +246,28 @@
     border-radius: 16px;
     font-size: 0.9rem;
 }
+.not-consumed-badge-detail {
+    display: inline-block;
+    background-color: #2196f3;
+    color: white;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin: 8px 0 16px 0;
+}
+.detail-recommended {
+    margin-bottom: 16px;
+    font-size: 1.05rem;
+    color: #555;
+}
+.recommended-label {
+    font-weight: 500;
+    color: #333;
+}
+.detail-consumed-status {
+    margin-bottom: 8px;
+}
 .detail-body {
     padding: 24px;
     font-size: 1.1rem;
diff --git a/layouts/partials/card.html b/layouts/partials/card.html
index 45e0169..aef41ba 100644
--- a/layouts/partials/card.html
+++ b/layouts/partials/card.html
@@ -5,9 +5,13 @@
   {{ else }}
     <img src="/img/no-cover-available-yet.png" alt="{{ $.Title }} - No cover available">
   {{ end }}
+  {{ if eq .Params.consumed false }}
+    <div class="not-consumed-badge">Not {{ if eq .Params.category "Books" }}Read{{ else if eq .Params.category "Movies" }}Watched{{ else if eq .Params.category "TV Series" }}Watched{{ else if eq .Params.category "Restaurants" }}Visited{{ else if eq .Params.category "Recipes" }}Made{{ else if eq .Params.category "Concerts" }}Attended{{ else }}Experienced{{ end }} Yet</div>
+  {{ end }}
   <div class="card-title">{{ .Title }}</div>
   {{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }}
   {{ with .Params.likes }}<div class="card-likes">&#128077; {{ . }}</div>{{ end }}
+  {{ with .Params.recommended_by }}<div class="card-recommended">Recommended by: {{ . }}</div>{{ end }}
   <div class="card-desc">{{ .Params.description }}</div>
   </div>
 </a>
@@ -75,6 +79,24 @@
   display: flex;
   align-items: flex-end;
 }
+.not-consumed-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: rgba(33, 150, 243, 0.9);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  z-index: 1;
+}
+.card-recommended {
+  margin: 4px 16px 0 16px;
+  font-size: 0.9rem;
+  color: #666;
+  font-style: italic;
+}
 @media (max-width: 600px) {
   .card-link-outer .card {
     width: 98vw;