From 8497eb34f4997232e8093f45b85bf71b116d9fd7 Mon Sep 17 00:00:00 2001
From: shahryar tavakkoli <shahryar.tbiz@gmail.com>
Date: Wed, 29 Mar 2023 14:16:52 +0330
Subject: [PATCH] sperate elements data, based on #66

---
 deployment/templates/test1.html               | 124 +++++++++---------
 .../components/blocks/element_menu.ex         |  41 +-----
 .../components/mishka_core_component.ex       |  10 +-
 lib/mishka_template_creator/data/elements.ex  |  43 ++++++
 4 files changed, 118 insertions(+), 100 deletions(-)
 create mode 100644 lib/mishka_template_creator/data/elements.ex

diff --git a/deployment/templates/test1.html b/deployment/templates/test1.html
index fa99ac2..bfc1c45 100644
--- a/deployment/templates/test1.html
+++ b/deployment/templates/test1.html
@@ -1,7 +1,7 @@
 
-<div data-phx-main="" data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GMUNvMXNQSllBbVFuUTZEZAAMbGl2ZV9zZXNzaW9uaAJkAAdkZWZhdWx0bggAUmhILNWoUBdkAApwYXJlbnRfcGlkZAADbmlsZAAIcm9vdF9waWRkAANuaWxkAAlyb290X3ZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVkAAZyb3V0ZXJkACZFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVuBgA7eH0phwFiAAFRgA._0VS_EoT391cTRNPRET9-b5k0Q68SI0xGWXl0ezG55I" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GMUNvMXNQSllBbVFuUTZEbgYAO3h9KYcBYgABUYA.XY2_NVjH-CG19CPOC2GP2Or_0IlmaDDwCm3mbTJY81o" id="phx-F1Co1sPJYAmQnQ6D" class="phx-connected" data-phx-root-id="phx-F1Co1sPJYAmQnQ6D"><div class="main-body">
+<div data-phx-main="" data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GMURkWk5RQzRhMG0tZ2toZAAMbGl2ZV9zZXNzaW9uaAJkAAdkZWZhdWx0bggA5EiUzWTdUBdkAApwYXJlbnRfcGlkZAADbmlsZAAIcm9vdF9waWRkAANuaWxkAAlyb290X3ZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVkAAZyb3V0ZXJkACZFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVuBgD0Me8shwFiAAFRgA.koubztFnJ9J-hBfqdol4admriOCr437_CodF_pr3BhY" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GMURkWk5RQzRhMG0tZ2tobgYA9DHvLIcBYgABUYA.GwScajaU5iBef-d5ehYMC6iLAJGsSxr_EXpgISJGTKE" id="phx-F1DdZNQC4a0m-gkh" class="phx-connected" data-phx-root-id="phx-F1DdZNQC4a0m-gkh"><div class="main-body">
   <div id="mishka_top_nav" class="top-nav">
-    <div data-phx-component="1" id="phx-F1Co1sPJYAmQnQ6D-1-0">Back To/History</div>
+    <div data-phx-component="1" id="phx-F1DdZNQC4a0m-gkh-1-0">Back To/History</div>
     <div>Main Section</div>
     <div>Settings</div>
   </div>
@@ -9,7 +9,7 @@
     <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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" data-type="layout">
+  <div class="create-layout group" id="layout-078e4676-3453-48f9-99b0-6c9e50092b15" 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>
@@ -17,25 +17,25 @@
     <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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-content&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+    <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-078e4676-3453-48f9-99b0-6c9e50092b15&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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" style="display: none;">
-  <div id="layout-settings-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-bg" class="fixed inset-0 bg-zinc-50/90 transition-opacity" aria-hidden="true" style="display: none;"></div>
-  <div class="fixed inset-0 overflow-y-auto" aria-labelledby="layout-settings-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-title" aria-describedby="layout-settings-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-description" role="dialog" aria-modal="true" tabindex="0">
+<div id="layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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">
+  <div id="layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15-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-settings-078e4676-3453-48f9-99b0-6c9e50092b15-title" aria-describedby="layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&quot;]]]" phx-key="escape" phx-window-keydown="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&quot;]]]" style="display: none;">
-  <span id="layout-settings-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-container-start" tabindex="0" aria-hidden="true"></span>
+        <div id="layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&quot;]]]" phx-key="escape" phx-window-keydown="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15&quot;]]]">
+  <span id="layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&quot;]]]" type="button" class="-m-3 flex-none p-3 opacity-20 hover:opacity-40" aria-label="close">
+            <button phx-click="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-content">
+          <div id="layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15-content">
             
   
     <div class="setting_modal">
@@ -180,35 +180,35 @@
       </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="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-type="layout">
+    <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="078e4676-3453-48f9-99b0-6c9e50092b15" phx-value-type="layout">
       <span class="setting_modal_custom_class_start">OR put your custom classes</span>
       <span class="setting_modal_custom_class_back hidden">Back to settings</span>
     </p>
     <div class="custom_class-form hidden">
-    <div id="custom_class-layout-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" data-phx-component="16">
+    <div id="custom_class-layout-078e4676-3453-48f9-99b0-6c9e50092b15" 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="16">
+  <form phx-change="add" phx-target="2">
   
   
   
   <div class="space-y-8 bg-white mt-10">
     
-    <textarea class="custom-classes w-full" id="dc31bc95-7776-4784-b483-eff90fd0168d" label="Custom Classes:" name="custom_class[custom_classes]">flex flex-row justify-start items-center w-full space-x-3 px-3 py-10</textarea>
+    <textarea class="custom-classes w-full" id="f33fab44-3be1-42d5-8fc1-f332f248cef9" label="Custom Classes:" name="custom_class[custom_classes]">flex flex-row justify-start items-center w-full space-x-3 px-3 py-10</textarea>
     <div phx-feedback-for="custom_class[block_type]" class="phx-no-feedback">
-  <label for="8602d5a4-6f3e-43df-ae3b-a6395776e4b8" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="6cd39b37-2e03-465d-a51b-4b1cd756868c" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="custom_class[block_type]" id="8602d5a4-6f3e-43df-ae3b-a6395776e4b8" 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 ">
+  <input type="hidden" name="custom_class[block_type]" id="6cd39b37-2e03-465d-a51b-4b1cd756868c" 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="4b6098b2-d210-46ae-9dd9-1e86a4f9f0f9" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="c3b0c28a-630d-4dd9-a16e-ae0193bdc286" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="custom_class[block_id]" id="4b6098b2-d210-46ae-9dd9-1e86a4f9f0f9" value="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" 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 ">
+  <input type="hidden" name="custom_class[block_id]" id="c3b0c28a-630d-4dd9-a16e-ae0193bdc286" value="078e4676-3453-48f9-99b0-6c9e50092b15" 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>
   
@@ -220,42 +220,42 @@
   <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="16" phx-value-block-type="layout" phx-value-block-id="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-config="flex" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+      <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="078e4676-3453-48f9-99b0-6c9e50092b15" 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="16" phx-value-block-type="layout" phx-value-block-id="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-config="flex-row" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+      <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="078e4676-3453-48f9-99b0-6c9e50092b15" 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="16" phx-value-block-type="layout" phx-value-block-id="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-config="justify-start" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+      <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="078e4676-3453-48f9-99b0-6c9e50092b15" 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="16" phx-value-block-type="layout" phx-value-block-id="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-config="items-center" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+      <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="078e4676-3453-48f9-99b0-6c9e50092b15" 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="16" phx-value-block-type="layout" phx-value-block-id="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-config="w-full" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+      <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="078e4676-3453-48f9-99b0-6c9e50092b15" 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="16" phx-value-block-type="layout" phx-value-block-id="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-config="space-x-3" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+      <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="078e4676-3453-48f9-99b0-6c9e50092b15" 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="16" phx-value-block-type="layout" phx-value-block-id="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-config="px-3" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+      <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="078e4676-3453-48f9-99b0-6c9e50092b15" 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="16" phx-value-block-type="layout" phx-value-block-id="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-value-config="py-10" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+      <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="078e4676-3453-48f9-99b0-6c9e50092b15" 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>
@@ -266,31 +266,31 @@
 
           </div>
         
-  <span id="layout-settings-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="layout-settings-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-content&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+    <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-078e4676-3453-48f9-99b0-6c9e50092b15&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-title" aria-describedby="layout-tag-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-description" role="dialog" aria-modal="true" tabindex="0">
+<div id="layout-tag-078e4676-3453-48f9-99b0-6c9e50092b15" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-title" aria-describedby="layout-tag-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-container-start" tabindex="0" aria-hidden="true"></span>
+        <div id="layout-tag-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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">
+            <button phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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="layout-tag-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-content">
+          <div id="layout-tag-078e4676-3453-48f9-99b0-6c9e50092b15-content">
             
             
   <form phx-change="validate_tag" phx-submit="save_tag">
@@ -300,34 +300,34 @@
   <div class="space-y-8 bg-white mt-10">
     
     <div phx-feedback-for="tag[tag]" class="phx-no-feedback">
-  <label for="field-tag-layout-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-tag-layout-078e4676-3453-48f9-99b0-6c9e50092b15" class="block text-sm font-semibold leading-6 text-zinc-800">
   Tag Name
 </label>
-  <input type="text" name="tag[tag]" id="field-tag-layout-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" 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 ">
+  <input type="text" name="tag[tag]" id="field-tag-layout-078e4676-3453-48f9-99b0-6c9e50092b15" 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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-type-layout-078e4676-3453-48f9-99b0-6c9e50092b15" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="tag[type]" id="field-type-layout-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" 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 ">
+  <input type="hidden" name="tag[type]" id="field-type-layout-078e4676-3453-48f9-99b0-6c9e50092b15" 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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-id-layout-078e4676-3453-48f9-99b0-6c9e50092b15" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="tag[id]" id="field-id-layout-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" value="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" 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 ">
+  <input type="hidden" name="tag[id]" id="field-id-layout-078e4676-3453-48f9-99b0-6c9e50092b15" value="078e4676-3453-48f9-99b0-6c9e50092b15" 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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-parent_id-layout-078e4676-3453-48f9-99b0-6c9e50092b15" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="tag[parent_id]" id="field-parent_id-layout-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" 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 ">
+  <input type="hidden" name="tag[parent_id]" id="field-parent_id-layout-078e4676-3453-48f9-99b0-6c9e50092b15" 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>
     
@@ -347,7 +347,7 @@
             
           </div>
         
-  <span id="layout-tag-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="layout-tag-078e4676-3453-48f9-99b0-6c9e50092b15-container-end" tabindex="0" aria-hidden="true"></span>
 </div>
       </div>
     </div>
@@ -357,49 +357,49 @@
     <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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-content&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+    <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-078e4676-3453-48f9-99b0-6c9e50092b15&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-title" aria-describedby="delete_confirm-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-description" role="dialog" aria-modal="true" tabindex="0">
+<div id="delete_confirm-078e4676-3453-48f9-99b0-6c9e50092b15" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-title" aria-describedby="delete_confirm-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-container-start" tabindex="0" aria-hidden="true"></span>
+        <div id="delete_confirm-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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">
+            <button phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-content">
+          <div id="delete_confirm-078e4676-3453-48f9-99b0-6c9e50092b15-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-confirm" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;delete&quot;,&quot;value&quot;:{&quot;id&quot;:&quot;cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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="">
+              <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-078e4676-3453-48f9-99b0-6c9e50092b15-confirm" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;delete&quot;,&quot;value&quot;:{&quot;id&quot;:&quot;078e4676-3453-48f9-99b0-6c9e50092b15&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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&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;,{}]]">
+              <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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15-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-078e4676-3453-48f9-99b0-6c9e50092b15&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-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="delete_confirm-078e4676-3453-48f9-99b0-6c9e50092b15-container-end" tabindex="0" aria-hidden="true"></span>
 </div>
       </div>
     </div>
   </div>
 </div>
-    <div id="clear-cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" 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;cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df&quot;}}]]" phx-target="3" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+    <div id="clear-078e4676-3453-48f9-99b0-6c9e50092b15" 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;078e4676-3453-48f9-99b0-6c9e50092b15&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>
@@ -407,13 +407,15 @@
   <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="cb7c34d9-3cce-4df3-ab3a-8bdf5e5381df" class="flex flex-row justify-start items-center w-full space-x-3 px-3 py-10" data-type="layout">
-    <div class="group relative flex flex-col justify-between items-stretch min-h-[200px] w-full border border-dashed border-gray-400 p-1 " id="037ac59a-f95f-4af5-a33f-65a17a406c67" data-type="section" phx-click="edit_section" phx-value-id="037ac59a-f95f-4af5-a33f-65a17a406c67">
+  <div id="078e4676-3453-48f9-99b0-6c9e50092b15" class="flex flex-row justify-start items-center w-full space-x-3 px-3 py-10" data-type="layout">
+    <div class="group relative flex flex-col justify-between items-stretch min-h-[200px] w-full border border-dashed border-gray-400 p-1 " id="9b300f38-afe9-4096-856b-539b25c09ff4" data-type="section" phx-click="edit_section" phx-value-id="9b300f38-afe9-4096-856b-539b25c09ff4">
   
 
   
 
-  
+  <p data-type="text" id="text-4dc05552-8c70-4bee-8279-34476027e427" phx-click="edit_element" phx-value-id="text-4dc05552-8c70-4bee-8279-34476027e427">
+  text
+</p><p data-type="tabs" id="tabs-7e68d64a-2299-4ed2-89fe-2cfee4903203">tabs</p>
 </div>
   </div>
 </div>
diff --git a/lib/mishka_template_creator/components/blocks/element_menu.ex b/lib/mishka_template_creator/components/blocks/element_menu.ex
index 45eef71..17f18f1 100644
--- a/lib/mishka_template_creator/components/blocks/element_menu.ex
+++ b/lib/mishka_template_creator/components/blocks/element_menu.ex
@@ -1,33 +1,6 @@
 defmodule MishkaTemplateCreator.Components.Blocks.ElementMenu do
   use Phoenix.Component
-
-  @layout_items [
-    {"layout", "Layout", "Heroicons.inbox_stack"},
-    {"section", "Section", "Heroicons.inbox_stack"},
-    {"text", "Text", "Heroicons.inbox_stack"},
-    {"tabs", "Tabs", "Heroicons.inbox_stack"},
-    {"columns", "Columns", "Heroicons.inbox_stack"},
-    {"table", "Table", "Heroicons.inbox_stack"},
-    {"accordion", "Accordion", "Heroicons.inbox_stack"}
-  ]
-  @elements_items [
-    {"alerts", "Alerts", "Heroicons.inbox_stack"},
-    {"quotes", "Quotes", "Heroicons.inbox_stack"},
-    {"buttons", "Buttons", "Heroicons.inbox_stack"},
-    {"links", "Links", "Heroicons.inbox_stack"},
-    {"code", "Code", "Heroicons.inbox_stack"},
-    {"notes", "Notes", "Heroicons.inbox_stack"}
-  ]
-  @media_items [
-    {"image", "Image", "Heroicons.inbox_stack"},
-    {"video", "Video", "Heroicons.inbox_stack"},
-    {"gallery", "Gallery", "Heroicons.inbox_stack"},
-    {"thumbnails", "Thumbnails", "Heroicons.inbox_stack"},
-    {"audio", "Audio", "Heroicons.inbox_stack"},
-    {"file", "File", "Heroicons.inbox_stack"},
-    {"pdf", "PDF", "Heroicons.inbox_stack"},
-    {"comparison", "Comparison", "Heroicons.inbox_stack"}
-  ]
+  alias MishkaTemplateCreator.Data.Elements
 
   attr :id, :string, required: true
   attr :title, :string, required: true
@@ -77,17 +50,17 @@ defmodule MishkaTemplateCreator.Components.Blocks.ElementMenu do
   def aside_menu(assigns) do
     assigns =
       assign(assigns,
-        layout_items: @layout_items,
-        elements_items: @elements_items,
-        media_items: @media_items
+        layout_items: Elements.elements(:layout_items),
+        elements_items: Elements.elements(:elements_items),
+        media_items: Elements.elements(:media_items)
       )
 
     ~H"""
-    <.items id="layout" items={@layout_items} title="Layout" />
+    <.items id="layout" items={Elements.elements(:layout_items)} title="Layout" />
     <hr />
-    <.items id="elements" items={@elements_items} title="Elements" />
+    <.items id="elements" items={Elements.elements(:elements_items)} title="Elements" />
     <hr />
-    <.items id="media" items={@media_items} title="Media" />
+    <.items id="media" items={Elements.elements(:media_items)} title="Media" />
     """
   end
 
diff --git a/lib/mishka_template_creator/components/mishka_core_component.ex b/lib/mishka_template_creator/components/mishka_core_component.ex
index ec73141..85c4d8c 100644
--- a/lib/mishka_template_creator/components/mishka_core_component.ex
+++ b/lib/mishka_template_creator/components/mishka_core_component.ex
@@ -1,12 +1,13 @@
 defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
   use Phoenix.Component
   import Phoenix.HTML.Form
+  import MishkaTemplateCreatorWeb.CoreComponents
   alias MishkaTemplateCreator.Data.TailwindSetting
   alias MishkaTemplateCreator.Components.Blocks.{Content, Aside, History}
   alias Phoenix.LiveView.JS
-  import MishkaTemplateCreatorWeb.CoreComponents
+  alias MishkaTemplateCreator.Data.Elements
 
-  @elements_type ["text", "tabs"]
+  @elements Elements.elements(:all, :id)
 
   attr :elemens, :list, required: true
   attr :selected_block, :string, required: true
@@ -180,7 +181,7 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
       type == "section" and parent == "layout" ->
         Map.merge(params, %{id: id, children: [], class: TailwindSetting.default_section()})
 
-      type in @elements_type and parent == "section" ->
+      type in Elements.elements(:all, :id) and parent == "section" ->
         Map.merge(params, %{id: id, children: []})
 
       true ->
@@ -251,8 +252,7 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
     end)
   end
 
-  def change_order(elements, current_index, new_index, parent_id, type)
-      when type in @elements_type do
+  def change_order(elements, current_index, new_index, parent_id, type) when type in @elements do
     Enum.map(elements, fn %{type: "layout", children: children} = layout ->
       updated_children =
         Enum.map(children, fn data ->
diff --git a/lib/mishka_template_creator/data/elements.ex b/lib/mishka_template_creator/data/elements.ex
new file mode 100644
index 0000000..a307051
--- /dev/null
+++ b/lib/mishka_template_creator/data/elements.ex
@@ -0,0 +1,43 @@
+defmodule MishkaTemplateCreator.Data.Elements do
+  @layout_items [
+    {"layout", "Layout", "Heroicons.inbox_stack"},
+    {"section", "Section", "Heroicons.inbox_stack"},
+    {"text", "Text", "Heroicons.inbox_stack"},
+    {"tabs", "Tabs", "Heroicons.inbox_stack"},
+    {"columns", "Columns", "Heroicons.inbox_stack"},
+    {"table", "Table", "Heroicons.inbox_stack"},
+    {"accordion", "Accordion", "Heroicons.inbox_stack"}
+  ]
+  @elements_items [
+    {"alerts", "Alerts", "Heroicons.inbox_stack"},
+    {"quotes", "Quotes", "Heroicons.inbox_stack"},
+    {"buttons", "Buttons", "Heroicons.inbox_stack"},
+    {"links", "Links", "Heroicons.inbox_stack"},
+    {"code", "Code", "Heroicons.inbox_stack"},
+    {"notes", "Notes", "Heroicons.inbox_stack"}
+  ]
+  @media_items [
+    {"image", "Image", "Heroicons.inbox_stack"},
+    {"video", "Video", "Heroicons.inbox_stack"},
+    {"gallery", "Gallery", "Heroicons.inbox_stack"},
+    {"thumbnails", "Thumbnails", "Heroicons.inbox_stack"},
+    {"audio", "Audio", "Heroicons.inbox_stack"},
+    {"file", "File", "Heroicons.inbox_stack"},
+    {"pdf", "PDF", "Heroicons.inbox_stack"},
+    {"comparison", "Comparison", "Heroicons.inbox_stack"}
+  ]
+
+  @spec elements :: [{String.t(), String.t(), String.t()}]
+  def elements(), do: @layout_items ++ @elements_items ++ @media_items
+
+  @spec elements(:elements_items | :layout_items | :media_items) :: [
+          {String.t(), String.t(), String.t()}
+        ]
+  def elements(:layout_items), do: @layout_items
+  def elements(:elements_items), do: @elements_items
+  def elements(:media_items), do: @media_items
+
+  @spec elements(:all | :elements_items | :layout_items | :media_items, :id) :: list(String.t())
+  def elements(:all, :id), do: elements() |> Enum.map(fn {id, _, _} -> id end)
+  def elements(type, :id), do: elements(type) |> Enum.map(fn {id, _, _} -> id end)
+end