From 4eef26e015edb1f0a9f0264390038b1264ccdebe Mon Sep 17 00:00:00 2001
From: shahryar tavakkoli <shahryar.tbiz@gmail.com>
Date: Sat, 22 Apr 2023 12:30:12 +0330
Subject: [PATCH] add layout directory to separate components, based on #74

---
 deployment/templates/test1.html               | 157 ++++++++++--------
 .../components/{blocks => Layout}/aside.ex    |   4 +-
 .../components/{blocks => Layout}/content.ex  |   2 +-
 .../{blocks => Layout}/element_menu.ex        |   6 +-
 .../components/{blocks => Layout}/history.ex  |   2 +-
 .../components/{blocks => Layout}/settings.ex |   2 +-
 .../components/blocks/icon.ex                 |  47 ++++++
 .../components/elements/tab.ex                |   7 +-
 .../components/elements/table.ex              |   2 +-
 .../components/elements/text.ex               |   4 +-
 .../components/mishka_core_component.ex       |  45 +----
 lib/mishka_template_creator/data/elements.ex  |   4 +-
 12 files changed, 153 insertions(+), 129 deletions(-)
 rename lib/mishka_template_creator/components/{blocks => Layout}/aside.ex (97%)
 rename lib/mishka_template_creator/components/{blocks => Layout}/content.ex (96%)
 rename lib/mishka_template_creator/components/{blocks => Layout}/element_menu.ex (92%)
 rename lib/mishka_template_creator/components/{blocks => Layout}/history.ex (91%)
 rename lib/mishka_template_creator/components/{blocks => Layout}/settings.ex (99%)
 create mode 100644 lib/mishka_template_creator/components/blocks/icon.ex

diff --git a/deployment/templates/test1.html b/deployment/templates/test1.html
index e006b21..3aa9b81 100644
--- a/deployment/templates/test1.html
+++ b/deployment/templates/test1.html
@@ -1,7 +1,7 @@
 
-<div data-phx-main="" data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GMWY4U2VRaENCTzNYaDdqZAAMbGl2ZV9zZXNzaW9uaAJkAAdkZWZhdWx0bggAJHHNERj8VxdkAApwYXJlbnRfcGlkZAADbmlsZAAIcm9vdF9waWRkAANuaWxkAAlyb290X3ZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVkAAZyb3V0ZXJkACZFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVuBgBoS2akhwFiAAFRgA.8Ycd1TMdFVY8luY83UhDxRhMiZ0WvCmc8FMwnF7_VK4" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GMWY4U2VRaENCTzNYaDdqbgYAaEtmpIcBYgABUYA.2mItF7PLZTJ1CGlNF09PinuS0VOoodTRwIjswf5DpdA" id="phx-F1f8SeQhCBO3Xh7j" class="phx-connected" data-phx-root-id="phx-F1f8SeQhCBO3Xh7j"><div class="main-body">
+<div data-phx-main="" data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GMWcyRE9kYmRoWndZQWRpZAAMbGl2ZV9zZXNzaW9uaAJkAAdkZWZhdWx0bggArA2niAU2WBdkAApwYXJlbnRfcGlkZAADbmlsZAAIcm9vdF9waWRkAANuaWxkAAlyb290X3ZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVkAAZyb3V0ZXJkACZFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVuBgBPYC-ohwFiAAFRgA.U1wnpFxE1Qox5xT385Ns0ZHeWD84YEYVTjRPtc2MGNo" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GMWcyRE9kYmRoWndZQWRpbgYAT2AvqIcBYgABUYA.Pr5ebr_F-DthVUyptBSDEYSbQ5Nd2rFtbPFLBb5RUoo" id="phx-F1g2DOdbdhZwYAdi" class="phx-connected" data-phx-root-id="phx-F1g2DOdbdhZwYAdi"><div class="main-body">
   <div id="mishka_top_nav" class="top-nav">
-    <div data-phx-component="1" id="phx-F1f8SeQhCBO3Xh7j-1-0">Back To/History</div>
+    <div data-phx-component="1" id="phx-F1g2DOdbdhZwYAdi-1-0">Back To/History</div>
     <div>Main Section</div>
     <div class="flex flex-row gap-2">
       <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-7 h-auto cursor-pointer" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
@@ -22,7 +22,7 @@
     <div id="dragLocation" data-type="dragLocation" data-parent-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="container-c6d24855-ca70-4c75-9a0a-964b9ec73c72" data-type="layout" data-parent-type="dragLocation" data-id="c6d24855-ca70-4c75-9a0a-964b9ec73c72">
+  <div class="create-layout group" id="container-0771ddfa-1f1f-4559-8375-bb952426a2a0" data-type="layout" data-parent-type="dragLocation" data-id="0771ddfa-1f1f-4559-8375-bb952426a2a0">
   <div class="unsortable 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>
@@ -30,25 +30,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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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;remove_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal_custom_class_start&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal_custom_class_back&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;.custom_class-form&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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;}]]" class="unsortable relative z-50 hidden">
-  <div id="layout-settings-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-title" aria-describedby="layout-settings-c6d24855-ca70-4c75-9a0a-964b9ec73c72-description" role="dialog" aria-modal="true" tabindex="0">
+<div id="layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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;remove_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal_custom_class_start&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;.setting_modal_custom_class_back&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;.custom_class-form&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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;}]]" class="unsortable relative z-50 hidden">
+  <div id="layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-title" aria-describedby="layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&quot;]]]" phx-key="escape" phx-window-keydown="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-c6d24855-ca70-4c75-9a0a-964b9ec73c72&quot;]]]">
-  <span id="layout-settings-c6d24855-ca70-4c75-9a0a-964b9ec73c72-container-start" tabindex="0" aria-hidden="true"></span>
+        <div id="layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&quot;]]]" phx-key="escape" phx-window-keydown="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0&quot;]]]">
+  <span id="layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-content">
+          <div id="layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-content">
             
   
     <div class="setting_modal">
@@ -202,7 +202,7 @@
       </span>
     </p>
     <div class="custom_class-form hidden">
-      <div id="custom_class-layout-c6d24855-ca70-4c75-9a0a-964b9ec73c72" data-phx-component="2">
+      <div id="custom_class-layout-0771ddfa-1f1f-4559-8375-bb952426a2a0" 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>
@@ -213,19 +213,19 @@
   
   <div class="space-y-8 bg-white mt-10">
     
-    <textarea class="custom-classes w-full" id="440ca5b5-7148-4f39-9b72-8436c45468d6" label="Custom Classes:" name="custom_class[custom_classes]" phx-click="[[&quot;focus&quot;,{&quot;to&quot;:null}]]">flex flex-row justify-start items-center w-full space-x-3 px-3 py-10</textarea>
+    <textarea class="custom-classes w-full" id="0f10c585-8005-40ee-ab7e-7d9cdabd5251" label="Custom Classes:" name="custom_class[custom_classes]" phx-click="[[&quot;focus&quot;,{&quot;to&quot;:null}]]">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="ba77ab9e-92d9-4117-8e84-9f0826d438b8" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="5f6a86be-e8e5-4bd8-a4df-1e42cd0f3ee4" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="custom_class[block_type]" id="ba77ab9e-92d9-4117-8e84-9f0826d438b8" 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="5f6a86be-e8e5-4bd8-a4df-1e42cd0f3ee4" 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="b33348b2-7af7-4eb0-806f-e69e2355d238" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="31573620-1ee8-4022-9f7b-4d90e9010893" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="custom_class[block_id]" id="b33348b2-7af7-4eb0-806f-e69e2355d238" value="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="31573620-1ee8-4022-9f7b-4d90e9010893" value="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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>
   
@@ -237,42 +237,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="2" phx-value-block-type="layout" phx-value-block-id="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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>
@@ -283,31 +283,31 @@
 
           </div>
         
-  <span id="layout-settings-c6d24855-ca70-4c75-9a0a-964b9ec73c72-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="layout-settings-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-title" aria-describedby="layout-tag-c6d24855-ca70-4c75-9a0a-964b9ec73c72-description" role="dialog" aria-modal="true" tabindex="0">
+<div id="layout-tag-0771ddfa-1f1f-4559-8375-bb952426a2a0" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-title" aria-describedby="layout-tag-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-container-start" tabindex="0" aria-hidden="true"></span>
+        <div id="layout-tag-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-content">
+          <div id="layout-tag-0771ddfa-1f1f-4559-8375-bb952426a2a0-content">
             
             
   <form phx-change="validate" phx-submit="element">
@@ -317,40 +317,40 @@
   <div class="space-y-8 bg-white mt-10">
     
     <div phx-feedback-for="tag[tag]" class="phx-no-feedback">
-  <label for="field-tag-layout-c6d24855-ca70-4c75-9a0a-964b9ec73c72" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-tag-layout-0771ddfa-1f1f-4559-8375-bb952426a2a0" class="block text-sm font-semibold leading-6 text-zinc-800">
   Tag Name
 </label>
-  <input type="text" name="tag[tag]" id="field-tag-layout-c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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-0771ddfa-1f1f-4559-8375-bb952426a2a0" 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 ">
+    <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-c6d24855-ca70-4c75-9a0a-964b9ec73c72" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-type-layout-0771ddfa-1f1f-4559-8375-bb952426a2a0" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="tag[type]" id="field-type-layout-c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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-0771ddfa-1f1f-4559-8375-bb952426a2a0" 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-c6d24855-ca70-4c75-9a0a-964b9ec73c72" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-id-layout-0771ddfa-1f1f-4559-8375-bb952426a2a0" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="tag[id]" id="field-id-layout-c6d24855-ca70-4c75-9a0a-964b9ec73c72" value="c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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-0771ddfa-1f1f-4559-8375-bb952426a2a0" value="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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-c6d24855-ca70-4c75-9a0a-964b9ec73c72" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-parent_id-layout-0771ddfa-1f1f-4559-8375-bb952426a2a0" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <input type="hidden" name="tag[parent_id]" id="field-parent_id-layout-c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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-0771ddfa-1f1f-4559-8375-bb952426a2a0" 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" phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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;,{}]]">
+      <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
       
@@ -364,7 +364,7 @@
             
           </div>
         
-  <span id="layout-tag-c6d24855-ca70-4c75-9a0a-964b9ec73c72-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="layout-tag-0771ddfa-1f1f-4559-8375-bb952426a2a0-container-end" tabindex="0" aria-hidden="true"></span>
 </div>
       </div>
     </div>
@@ -374,49 +374,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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-title" aria-describedby="delete_confirm-c6d24855-ca70-4c75-9a0a-964b9ec73c72-description" role="dialog" aria-modal="true" tabindex="0">
+<div id="delete_confirm-0771ddfa-1f1f-4559-8375-bb952426a2a0" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-title" aria-describedby="delete_confirm-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-container-start" tabindex="0" aria-hidden="true"></span>
+        <div id="delete_confirm-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-content">
+          <div id="delete_confirm-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-confirm" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;delete&quot;,&quot;value&quot;:{&quot;id&quot;:&quot;c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-confirm" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;delete&quot;,&quot;value&quot;:{&quot;id&quot;:&quot;0771ddfa-1f1f-4559-8375-bb952426a2a0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-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-c6d24855-ca70-4c75-9a0a-964b9ec73c72&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-c6d24855-ca70-4c75-9a0a-964b9ec73c72-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="delete_confirm-0771ddfa-1f1f-4559-8375-bb952426a2a0-container-end" tabindex="0" aria-hidden="true"></span>
 </div>
       </div>
     </div>
   </div>
 </div>
-    <div id="clear-c6d24855-ca70-4c75-9a0a-964b9ec73c72" 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;c6d24855-ca70-4c75-9a0a-964b9ec73c72&quot;}}]]" phx-target="3" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+    <div id="clear-0771ddfa-1f1f-4559-8375-bb952426a2a0" 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;0771ddfa-1f1f-4559-8375-bb952426a2a0&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>
@@ -425,13 +425,32 @@
 </svg>
   </div>
 
-  <div id="c6d24855-ca70-4c75-9a0a-964b9ec73c72" class="flex flex-row justify-start items-center w-full space-x-3 px-3 py-10" data-type="layout" data-parent-type="dragLocation" data-id="c6d24855-ca70-4c75-9a0a-964b9ec73c72">
-    <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="34522f6c-03a6-4b55-9013-b54702c57416" data-type="section" phx-click="set" phx-value-id="34522f6c-03a6-4b55-9013-b54702c57416" phx-value-type="section" data-parent-type="layout,section" data-id="34522f6c-03a6-4b55-9013-b54702c57416">
+  <div id="0771ddfa-1f1f-4559-8375-bb952426a2a0" class="flex flex-row justify-start items-center w-full space-x-3 px-3 py-10" data-type="layout" data-parent-type="dragLocation" data-id="0771ddfa-1f1f-4559-8375-bb952426a2a0">
+    <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="b5164063-a744-42fc-8879-55a1faa4d889" data-type="section" phx-click="set" phx-value-id="b5164063-a744-42fc-8879-55a1faa4d889" phx-value-type="section" data-parent-type="layout,section" data-id="b5164063-a744-42fc-8879-55a1faa4d889">
   
 
   
 
+  <div data-type="text" id="text-8958ef0f-b1e7-497f-a64d-7b2e8bbffca1-call" data-id="8958ef0f-b1e7-497f-a64d-7b2e8bbffca1" data-parent-type="section" phx-click="get_element_layout_id" phx-value-myself="4" phx-target="4" class="text-black w-full p-2 text-base" dir="LTR" data-phx-component="4" draggable="false">
+  This is a predefined text. Please click on the text to edit.
+</div><div data-type="tab" id="tab-d967d488-fbe5-446f-b907-868941a22864-call" data-id="d967d488-fbe5-446f-b907-868941a22864" data-parent-type="section" class="text-black w-full text-base p-2" phx-click="get_element_layout_id" phx-value-myself="6" phx-target="6" dir="LTR" data-phx-component="6">
+  <ul class="flex flex-wrap text-sm font-medium text-center mb-6 border-b border-gray-800 gap-6">
+  <li id="23a7a2d5-1916-4bff-9e85-291b987d539b">
+    <button class="flex flex-row py-4 gap-1 justify-center items-center border-b border-blue-500" type="button" phx-click="[[&quot;add_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-23a7a2d5-1916-4bff-9e85-291b987d539b&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;border-b&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;#button-23a7a2d5-1916-4bff-9e85-291b987d539b&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;border-blue-500&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;#button-23a7a2d5-1916-4bff-9e85-291b987d539b&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;hidden&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-23a7a2d5-1916-4bff-9e85-291b987d539b&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;border-b&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;#button-23a7a2d5-1916-4bff-9e85-291b987d539b&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;add_class&quot;,{&quot;names&quot;:[&quot;border-blue-500&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;#button-23a7a2d5-1916-4bff-9e85-291b987d539b&quot;,&quot;transition&quot;:[[],[],[]]}]]" id="button-23a7a2d5-1916-4bff-9e85-291b987d539b">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5" 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>
+      <span class="text-base">Title one</span>
+    </button>
+  </li>
+</ul>
+
   
+
+<div id="content-23a7a2d5-1916-4bff-9e85-291b987d539b" class="p-4 rounded-lg bg-gray-50 text-sm text-gray-500 ">
+  This is some placeholder content the tab's associated content. for changing the data of this tab please click here.
+</div>
+</div>
 </div>
   </div>
 </div>
@@ -521,6 +540,15 @@ <h3 class="mb-4 font-bold">Layout</h3>
     
   </p>
   <p class="text-xs font-bold mt-5 text-center">Accordion</p>
+</div><div data-id="buttons" data-type="buttons" data-parent-type="section" 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">
+  <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">Buttons</p>
 </div>
   </div>
 </div>
@@ -546,15 +574,6 @@ <h3 class="mb-4 font-bold">Elements</h3>
     
   </p>
   <p class="text-xs font-bold mt-5 text-center">Quotes</p>
-</div><div data-id="buttons" data-type="buttons" data-parent-type="section" 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">
-  <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">Buttons</p>
 </div><div data-id="links" data-type="links" data-parent-type="section" 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">
   <p class="mx-auto text-center">
     
diff --git a/lib/mishka_template_creator/components/blocks/aside.ex b/lib/mishka_template_creator/components/Layout/aside.ex
similarity index 97%
rename from lib/mishka_template_creator/components/blocks/aside.ex
rename to lib/mishka_template_creator/components/Layout/aside.ex
index 9871dfd..04dfecb 100644
--- a/lib/mishka_template_creator/components/blocks/aside.ex
+++ b/lib/mishka_template_creator/components/Layout/aside.ex
@@ -1,6 +1,6 @@
-defmodule MishkaTemplateCreator.Components.Blocks.Aside do
+defmodule MishkaTemplateCreator.Components.Layout.Aside do
   use Phoenix.Component
-  alias MishkaTemplateCreator.Components.Blocks.ElementMenu
+  alias MishkaTemplateCreator.Components.Layout.ElementMenu
   alias Phoenix.LiveView.JS
 
   attr(:selected_form, :string, required: false, default: nil)
diff --git a/lib/mishka_template_creator/components/blocks/content.ex b/lib/mishka_template_creator/components/Layout/content.ex
similarity index 96%
rename from lib/mishka_template_creator/components/blocks/content.ex
rename to lib/mishka_template_creator/components/Layout/content.ex
index 71506ef..ea6d16b 100644
--- a/lib/mishka_template_creator/components/blocks/content.ex
+++ b/lib/mishka_template_creator/components/Layout/content.ex
@@ -1,4 +1,4 @@
-defmodule MishkaTemplateCreator.Components.Blocks.Content do
+defmodule MishkaTemplateCreator.Components.Layout.Content do
   use Phoenix.Component
   alias MishkaTemplateCreator.Components.Elements.Layout
 
diff --git a/lib/mishka_template_creator/components/blocks/element_menu.ex b/lib/mishka_template_creator/components/Layout/element_menu.ex
similarity index 92%
rename from lib/mishka_template_creator/components/blocks/element_menu.ex
rename to lib/mishka_template_creator/components/Layout/element_menu.ex
index 6c62e9a..f054f91 100644
--- a/lib/mishka_template_creator/components/blocks/element_menu.ex
+++ b/lib/mishka_template_creator/components/Layout/element_menu.ex
@@ -1,7 +1,7 @@
-defmodule MishkaTemplateCreator.Components.Blocks.ElementMenu do
+defmodule MishkaTemplateCreator.Components.Layout.ElementMenu do
   use Phoenix.Component
   alias MishkaTemplateCreator.Data.Elements
-  alias MishkaTemplateCreatorWeb.MishkaCoreComponent
+  alias MishkaTemplateCreator.Components.Blocks.Icon
 
   attr :id, :string, required: true
   attr :title, :string, required: true
@@ -47,7 +47,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.ElementMenu do
           title={title}
           parent_type={Enum.join(parent_type, ",")}
         >
-          <MishkaCoreComponent.dynamic_icon module={module} />
+          <Icon.dynamic module={module} />
         </.block_menu>
       </div>
     </div>
diff --git a/lib/mishka_template_creator/components/blocks/history.ex b/lib/mishka_template_creator/components/Layout/history.ex
similarity index 91%
rename from lib/mishka_template_creator/components/blocks/history.ex
rename to lib/mishka_template_creator/components/Layout/history.ex
index cff26cb..6196459 100644
--- a/lib/mishka_template_creator/components/blocks/history.ex
+++ b/lib/mishka_template_creator/components/Layout/history.ex
@@ -1,4 +1,4 @@
-defmodule MishkaTemplateCreator.Components.Blocks.History do
+defmodule MishkaTemplateCreator.Components.Layout.History do
   use Phoenix.LiveComponent
 
   @impl true
diff --git a/lib/mishka_template_creator/components/blocks/settings.ex b/lib/mishka_template_creator/components/Layout/settings.ex
similarity index 99%
rename from lib/mishka_template_creator/components/blocks/settings.ex
rename to lib/mishka_template_creator/components/Layout/settings.ex
index f0e058d..f397209 100644
--- a/lib/mishka_template_creator/components/blocks/settings.ex
+++ b/lib/mishka_template_creator/components/Layout/settings.ex
@@ -6,7 +6,7 @@ defmodule MishkaTemplateCreator.Components.Blocks.Settings do
   import MishkaTemplateCreatorWeb.MishkaCoreComponent
 
   alias MishkaTemplateCreator.{
-    Components.Blocks.ElementMenu,
+    Components.Layout.ElementMenu,
     Components.Blocks.CustomClass,
     Data.TailwindSetting,
     Components.ConfigSelector
diff --git a/lib/mishka_template_creator/components/blocks/icon.ex b/lib/mishka_template_creator/components/blocks/icon.ex
new file mode 100644
index 0000000..390113d
--- /dev/null
+++ b/lib/mishka_template_creator/components/blocks/icon.ex
@@ -0,0 +1,47 @@
+defmodule MishkaTemplateCreator.Components.Blocks.Icon do
+  use Phoenix.Component
+  alias MishkaTemplateCreator.Data.TailwindSetting
+
+  attr(:module, :string, required: true)
+  attr(:class, :string, required: false, default: "w-6 h-6 mx-auto stroke-current")
+
+  def dynamic(assigns) do
+    ~H"""
+    <%= Phoenix.LiveView.TagEngine.component(
+      Code.eval_string("&(#{@module}/1)") |> elem(0),
+      [class: @class],
+      {__ENV__.module, __ENV__.function, __ENV__.file, __ENV__.line}
+    ) %>
+    """
+  end
+
+  attr(:myself, :integer, required: true)
+  attr(:selected, :string, required: false, default: nil)
+  attr(:block_id, :string, required: false, default: nil)
+
+  attr(:class, :string,
+    required: false,
+    default: "w-4 h-4 mx-auto stroke-current text-black cursor-pointer"
+  )
+
+  def select(assigns) do
+    assigns = assign(assigns, icons: TailwindSetting.hero_icons())
+
+    ~H"""
+    <div class="flex flex-wrap w-full gap-1 border border-gray-300 p-3 rounded-md mb-3 justify-start">
+      <span
+        :for={icon <- @icons}
+        phx-click="select_icon"
+        phx-value-name={icon}
+        phx-value-block-id={@block_id}
+        phx-target={@myself}
+      >
+        <.dynamic
+          module={"Heroicons.#{icon}"}
+          class={@class <> "#{if @selected == icon, do: " !text-red-600", else: ""}"}
+        />
+      </span>
+    </div>
+    """
+  end
+end
diff --git a/lib/mishka_template_creator/components/elements/tab.ex b/lib/mishka_template_creator/components/elements/tab.ex
index bfab8ad..6b1ce0f 100644
--- a/lib/mishka_template_creator/components/elements/tab.ex
+++ b/lib/mishka_template_creator/components/elements/tab.ex
@@ -3,12 +3,13 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
   import Phoenix.HTML.Form
   use Phoenix.Component
 
-  alias MishkaTemplateCreator.Components.Blocks.Aside
+  alias MishkaTemplateCreator.Components.Layout.Aside
   alias MishkaTemplateCreatorWeb.MishkaCoreComponent
   import MishkaTemplateCreatorWeb.CoreComponents
   alias MishkaTemplateCreator.Data.TailwindSetting
   alias Phoenix.LiveView.JS
   alias MishkaTemplateCreator.Components.Blocks.Tag
+  alias MishkaTemplateCreator.Components.Blocks.Icon
 
   @svg_height [
     "h-1",
@@ -456,7 +457,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
           phx-click={reset_and_select(@children, key)}
           id={"button-#{key}"}
         >
-          <MishkaCoreComponent.dynamic_icon
+          <Icon.dynamic
             module={data["icon"]}
             class={Enum.join(@header["icon"], " ")}
           />
@@ -711,7 +712,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
     <div id={"form-icon-#{@key}"} class="hidden">
       <p class="w-full font-bold text-sm pb-5 border-b border-gray-300 mb-5">Select Tab Icon:</p>
       <div class="px-5 pb-3">
-        <MishkaCoreComponent.select_icons
+        <Icon.select
           selected={String.replace(@data["icon"], "Heroicons.", "")}
           myself={@myself}
           block_id={@key}
diff --git a/lib/mishka_template_creator/components/elements/table.ex b/lib/mishka_template_creator/components/elements/table.ex
index 020c131..5b97e02 100644
--- a/lib/mishka_template_creator/components/elements/table.ex
+++ b/lib/mishka_template_creator/components/elements/table.ex
@@ -4,7 +4,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
   import Phoenix.HTML.Form
   import MishkaTemplateCreatorWeb.CoreComponents
 
-  alias MishkaTemplateCreator.Components.Blocks.Aside
+  alias MishkaTemplateCreator.Components.Layout.Aside
   alias MishkaTemplateCreatorWeb.MishkaCoreComponent
   alias MishkaTemplateCreator.Data.TailwindSetting
   alias Phoenix.LiveView.JS
diff --git a/lib/mishka_template_creator/components/elements/text.ex b/lib/mishka_template_creator/components/elements/text.ex
index e71f23f..0368398 100644
--- a/lib/mishka_template_creator/components/elements/text.ex
+++ b/lib/mishka_template_creator/components/elements/text.ex
@@ -3,7 +3,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
   import Phoenix.HTML.Form
 
   alias MishkaTemplateCreator.Components.Blocks.Tag
-  alias MishkaTemplateCreator.Components.Blocks.Aside
+  alias MishkaTemplateCreator.Components.Layout.Aside
   alias MishkaTemplateCreatorWeb.MishkaCoreComponent
   import MishkaTemplateCreatorWeb.CoreComponents
   alias MishkaTemplateCreator.Data.TailwindSetting
@@ -107,7 +107,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
           </ul>
         </div>
 
-        <Aside.aside_accordion id={"text-#{@id}"} title="Change Text" open={false}>
+        <Aside.aside_accordion id={"text-#{@id}"} title="Change Text">
           <MishkaCoreComponent.custom_simple_form
             :let={f}
             for={%{}}
diff --git a/lib/mishka_template_creator/components/mishka_core_component.ex b/lib/mishka_template_creator/components/mishka_core_component.ex
index e5bfc45..c1ba513 100644
--- a/lib/mishka_template_creator/components/mishka_core_component.ex
+++ b/lib/mishka_template_creator/components/mishka_core_component.ex
@@ -3,7 +3,7 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
   import Phoenix.HTML.Form
   import MishkaTemplateCreatorWeb.CoreComponents
   alias MishkaTemplateCreator.Data.TailwindSetting
-  alias MishkaTemplateCreator.Components.Blocks.{Content, Aside, History}
+  alias MishkaTemplateCreator.Components.Layout.{Content, Aside, History}
   alias Phoenix.LiveView.JS
   alias MishkaTemplateCreator.Data.Elements
 
@@ -212,49 +212,6 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
     """
   end
 
-  attr(:module, :string, required: true)
-  attr(:class, :string, required: false, default: "w-6 h-6 mx-auto stroke-current")
-
-  def dynamic_icon(assigns) do
-    ~H"""
-    <%= Phoenix.LiveView.TagEngine.component(
-      Code.eval_string("&(#{@module}/1)") |> elem(0),
-      [class: @class],
-      {__ENV__.module, __ENV__.function, __ENV__.file, __ENV__.line}
-    ) %>
-    """
-  end
-
-  attr(:class, :string,
-    required: false,
-    default: "w-4 h-4 mx-auto stroke-current text-black cursor-pointer"
-  )
-
-  attr(:myself, :integer, required: true)
-  attr(:selected, :string, required: false, default: nil)
-  attr(:block_id, :string, required: false, default: nil)
-
-  def select_icons(assigns) do
-    assigns = assign(assigns, icons: TailwindSetting.hero_icons())
-
-    ~H"""
-    <div class="flex flex-wrap w-full gap-1 border border-gray-300 p-3 rounded-md mb-3 justify-start">
-      <span
-        :for={icon <- @icons}
-        phx-click="select_icon"
-        phx-value-name={icon}
-        phx-value-block-id={@block_id}
-        phx-target={@myself}
-      >
-        <.dynamic_icon
-          module={"Heroicons.#{icon}"}
-          class={@class <> "#{if @selected == icon, do: " !text-red-600", else: ""}"}
-        />
-      </span>
-    </div>
-    """
-  end
-
   attr(:myself, :integer, required: true)
   attr(:classes, :list, required: true)
   attr(:title, :string, required: false, default: "Color:")
diff --git a/lib/mishka_template_creator/data/elements.ex b/lib/mishka_template_creator/data/elements.ex
index b8c031c..bb981d8 100644
--- a/lib/mishka_template_creator/data/elements.ex
+++ b/lib/mishka_template_creator/data/elements.ex
@@ -5,12 +5,12 @@ defmodule MishkaTemplateCreator.Data.Elements do
     {"text", "Text", "Heroicons.inbox_stack", ["section"]},
     {"tab", "Tab", "Heroicons.inbox_stack", ["section"]},
     {"table", "Table", "Heroicons.inbox_stack", ["section"]},
-    {"accordion", "Accordion", "Heroicons.inbox_stack", ["section"]}
+    {"accordion", "Accordion", "Heroicons.inbox_stack", ["section"]},
+    {"buttons", "Buttons", "Heroicons.inbox_stack", ["section"]}
   ]
   @elements_items [
     {"alerts", "Alerts", "Heroicons.inbox_stack", ["section"]},
     {"quotes", "Quotes", "Heroicons.inbox_stack", ["section"]},
-    {"buttons", "Buttons", "Heroicons.inbox_stack", ["section"]},
     {"links", "Links", "Heroicons.inbox_stack", ["section"]},
     {"code", "Code", "Heroicons.inbox_stack", ["section"]},
     {"notes", "Notes", "Heroicons.inbox_stack", ["section"]}