.

templates/cards/_form.html

@@ -37,16 +37,50 @@
     </div>
   </div>
 
+  <div class="field">
+    <label class="label">{{ form.facts.label }}</label>
+    <div class="control">
+      {{ form.facts }}
+      <p class="help">One fact per line — will be shown as bullet points on the card.</p>
+    </div>
+  </div>
+
   <div class="field">
     <label class="label">{{ form.image.label }}</label>
     <div class="control">
       <div class="file has-name">
         <label class="file-label">
           {{ form.image }}
+          <span class="file-cta">
+            <span class="file-icon">📁</span>
+            <span class="file-label">Choose a file…</span>
+          </span>
+          <span class="file-name" style="margin-left:0.5rem">No file chosen</span>
         </label>
       </div>
     </div>
   </div>
+  <script>
+    (function(){
+      const script = document.currentScript;
+      const formRoot = script && script.parentElement ? script.parentElement : document;
+      const fileInputs = formRoot.querySelectorAll('input[type=file]');
+      fileInputs.forEach(function(fi){
+        fi.addEventListener('change', function(){
+          const wrapper = fi.closest('.file');
+          if(!wrapper) return;
+          const label = wrapper.querySelector('.file-name');
+          if(!label) return;
+          if(fi.files.length === 0) label.textContent = 'No file chosen';
+          else label.textContent = fi.files.length > 1 ? fi.files.length + ' files selected' : fi.files[0].name;
+        });
+        const outerLabel = fi.closest('.file').querySelector('.file-label');
+        if(outerLabel && !outerLabel.contains(fi)){
+          outerLabel.addEventListener('click', function(e){ fi.click(); });
+        }
+      });
+    })();
+  </script>
 
   <div class="field is-horizontal">
     <div class="field-body">