From 8c6aa70401375cc5c7b751f730ed8de1cc08524a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Thu, 14 Mar 2024 00:26:35 +0100
Subject: [PATCH] Add card to template

---
 index.html | 52 ++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index ef3c4c2..0ab35f1 100644
--- a/index.html
+++ b/index.html
@@ -27,23 +27,43 @@
       </div>
     </section>
     <hr>
-    <div id="template" hx-boost hx-ext="client-side-templates">
-      <div
-        hx-get="http://localhost:1337/api/articles?populate=couverture"
-        hx-trigger="load"
-        mustache-template="articles"
-      >
-        <p>Chargement...</p>
+    <section>
+      <div class="container is-max-widescreen" id="template" hx-boost hx-ext="client-side-templates">
+        <div
+          hx-get="http://localhost:1337/api/articles?populate=couverture"
+          hx-trigger="load"
+          mustache-template="articles"
+        >
+          <p>Chargement...</p>
+        </div>
+        <script id="articles" type="x-tmpl-mustache">
+          <div class="columns is-multiline p-3">
+            {{#data}}
+              <div class="column is-one-third">
+                <div class="card">
+                  <div class="card-image">
+                    <figure class="image is-square">
+                      <img src="http://localhost:1337{{attributes.couverture.data.attributes.url}}" alt="{{attributes.couverture.data.attributes.alternativeText}}">
+                    </figure>
+                  </div>
+                  <div class="card-content">
+                    <div class="content">
+                      <h2 class="title">{{attributes.titre}}</h2>
+                      {{{attributes.chapeau}}}
+                    </div>
+                  </div>
+                  <footer class="card-footer">
+                    <div class="has-text-centered" style="width: 100%">
+                      <p class="my-3"><small><i>Date de publication : {{attributes.date}}</i></small></p>
+                    </div>
+                  </footer>
+                </div>
+              </div>
+            {{/data}}
+          </div>
+        </script>
       </div>
-      <script id="articles" type="x-tmpl-mustache">
-        {{#data}}
-            <h2 class="title">{{attributes.titre}}</h2>
-            {{{attributes.contenu}}}
-            <small>Date de publication : {{attributes.date}}</small></pre>
-            <hr/>
-        {{/data}}
-      </script>
-    </div>
+    </section>
     <div id="modal-charte" class="modal">
       <div class="modal-background"></div>
       <div class="modal-card">