Add card to template

index.html

@@ -27,23 +27,43 @@
       </div>
     </section>
     <hr>
-    <div id="template" hx-boost hx-ext="client-side-templates">
+    <section>
-      <div
+      <div class="container is-max-widescreen" id="template" hx-boost hx-ext="client-side-templates">
-        hx-get="http://localhost:1337/api/articles?populate=couverture"
+        <div
-        hx-trigger="load"
+          hx-get="http://localhost:1337/api/articles?populate=couverture"
-        mustache-template="articles"
+          hx-trigger="load"
-      >
+          mustache-template="articles"
-        <p>Chargement...</p>
+        >
+          <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">
+    </section>
-        {{#data}}
-            <h2 class="title">{{attributes.titre}}</h2>
-            {{{attributes.contenu}}}
-            <small>Date de publication : {{attributes.date}}</small></pre>
-            <hr/>
-        {{/data}}
-      </script>
-    </div>
     <div id="modal-charte" class="modal">
       <div class="modal-background"></div>
       <div class="modal-card">