integrated section and card previews into page show

app/views/cms/pages/show.haml

@@ -1,10 +1,13 @@
 %p#notice= notice
+.flex.flex-col.bg-white
+  .flex.items-center.justify-center.flex-1
+    .max-w-xl.px-4.py-8.mx-auto.text-center
+      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
+        Page #{@page.name}
 
 -@page.sections.each_with_index do |section , index|
   .grid.grid-cols-6.gap-2.m-8{class: (index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' }
     .relative.block.border.border-gray-100
-      =#image_tag("cms/#{file}" , class: "h-56 w-full object-contain lg:h-72")
-      =# section.template #PREVIEW here
       .p-4
         %h3.mt-4.text-lg.font-bold Section #{index + 1}
         %button.mt-4.rounded-lg.bg-yellow-500.p-4
@@ -13,13 +16,9 @@
           =link_to "Down" , "/index"
         %button.mt-4.rounded-lg.bg-blue-400.p-4
           =link_to "Edit" , "/index"
+        %button.mt-4.rounded-lg.bg-cyan-400.p-4
+          =link_to "New" , "/index"
         %button.mt-4.rounded-lg.bg-red-400.p-4
           =link_to "Delete" , "/index"
     -section.content.each do |key , value|
       = render "cms/sections/#{key}", section: section , key: key , value: value
-
-.grid.grid-cols-6.gap-2.m-8
-  %button.mt-4.rounded-lg.bg-cyan-400.p-4
-    =link_to "New Section" , "/index"
-  %button.mt-4.rounded-lg.bg-blue-400.p-4
-    =link_to "Save Changes" , "/index"

app/views/cms/sections/_card_template.haml

@@ -0,0 +1,5 @@
+.p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
+  %p= value
+  =image_tag("cms/card_preview/#{value}" , class: "w-full object-contain")
+  %p #{section.content['cards'].length} cards

app/views/cms/sections/_image.haml

@@ -1,2 +1,3 @@
 .p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
   = image_tag "cms/" + value

app/views/cms/sections/_template.haml

@@ -1,3 +1,4 @@
-.p-6{style: bg(section)}
+.p-6
   %h3.mt-4.text-lg.font-bold= key.upcase
   %p= value
+  =image_tag("cms/section_preview/#{section.template}" , class: "w-full object-contain")

app/views/sections/_section_2_col.haml

@@ -5,7 +5,7 @@
         = section["header"]
       %p.mt-4.text-gray-500
         = section["text"]
-  - template = "cards/" + section["element_template"]
+  - template = "cards/" + section["card_template"]
   .grid.grid-cols-1.md:grid-cols-2
-    - section["elements"].each do |element|
+    - section["cards"].each do |element|
       = render( template , element: element)

cms/studios.yaml

@@ -5,8 +5,8 @@
     The rooms are in the old hospital wings, so most are old patient rooms, but there are plenty of others too.
     Prices do not include electricity or vat, but do include the use of common spaces, see below.
   image: makerspace.webp
-  element_template: card_full_image
-  elements:
+  card_template: card_full_image
+  cards:
     - header: Standard
       text:
         This is the standard 2 patient room. They are mostly towards the south,