@raketa-cloud/admin 0.0.7 → 0.0.8

package/src/views/page_publish/_form.ejs

@@ -0,0 +1,57 @@
+<% form_for({ publishing }, errors, (f) => { %>
+<form action="<%= `/${_context.locale}/page_revisions/${publishing.id}/page_publish` %>" method="post" class="form">
+  <%- f.field('publishing.title'), { required: true } %>
+  <%- f.field('publishing.description', { as: "textarea" }) %>
+  <%- f.field('publishing.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+  <%- f.field('publishing.username', { required: true }) %>
+  <%- f.field('publishing.password', { required: true }) %>
+
+  <div class="form-actions">
+    <div class="btn-toolbar">
+      <%- f.submit('Save record', { class: 'btn-primary' }) %>
+
+      <a href="<%= `/${_context.locale}/pages/${publishing.originalId}` %>" class="btn-secondary">Back</a>
+    </div>
+  </div>
+</form>
+<% }) %>
+
+<div>
+  <div class="help">
+    <div class="flex items-center gap-1 mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+      </svg>
+
+      <h3 class="heading-3">Contextual help</h3>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= publishing.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

package/src/views/page_publish/create_form.ejs

@@ -0,0 +1,11 @@
+<div class="flex w-full">
+  <div class="flex items-center justify-between mt-6 mb-4">
+    <div class="flex items-center gap-2">
+      <h1 class="heading-1">Publish revision</h1>
+    </div>
+  </div>
+</div>
+
+<div class="grid gap-4 md:grid-cols-3">
+  <%- include('_form.ejs') %>
+</div>

package/src/views/page_revisions/_nav.ejs

@@ -0,0 +1,40 @@
+<%
+  const activeClass = "relative top-0.5 px-4 border-b-2 border-raketa-primary pb-4";
+  const inactiveClass = "relative top-0.5 px-4 border-b-2 border-transparent pb-4";
+%>
+
+<div class="flex w-full pb-4">
+  <div class="flex items-center justify-between mb-4">
+    <div class="flex items-center border-b-2">
+      <div class=" <%= active === 'general' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/page_revisions/${settings.id}/general/edit` %>" class="text-raketa-primary font-semibold">
+          General
+        </a>
+      </div>
+
+      <div class="<%= active === 'visuals' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/page_revisions/${settings.id}/visuals/edit` %>" class="text-raketa-primary font-semibold">
+          Visuals
+        </a>
+      </div>
+
+      <div class="<%= active === 'codes' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/page_revisions/${settings.id}/codes/edit` %>" class="text-raketa-primary font-semibold">
+          Code customizations
+        </a>
+      </div>
+
+      <div class="<%= active === 'meta' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/page_revisions/${settings.id}/meta/edit` %>" class="text-raketa-primary font-semibold">
+          Open graph & meta tags
+        </a>
+      </div>
+
+      <div class="<%= active === 'tags' ? activeClass : inactiveClass %>">
+        <a href="<%= `/${_context.locale}/page_revisions/${settings.id}/tags/edit` %>" class="text-raketa-primary font-semibold">
+          Content tags
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/page_revisions/codes/edit_form.ejs

@@ -0,0 +1,39 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / Code customizations</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: code_settings, active: 'codes' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ code_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/page_revisions/${code_settings.id}/codes` %>" method="POST" class="form">
+        <%- f.field('code_settings.scripts', { as: 'textarea', }) %>
+        <%- f.field('code_settings.structured_data', { label: 'Structured data (JSON)', as: 'textarea', hint: 'Click here for a structured data verification tool' }) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/pages/${code_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/page_revisions/general/edit_form.ejs

@@ -0,0 +1,69 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / General</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: general_settings, active: 'general' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ general_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/page_revisions/${general_settings.id}/general` %>" method="POST" class="form">
+        <%- f.field('general_settings.title', { required: true }) %>
+        <%- f.field('general_settings.slug', { label: "URL", required: true }) %>
+        <%- f.field('general_settings.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+
+        <%- f.field('general_settings.username', { required: true }) %>
+        <%- f.field('general_settings.password', { required: true }) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/pages/${general_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= general_settings.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

package/src/views/page_revisions/meta/edit_form.ejs

@@ -0,0 +1,41 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / Open graph & meta tags</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: meta_settings, active: 'meta' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ meta_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/page_revisions/${meta_settings.id}/meta` %>" method="POST" class="form">
+        <%- f.field('meta_settings.title', { required: true }) %>
+        <%- f.field('meta_settings.description', { as: 'textarea', required: true }) %>
+
+        <raketa-image-picker name="meta_settings[image]" value="<%= JSON.stringify(meta_settings.image) %>"></raketa-image-picker>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/pages/${meta_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/page_revisions/tags/edit_form.ejs

@@ -0,0 +1,64 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / Content tags</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: tag_settings, active: 'tags' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ tag_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/page_revisions/${tag_settings.id}/tags` %>" method="POST" class="form">
+        <%- f.field('tag_settings.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name]) }) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/pages/${tag_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= tag_settings.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

package/src/views/page_revisions/visuals/edit_form.ejs

@@ -0,0 +1,42 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Edit revision / Visuals</h1>
+  </div>
+
+  <%- include('../_nav.ejs', { settings: visual_settings, active: 'visuals' }) %>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ visual_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/page_revisions/${visual_settings.id}/visuals` %>" method="POST" class="form">
+        <%- f.field('visual_settings.layout', { as: 'select', required: true, options: [
+          ["default", "Default"],
+          ["landing", "Landing page"],
+          ["headless", "Headless"],
+        ] }) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/pages/${visual_settings.originalId}` %>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 flex items-center gap-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/page_translations/_form.ejs

@@ -0,0 +1,76 @@
+<% form_for({ translation }, errors, (f) => { %>
+<form action="<%= `/${_context.locale}/pages/${page.id}/page_translations` %>" method="post" class="form">
+  <input type="hidden" name="target_locale" value="<%= targetLocale %>" />
+
+  <%- f.field('translation.title', { required: true }) %>
+  <%- f.field('translation.slug', { label: "URL", required: true }) %>
+  <%- f.field('translation.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+
+  <%- f.field('translation.username', { required: true }) %>
+  <%- f.field('translation.password', { required: true }) %>
+
+  <%- f.field('translation.layout', { as: 'select', required: true, options: [
+      ["default", "Default"],
+      ["landing", "Landing page"],
+      ["headless", "Headless"],
+    ] }) %>
+
+  <%- f.field('translation.meta_title', { required: true }) %>
+  <%- f.field('translation.meta_description', { as: "textarea", required: true }) %>
+
+  <raketa-image-picker name="translation[meta_image]" value="<%= JSON.stringify(translation.meta_image) %>"></raketa-image-picker>
+
+  <h6>Original tags:</h6>
+  <div><%= blueprint_tags.map((tag) => tag.name).join(", ")%></div>
+
+  <%- f.field('translation.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name])}) %>
+
+  <div class="form-actions">
+    <div class="btn-toolbar">
+      <%- f.submit('Save record', { class: 'btn-primary' }) %>
+
+      <a href="<%= `/${_context.locale}/pages/${page.id}` %>" class="btn-secondary">Cancel</a>
+    </div>
+  </div>
+</form>
+<% }) %>
+
+<div>
+  <div class="help">
+    <div class="flex items-center gap-1 mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+      </svg>
+
+      <h3 class="heading-3">Contextual help</h3>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= page.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

package/src/views/page_translations/create_form.ejs

@@ -0,0 +1,11 @@
+<div class="w-full">
+  <div class="flex items-center justify-between mt-6 mb-4">
+    <div class="flex items-center gap-2">
+      <h1 class="heading-1">Create page translation</h1>
+    </div>
+  </div>
+</div>
+
+<div class="grid gap-4 md:grid-cols-3">
+  <%- include('_form.ejs') %>
+</div>

package/src/views/page_urls/create_form.ejs

@@ -0,0 +1,31 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Change URL</h1>
+  </div>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <% form_for({ change }, errors, (f) => { %>
+    <form action="<%= `/${_context.locale}/pages/${change.id}/page_urls` %>" method="post" class="form">
+      <%- f.field('change.slug', { label: "URL", required: true }) %>
+      <%- f.field('change.redirect', { as: "checkbox", value: "1", label: "Create 301 redirect for the old URL" }) %>
+
+      <%- f.submit('Save record', { class: 'btn-primary' }) %>
+      <a href="<%=`/${_context.locale}/pages/${change.id}`%>" class="btn-secondary">Back</a>
+    </form>
+    <% }) %>
+
+    <div>
+      <div class="help">
+        <div class="flex items-center gap-1 mb-2">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/pages/_form.ejs

@@ -0,0 +1,84 @@
+<% form_for({ page }, errors, (f) => { %>
+<form action="<%= page?.id ? `/${_context.locale}/pages/${page.id}` : `/${_context.locale}/pages` %>" method="post" class="form">
+  <%- f.field('page.title', { required: true }) %>
+  <%- f.field('page.slug', { label: "URL", required: true }) %>
+  <%- f.field('page.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+
+  <%- f.field('page.username', { required: true }) %>
+  <%- f.field('page.password', { required: true }) %>
+
+  <%- f.field('page.layout', { as: 'select', required: true, options: [
+      ["default", "Default"],
+      ["landing", "Landing page"],
+      ["headless", "Headless"],
+    ] }) %>
+
+  <%- f.field('page.meta_title', { required: true }) %>
+  <%- f.field('page.meta_description', { as: "textarea", required: true }) %>
+
+  <raketa-image-picker
+    name="page[meta_image]"
+    value="<%= JSON.stringify(page.meta_image) %>"
+  ></raketa-image-picker>
+
+  <%- f.field('page.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name]) }) %>
+
+  <div class="form-actions">
+    <div class="btn-toolbar">
+      <%- f.submit('Save record', { class: 'btn-primary' }) %>
+
+      <a href="<%= `/${_context.locale}/pages` %>" class="btn-secondary">Back to list</a>
+    </div>
+
+    <% if (page?.id) {%>
+    <button hx-delete="<%= `/${_context.locale}/pages/${page.id}` %>" hx-confirm="Are you sure?" class="btn-danger has-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+      </svg>
+
+      Delete record
+    </button>
+    <% } %>
+  </div>
+</form>
+<% }) %>
+
+<div>
+  <div class="help">
+    <div class="flex items-center gap-1 mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+      </svg>
+
+      <h3 class="heading-3">Contextual help</h3>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= page.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

package/src/views/pages/create_form.ejs

@@ -0,0 +1,9 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Create page</h1>
+  </div>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <%- include('_form.ejs') %>
+  </div>
+</div>

package/src/views/pages/edit_form.ejs

@@ -0,0 +1,3 @@
+<h1>Hello from edit form <%= id %></h1>
+
+<%- include('_form.ejs') %>