diff --git a/assets/js/app.js b/assets/js/app.js
index 98e05fb..80157d3 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -221,13 +221,13 @@ Hooks.dragAndDropLocation = {
       layoutDOM.classList.toggle('create-layout');
       layoutDOM.classList.toggle('create-layout-pure');
     });
-    
+
     this.handleEvent('set_focus', ({ customClasses }) => {
-      const formDOM = document.querySelector(`.${customClasses}`)
-      if (formDOM) {
-        formDOM.focus()
-        formDOM.setSelectionRange(-1, -1);
-      }
+      const formsDOM = document.querySelectorAll(`.${customClasses}`);
+      formsDOM.forEach((item) => {
+        item.focus();
+        item.setSelectionRange(-1, -1);
+      });
     });
   },
 };
diff --git a/deployment/templates/test1.html b/deployment/templates/test1.html
index ff0ace2..0376456 100644
--- a/deployment/templates/test1.html
+++ b/deployment/templates/test1.html
@@ -1,421 +1,22 @@
 
-<div data-phx-main="" data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GMF80RkthU2YzTVQwVlFFZAAMbGl2ZV9zZXNzaW9uaAJkAAdkZWZhdWx0bggAXnduEb33TxdkAApwYXJlbnRfcGlkZAADbmlsZAAIcm9vdF9waWRkAANuaWxkAAlyb290X3ZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVkAAZyb3V0ZXJkACZFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVuBgBK9ecdhwFiAAFRgA.qFe-ghTtoZq1SitQnUWlqx0PnvubYehfDw8LeIxlkdk" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GMF80RkthU2YzTVQwVlFFbgYASvXnHYcBYgABUYA.K_L2NjLZ8L0BPe5Z2RYzRXh1cCqyRVjHmDT_5kA86Jo" id="phx-F0_4FKaSf3MT0VQE" class="phx-connected" data-phx-root-id="phx-F0_4FKaSf3MT0VQE"><div class="main-body">
+<div data-phx-main="" data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GMF80WTd0YUpucUtvamtDZAAMbGl2ZV9zZXNzaW9uaAJkAAdkZWZhdWx0bggAXnduEb33TxdkAApwYXJlbnRfcGlkZAADbmlsZAAIcm9vdF9waWRkAANuaWxkAAlyb290X3ZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVkAAZyb3V0ZXJkACZFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVuBgANJO0dhwFiAAFRgA.HDfOajziKCYSrJ8SLHf_oIdCIMJZBGEv3fKUWrt6fVk" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GMF80WTd0YUpucUtvamtDbgYADSTtHYcBYgABUYA.xmHuqU73ZvEKOSLVi0-0JLkVXcxsdEnZ3WcA6lWPlLg" id="phx-F0_4Y7taJnqKojkC" class="phx-loading" data-phx-root-id="phx-F0_4Y7taJnqKojkC"><div class="main-body">
   <div id="mishka_top_nav" class="top-nav">
-    <div data-phx-component="1" id="phx-F0_4FKaSf3MT0VQE-1-0">Back To/History</div>
+    <div data-phx-component="1" id="phx-F0_4Y7taJnqKojkC-1-0">Back To/History</div>
     <div>Main Section</div>
     <div>Settings</div>
   </div>
   <div id="mishka_content" data-id="mishka_content" class="flex flex-col-reverse mx-auto justify-between items-stretch w-full rounded-t-md lg:flex-row" phx-hook="dragAndDropLocation">
     <div id="dragLocation" data-type="dragLocation" class="flex flex-col items-stretch justify-start pr-9 pl-0 pt-10 pb-96 mb-96 w-full space-y-16 lg:overflow-y-scroll lg:h-screen lg:min-h-screen mx-5 lg:pr-0">
-  
-
-  <div class="create-layout group" id="layout-ff32392c-fb8b-40aa-9967-cff664675b53" data-type="layout">
-  <div class="flex flex-row justify-start items-center space-x-3 absolute -left-[2px] -top-11 bg-gray-200 border border-gray-200 p-2 rounded-tr-3xl z-1 w-54">
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="layout-icons" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"></path>
-</svg>
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="layout-icons" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"></path>
-</svg>
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="layout-icons" fill="none" phx-click="[[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-out&quot;,&quot;duration-300&quot;],[&quot;opacity-0&quot;],[&quot;opacity-100&quot;]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-out&quot;,&quot;duration-300&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;focus_first&quot;,{&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-content&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z"></path>
-</svg>
-<div id="layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}]]" data-reset="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal_custom_class_start&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal_custom_class_back&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.custom_class-form&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;push&quot;,{&quot;event&quot;:&quot;reset&quot;}]]" class="relative z-50 hidden" style="display: block;">
-  <div id="layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-bg" class="fixed inset-0 bg-zinc-50/90 transition-opacity" aria-hidden="true" style="display: block;"></div>
-  <div class="fixed inset-0 overflow-y-auto" aria-labelledby="layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-title" aria-describedby="layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-description" role="dialog" aria-modal="true" tabindex="0">
-    <div class="flex min-h-full items-center justify-center">
-      <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
-        <div id="layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-container" phx-hook="Phoenix.FocusWrap" class="hidden relative rounded-2xl bg-white px-5 py-5 shadow-lg shadow-zinc-700/10 ring-1 ring-zinc-700/10 transition z-50" phx-click-away="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53&quot;]]]" phx-key="escape" phx-window-keydown="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53&quot;]]]" style="display: block;">
-  <span id="layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-container-start" tabindex="0" aria-hidden="true"></span>
-  
-          <div class="absolute top-6 right-5">
-            <button phx-click="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53&quot;]]]" type="button" class="-m-3 flex-none p-3 opacity-20 hover:opacity-40" aria-label="close">
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-5 stroke-current" fill="currentColor" viewBox="0 0 24 24">
-  <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd"></path>
-</svg>
-            </button>
-          </div>
-          <div id="layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-content">
-            
-  
-    <div class="setting_modal" style="display: none;">
-      <p class="text-center font-bold mb-4 text-lg">Please select the section you want to edit</p>
-      <div class="grid grid-cols-2 gap-3 text-gray-500 mt-8 mb-5 md:grid-cols-4 lg:grid-cols-5">
-        <div data-id="layout" data-type="layout" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="layout">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M7.875 14.25l1.214 1.942a2.25 2.25 0 001.908 1.058h2.006c.776 0 1.497-.4 1.908-1.058l1.214-1.942M2.41 9h4.636a2.25 2.25 0 011.872 1.002l.164.246a2.25 2.25 0 001.872 1.002h2.092a2.25 2.25 0 001.872-1.002l.164-.246A2.25 2.25 0 0116.954 9h4.636M2.41 9a2.25 2.25 0 00-.16.832V12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 12V9.832c0-.287-.055-.57-.16-.832M2.41 9a2.25 2.25 0 01.382-.632l3.285-3.832a2.25 2.25 0 011.708-.786h8.43c.657 0 1.281.287 1.709.786l3.284 3.832c.163.19.291.404.382.632M4.5 20.25h15A2.25 2.25 0 0021.75 18v-2.625c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125V18a2.25 2.25 0 002.25 2.25z"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Layout</p>
-</div><div data-id="flexbox_grid" data-type="flexbox_grid" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="flexbox_grid">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Flexbox &amp; Grid</p>
-</div><div data-id="spacing" data-type="spacing" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="spacing">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Spacing</p>
-</div><div data-id="sizing" data-type="sizing" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="sizing">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Sizing</p>
-</div><div data-id="typography" data-type="typography" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="typography">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Typography</p>
-</div><div data-id="backgrounds" data-type="backgrounds" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="backgrounds">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6zM7.5 6h.008v.008H7.5V6zm2.25 0h.008v.008H9.75V6z"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Backgrounds</p>
-</div><div data-id="borders" data-type="borders" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="borders">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Borders</p>
-</div><div data-id="effects" data-type="effects" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="effects">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Effects</p>
-</div><div data-id="filters" data-type="filters" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="filters">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M7.848 8.25l1.536.887M7.848 8.25a3 3 0 11-5.196-3 3 3 0 015.196 3zm1.536.887a2.165 2.165 0 011.083 1.839c.005.351.054.695.14 1.024M9.384 9.137l2.077 1.199M7.848 15.75l1.536-.887m-1.536.887a3 3 0 11-5.196 3 3 3 0 015.196-3zm1.536-.887a2.165 2.165 0 001.083-1.838c.005-.352.054-.695.14-1.025m-1.223 2.863l2.077-1.199m0-3.328a4.323 4.323 0 012.068-1.379l5.325-1.628a4.5 4.5 0 012.48-.044l.803.215-7.794 4.5m-2.882-1.664A4.331 4.331 0 0010.607 12m3.736 0l7.794 4.5-.802.215a4.5 4.5 0 01-2.48-.043l-5.326-1.629a4.324 4.324 0 01-2.068-1.379M14.343 12l-2.882 1.664"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Filters</p>
-</div><div data-id="tables" data-type="tables" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="tables">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0112 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Tables</p>
-</div><div data-id="transitions_animation" data-type="transitions_animation" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="transitions_animation">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Transitions &amp; Animation</p>
-</div><div data-id="scale" data-type="scale" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="scale">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Scale</p>
-</div><div data-id="interactivity" data-type="interactivity" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="interactivity">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Interactivity</p>
-</div><div data-id="accessibility" data-type="accessibility" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="accessibility">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Accessibility</p>
-</div><div data-id="svg" data-type="svg" class="border border-gray-200 rounded-md p-5 hover:border hover:border-blue-300 hover:duration-300 duration-1000 hover:text-blue-500 lg:px-1" phx-click="selected_setting" phx-value-id="svg">
-  <p class="mx-auto text-center">
-    
-          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
-</svg>
-        
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">SVG</p>
-</div>
-      </div>
-    </div>
-
-    <p class="text-center text-sm text-blue-400" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal_custom_class_start&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal_custom_class_back&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;.custom_class-form&quot;}]]" phx-value-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-type="layout">
-      <span class="setting_modal_custom_class_start" style="display: none;">OR put your custom classes</span>
-      <span class="setting_modal_custom_class_back hidden" style="display: block;">Back to settings</span>
-    </p>
-    <div class="custom_class-form hidden" style="display: block;">
-    <div id="custom_class-layout-ff32392c-fb8b-40aa-9967-cff664675b53" data-phx-component="2">
-  <p class="text-xs text-gray-400 text-center w-full mx-auto mt-4 mb-0 leading-4">
-    In this section, you can edit or view all the classes selected for this block, and it is also possible to easily enter commands manually and quickly. Of course, this is more suitable for people who have mastered Tailwind.
-  </p>
-
-  <form phx-change="add" phx-target="2">
-  
-  
-  
-  <div class="space-y-8 bg-white mt-10">
-    
-    <textarea class="custom-classes w-full" id="32484a8f-842f-486c-b5b5-bdb83d70722b" label="Custom Classes:" name="custom_class[custom_classes]">flex flex-row justify-start items-center w-full space-x-3 px-3 py-10 p-5</textarea>
-    <div phx-feedback-for="custom_class[block_type]" class="phx-no-feedback">
-  <label for="81a6400b-b140-442e-90e2-86f99e916d5c" class="block text-sm font-semibold leading-6 text-zinc-800">
-  
-</label>
-  <input type="hidden" name="custom_class[block_type]" id="81a6400b-b140-442e-90e2-86f99e916d5c" value="layout" class="mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 ">
-  
-</div>
-    <div phx-feedback-for="custom_class[block_id]" class="phx-no-feedback">
-  <label for="fa214deb-ec15-4b81-88d0-76f1565cb478" class="block text-sm font-semibold leading-6 text-zinc-800">
-  
-</label>
-  <input type="hidden" name="custom_class[block_id]" id="fa214deb-ec15-4b81-88d0-76f1565cb478" value="ff32392c-fb8b-40aa-9967-cff664675b53" class="mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 ">
-  
-</div>
-  
-    
-  </div>
-
-</form>
-
-  <div class="flex flex-wrap my-2 gap-2">
-    <div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>flex</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="flex" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div><div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>flex-row</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="flex-row" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div><div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>justify-start</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="justify-start" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div><div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>items-center</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="items-center" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div><div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>w-full</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="w-full" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div><div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>space-x-3</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="space-x-3" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div><div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>px-3</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="px-3" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div><div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>py-10</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="py-10" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div><div class="flex flex-row justify-start items-start py-1 px-3 bg-gray-200 rounded-md gap-2 text-black text-sm">
-      <span>p-5</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="search-select-icons mt-1" fill="none" phx-click="delete" phx-target="2" phx-value-block-type="layout" phx-value-block-id="ff32392c-fb8b-40aa-9967-cff664675b53" phx-value-config="p-5" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-    </div>
-  </div>
-</div>
-    </div>
-  
-
-          </div>
-        
-  <span id="layout-settings-ff32392c-fb8b-40aa-9967-cff664675b53-container-end" tabindex="0" aria-hidden="true"></span>
-</div>
-      </div>
-    </div>
-  </div>
-</div>
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="layout-icons" fill="none" phx-click="[[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-out&quot;,&quot;duration-300&quot;],[&quot;opacity-0&quot;],[&quot;opacity-100&quot;]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-out&quot;,&quot;duration-300&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;focus_first&quot;,{&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-content&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z"></path>
-</svg>
-<div id="layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}]]" class="relative z-50 hidden">
-  <div id="layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-bg" class="fixed inset-0 bg-zinc-50/90 transition-opacity" aria-hidden="true"></div>
-  <div class="fixed inset-0 overflow-y-auto" aria-labelledby="layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-title" aria-describedby="layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-description" role="dialog" aria-modal="true" tabindex="0">
-    <div class="flex min-h-full items-center justify-center">
-      <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
-        <div id="layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-container" phx-hook="Phoenix.FocusWrap" class="hidden relative rounded-2xl bg-white p-14 shadow-lg shadow-zinc-700/10 ring-1 ring-zinc-700/10 transition" phx-click-away="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}],[&quot;push&quot;,{&quot;event&quot;:&quot;reset&quot;}]]" phx-key="escape" phx-window-keydown="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}],[&quot;push&quot;,{&quot;event&quot;:&quot;reset&quot;}]]">
-  <span id="layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-container-start" tabindex="0" aria-hidden="true"></span>
-  
-          <div class="absolute top-6 right-5">
-            <button phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}],[&quot;push&quot;,{&quot;event&quot;:&quot;reset&quot;}]]" type="button" class="-m-3 flex-none p-3 opacity-20 hover:opacity-40" aria-label="close">
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-5 stroke-current" fill="currentColor" viewBox="0 0 24 24">
-  <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd"></path>
+  <div id="previewHelper" class="flex flex-col justify-center items-center w-full border border-dashed border-gray-300 h-80 text-center object-center font-bold text-xl hover:border-blue-500 hover:duration-1000 hover:rounded-md rounded-sm duration-300 hover:text-blue-600 space-y-10">
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-32 h-32 stroke-current" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
 </svg>
-            </button>
-          </div>
-          <div id="layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-content">
-            
-            
-  <form phx-change="validate_tag" phx-submit="save_tag">
-  
-  
-  
-  <div class="space-y-8 bg-white mt-10">
-    
-    <div phx-feedback-for="tag[tag]" class="phx-no-feedback">
-  <label for="field-tag-layout-ff32392c-fb8b-40aa-9967-cff664675b53" class="block text-sm font-semibold leading-6 text-zinc-800">
-  Tag Name
-</label>
-  <input type="text" name="tag[tag]" id="field-tag-layout-ff32392c-fb8b-40aa-9967-cff664675b53" class="mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 ">
-  
-</div>
-    <p class="text-sm text-red-500">
-      Please use only letters and numbers in naming and also keep in mind that you can only use (<code class="text-pink-400">-</code>) between letters. It should be noted, the tag name must be more than 4 characters.
-    </p>
-    <div phx-feedback-for="tag[type]" class="phx-no-feedback">
-  <label for="field-type-layout-ff32392c-fb8b-40aa-9967-cff664675b53" class="block text-sm font-semibold leading-6 text-zinc-800">
-  
-</label>
-  <input type="hidden" name="tag[type]" id="field-type-layout-ff32392c-fb8b-40aa-9967-cff664675b53" value="layout" class="mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 ">
-  
-</div>
-    <div phx-feedback-for="tag[id]" class="phx-no-feedback">
-  <label for="field-id-layout-ff32392c-fb8b-40aa-9967-cff664675b53" class="block text-sm font-semibold leading-6 text-zinc-800">
-  
-</label>
-  <input type="hidden" name="tag[id]" id="field-id-layout-ff32392c-fb8b-40aa-9967-cff664675b53" value="ff32392c-fb8b-40aa-9967-cff664675b53" class="mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 ">
-  
-</div>
-    <div phx-feedback-for="tag[parent_id]" class="phx-no-feedback">
-  <label for="field-parent_id-layout-ff32392c-fb8b-40aa-9967-cff664675b53" class="block text-sm font-semibold leading-6 text-zinc-800">
-  
-</label>
-  <input type="hidden" name="tag[parent_id]" id="field-parent_id-layout-ff32392c-fb8b-40aa-9967-cff664675b53" class="mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 ">
-  
-</div>
-    
-    <div class="mt-2 flex items-center justify-between gap-6">
-      
-      <button class="phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3 text-sm font-semibold leading-6 text-white active:text-white/80 phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3 text-sm font-semibold leading-6 text-white active:text-white/80 disabled:bg-gray-400 disabled:text-white disabled:outline-none" disabled="">
-  
-        Save
-      
-</button>
-    
     </div>
+    <div>Drag And Drop a section here</div>
   </div>
 
-</form>
-
-            
-          </div>
-        
-  <span id="layout-tag-ff32392c-fb8b-40aa-9967-cff664675b53-container-end" tabindex="0" aria-hidden="true"></span>
-</div>
-      </div>
-    </div>
-  </div>
-</div>
-    
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="layout-icons" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
-</svg>
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="layout-icons text-red-500" fill="none" phx-click="[[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-out&quot;,&quot;duration-300&quot;],[&quot;opacity-0&quot;],[&quot;opacity-100&quot;]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-out&quot;,&quot;duration-300&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;focus_first&quot;,{&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-content&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.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 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path>
-</svg>
-<div id="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}]]" class="relative z-50 hidden">
-  <div id="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-bg" class="fixed inset-0 bg-zinc-50/90 transition-opacity" aria-hidden="true"></div>
-  <div class="fixed inset-0 overflow-y-auto" aria-labelledby="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-title" aria-describedby="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-description" role="dialog" aria-modal="true" tabindex="0">
-    <div class="flex min-h-full items-center justify-center">
-      <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
-        <div id="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container" phx-hook="Phoenix.FocusWrap" class="hidden relative rounded-2xl bg-white p-14 shadow-lg shadow-zinc-700/10 ring-1 ring-zinc-700/10 transition" phx-click-away="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}],[&quot;push&quot;,{&quot;event&quot;:&quot;reset&quot;}]]" phx-key="escape" phx-window-keydown="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}],[&quot;push&quot;,{&quot;event&quot;:&quot;reset&quot;}]]">
-  <span id="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container-start" tabindex="0" aria-hidden="true"></span>
-  
-          <div class="absolute top-6 right-5">
-            <button phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}],[&quot;push&quot;,{&quot;event&quot;:&quot;reset&quot;}]]" type="button" class="-m-3 flex-none p-3 opacity-20 hover:opacity-40" aria-label="close">
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-5 stroke-current" fill="currentColor" viewBox="0 0 24 24">
-  <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd"></path>
-</svg>
-            </button>
-          </div>
-          <div id="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-content">
-            
-            
-  Are you sure?
-  
-            <div class="ml-6 mb-4 flex items-center gap-5">
-              <button class="phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3 text-sm font-semibold leading-6 text-white active:text-white/80 py-2 px-3" id="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-confirm" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;delete&quot;,&quot;value&quot;:{&quot;id&quot;:&quot;ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;parent_id&quot;:null,&quot;type&quot;:&quot;layout&quot;}}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}]]" phx-disable-with="">
   
-                OK
-              
-</button>
-              <a href="#" class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700" phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-bg&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;],[&quot;opacity-0&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53&quot;,&quot;transition&quot;:[[&quot;block&quot;],[&quot;block&quot;],[&quot;hidden&quot;]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;overflow-hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;body&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;pop_focus&quot;,{}]]">
-                Cancel
-              </a>
-            </div>
-          </div>
-        
-  <span id="delete_confirm-ff32392c-fb8b-40aa-9967-cff664675b53-container-end" tabindex="0" aria-hidden="true"></span>
-</div>
-      </div>
-    </div>
-  </div>
-</div>
-    <div id="clear-ff32392c-fb8b-40aa-9967-cff664675b53" data-phx-component="3">
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="layout-icons" fill="none" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;toggle_clean&quot;,&quot;value&quot;:{&quot;block_id&quot;:&quot;ff32392c-fb8b-40aa-9967-cff664675b53&quot;}}]]" phx-target="3" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-</svg>
-</div>
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="layout-icons" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"></path>
-</svg>
-  </div>
-  <div id="ff32392c-fb8b-40aa-9967-cff664675b53" class="flex flex-row justify-start items-center w-full space-x-3 px-3 py-10 p-5" data-type="layout">
-    
-  </div>
-</div>
 </div>
     <div class="flex flex-col w-[95%] h-[300px] mx-auto bg-white border-t-0 border-l border-r border-b border-[rgb(229,229,229)] rounded-t-md md:pb-20 overflow-y-scroll overflow-x-hidden lg:w-5/12 lg:h-screen lg:mx-0 xl:w-4/12">
   <div class="flex flex-row justify-between items-stretch p-4 border-b border-[rgb(229,229,229)]">