add some debug styling and display notes data in content

src/components/text/TextCardBase.vue

@@ -5,27 +5,62 @@
         <b-card-header header-tag="header">
           <h4>
             <template v-if="text.type === 'Textref'">
-              <span>{{ toCommaList(text.authors) }},</span>
-              <span>{{ text.title }},</span>
-              <span>{{ text.edition }}</span>
+              <span class="text-authors d-block">{{ toCommaList(text.authors) }},</span>
+              <span class="text-title d-block">{{ text.title }},</span>
+              <span class="text-edition d-block">{{ text.edition ? text.edition.name : text.edition }}</span>
             </template>
             <template v-else>
-              {{ text.title }}
+              {{ text.families[0].name }}
             </template>
           </h4>
 
           <slot name="header-extra" :text="text" />
         </b-card-header>
 
-        <b-card-body v-html="text.content" :class="ellipsis ? 'ellipsis' : 'overflow-auto'" />
+        <b-card-body :class="ellipsis ? 'ellipsis' : 'overflow-auto'">
+          <div class="text-content" v-html="text.content" />
+
+          <div class="text-notes mt-5" v-if="text.notes">
+            <div v-for="note in text.notes" :key="note.number" class="mb-4 border border-dark p-2">
+              <p class="m-0">
+                <span class="font-weight-bold">Numéro de note :</span> {{ note.number || 'aucun ?' }}
+              </p>
+
+              <p class="m-0 font-weight-bold">
+                Contenu :
+              </p>
+              <div v-if="note.content" v-html="note.content" />
+              <div v-else>
+                Aucun ?
+              </div>
+
+              <p class="m-0 font-weight-bold">
+                Liens :
+              </p>
+              <ul v-if="note.links">
+                <li v-for="link in note.links" :key="link.id" class="">
+                  <span class="text-authors">{{ toCommaList(link.authors) }}</span>,
+                  <span class="text-title">{{ link.title }}</span> —
+                  <span>{{ link.families[0].name }}</span>
+                  (id: {{ link.id }})
+                </li>
+              </ul>
+              <div v-else>
+                Aucun
+              </div>
+            </div>
+          </div>
+        </b-card-body>
 
         <b-card-footer>
-          <b-badge
-            v-for="tag in text.tags" :key="tag.id"
-            variant="dark" pill
-          >
-            {{ tag.name }}
-          </b-badge>
+          <div class="tags">
+            <b-badge
+              v-for="tag in text.tags" :key="tag.id"
+              variant="dark" pill
+            >
+              {{ tag.name }}
+            </b-badge>
+          </div>
 
           <slot name="footer-extra" v-bind="{ text, toCommaList }" />
         </b-card-footer>