diff --git a/deployment/templates/test1.html b/deployment/templates/test1.html
index 3aa9b81..6f26515 100644
--- a/deployment/templates/test1.html
+++ b/deployment/templates/test1.html
@@ -1,7 +1,7 @@
 
-<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 data-phx-main="" data-phx-session="SFMyNTY.g2gDaAJhBXQAAAAIZAACaWRtAAAAFHBoeC1GMWcycWJOUEx0M2lGZ1hoZAAMbGl2ZV9zZXNzaW9uaAJkAAdkZWZhdWx0bggArA2niAU2WBdkAApwYXJlbnRfcGlkZAADbmlsZAAIcm9vdF9waWRkAANuaWxkAAlyb290X3ZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVkAAZyb3V0ZXJkACZFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlJvdXRlcmQAB3Nlc3Npb250AAAAAGQABHZpZXdkADNFbGl4aXIuTWlzaGthVGVtcGxhdGVDcmVhdG9yV2ViLlRlbXBsYXRlQ3JlYXRvckxpdmVuBgDspjmohwFiAAFRgA.JBX3GLZTK_PFv1SM62TMuMhp6oMVnB5WAz38rCQSAX4" data-phx-static="SFMyNTY.g2gDaAJhBXQAAAADZAAKYXNzaWduX25ld2pkAAVmbGFzaHQAAAAAZAACaWRtAAAAFHBoeC1GMWcycWJOUEx0M2lGZ1hobgYA7KY5qIcBYgABUYA.D1J4QhzbgFgOA0ENJk1RcSx6Eu5w4sC84VhViY6W9N4" id="phx-F1g2qbNPLt3iFgXh" class="phx-connected" data-phx-root-id="phx-F1g2qbNPLt3iFgXh"><div class="main-body">
   <div id="mishka_top_nav" class="top-nav">
-    <div data-phx-component="1" id="phx-F1g2DOdbdhZwYAdi-1-0">Back To/History</div>
+    <div data-phx-component="1" id="phx-F1g2qbNPLt3iFgXh-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-0771ddfa-1f1f-4559-8375-bb952426a2a0" data-type="layout" data-parent-type="dragLocation" data-id="0771ddfa-1f1f-4559-8375-bb952426a2a0">
+  <div class="create-layout group" id="container-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" data-type="layout" data-parent-type="dragLocation" data-id="97f294fd-1274-4f43-9542-c0b2a3b1f4c0">
   <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-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">
+    <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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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 id="layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-title" aria-describedby="layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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 id="layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&quot;]]]" phx-key="escape" phx-window-keydown="[[&quot;exec&quot;,[&quot;data-reset&quot;,&quot;#layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&quot;]]]">
+  <span id="layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-0771ddfa-1f1f-4559-8375-bb952426a2a0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-content">
+          <div id="layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-content">
             
   
     <div class="setting_modal">
@@ -202,7 +202,7 @@
       </span>
     </p>
     <div class="custom_class-form hidden">
-      <div id="custom_class-layout-0771ddfa-1f1f-4559-8375-bb952426a2a0" data-phx-component="2">
+      <div id="custom_class-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="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>
+    <textarea class="custom-classes w-full" id="f48600ff-7802-4448-8352-9378c1992544" 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="5f6a86be-e8e5-4bd8-a4df-1e42cd0f3ee4" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="228edbda-5975-4153-8f10-96a093fb0cd4" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <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 ">
+  <input type="hidden" name="custom_class[block_type]" id="228edbda-5975-4153-8f10-96a093fb0cd4" 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="31573620-1ee8-4022-9f7b-4d90e9010893" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="9d87ce73-f43b-4ede-980d-fc6a7feedf75" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <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 ">
+  <input type="hidden" name="custom_class[block_id]" id="9d87ce73-f43b-4ede-980d-fc6a7feedf75" value="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="0771ddfa-1f1f-4559-8375-bb952426a2a0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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-0771ddfa-1f1f-4559-8375-bb952426a2a0-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="layout-settings-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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">
+    <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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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 id="layout-tag-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-title" aria-describedby="layout-tag-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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 id="layout-tag-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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">
+            <button phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#layout-tag-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-content">
+          <div id="layout-tag-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-content">
             
             
   <form phx-change="validate" phx-submit="element">
@@ -317,34 +317,34 @@
   <div class="space-y-8 bg-white mt-10">
     
     <div phx-feedback-for="tag[tag]" class="phx-no-feedback">
-  <label for="field-tag-layout-0771ddfa-1f1f-4559-8375-bb952426a2a0" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-tag-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" class="block text-sm font-semibold leading-6 text-zinc-800">
   Tag Name
 </label>
-  <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 ">
+  <input type="text" name="tag[tag]" id="field-tag-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" class="mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px] text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6 phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5 border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5 ">
   
 </div>
     <p class="text-sm text-red-500">
       Please use only letters and numbers in naming and also keep in mind that you can only use (<code class="text-pink-400">-</code>) between letters. It should be noted, the tag name must be more than 4 characters.
     </p>
     <div phx-feedback-for="tag[type]" class="phx-no-feedback">
-  <label for="field-type-layout-0771ddfa-1f1f-4559-8375-bb952426a2a0" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-type-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <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 ">
+  <input type="hidden" name="tag[type]" id="field-type-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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-0771ddfa-1f1f-4559-8375-bb952426a2a0" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-id-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <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 ">
+  <input type="hidden" name="tag[id]" id="field-id-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" value="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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-0771ddfa-1f1f-4559-8375-bb952426a2a0" class="block text-sm font-semibold leading-6 text-zinc-800">
+  <label for="field-parent_id-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" class="block text-sm font-semibold leading-6 text-zinc-800">
   
 </label>
-  <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 ">
+  <input type="hidden" name="tag[parent_id]" id="field-parent_id-layout-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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>
     
@@ -364,7 +364,7 @@
             
           </div>
         
-  <span id="layout-tag-0771ddfa-1f1f-4559-8375-bb952426a2a0-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="layout-tag-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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">
+    <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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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 id="delete_confirm-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" phx-remove="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-title" aria-describedby="delete_confirm-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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 id="delete_confirm-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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">
+            <button phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#delete_confirm-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-content">
+          <div id="delete_confirm-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-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="">
+              <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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-confirm" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;delete&quot;,&quot;value&quot;:{&quot;id&quot;:&quot;97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-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;,{}]]">
+              <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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-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-97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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-0771ddfa-1f1f-4559-8375-bb952426a2a0-container-end" tabindex="0" aria-hidden="true"></span>
+  <span id="delete_confirm-97f294fd-1274-4f43-9542-c0b2a3b1f4c0-container-end" tabindex="0" aria-hidden="true"></span>
 </div>
       </div>
     </div>
   </div>
 </div>
-    <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">
+    <div id="clear-97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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;97f294fd-1274-4f43-9542-c0b2a3b1f4c0&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,266 +425,5300 @@
 </svg>
   </div>
 
-  <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 id="97f294fd-1274-4f43-9542-c0b2a3b1f4c0" 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="97f294fd-1274-4f43-9542-c0b2a3b1f4c0">
+    <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="ddf34c1f-becc-4671-aa66-bb26d0a42672" data-type="section" phx-click="set" phx-value-id="ddf34c1f-becc-4671-aa66-bb26d0a42672" phx-value-type="section" data-parent-type="layout,section" data-id="ddf34c1f-becc-4671-aa66-bb26d0a42672">
   
 
   
 
-  <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">
+  <div data-type="text" id="text-c06062ad-c40d-4bee-8c26-b691c3d60b5a-call" data-id="c06062ad-c40d-4bee-8c26-b691c3d60b5a" data-parent-type="section" phx-click="get_element_layout_id" phx-value-myself="4" phx-target="4" class="w-full p-2 text-base text-fuchsia-700" dir="LTR" data-phx-component="4" style="">
   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 data-type="table" id="table-b46a7a9f-f855-48b9-90ef-7d592258e622-call" data-id="b46a7a9f-f855-48b9-90ef-7d592258e622" data-parent-type="section" phx-click="get_element_layout_id" phx-value-myself="6" phx-target="6" class="text-black w-full text-base p-2" dir="LTR" data-phx-component="6">
+  <div class="relative overflow-x-auto">
+    <table class="w-full">
+      <thead class="text-justify text-violet-800 text-2xl" dir="LTR">
+        <tr>
+          <th scope="col" class="px-6 py-3">
+            Product name
+          </th><th scope="col" class="px-6 py-3">
+            Color
+          </th><th scope="col" class="px-6 py-3">
+            Category
+          </th><th scope="col" class="px-6 py-3">
+            Price
+          </th>
+        </tr>
+      </thead>
+      <tbody dir="LTR">
+        <tr class="border-b border-gray-400">
+          <td class="px-6 py-4">
+            Apple MacBook Pro 17"
+          </td><td class="px-6 py-4">
+            Silver
+          </td><td class="px-6 py-4">
+            Laptop
+          </td><td class="px-6 py-4">
+            $2999
+          </td>
+        </tr><tr class="border-b border-gray-400">
+          <td class="px-6 py-4">
+            Microsoft Surface Pro
+          </td><td class="px-6 py-4">
+            White
+          </td><td class="px-6 py-4">
+            Laptop PC
+          </td><td class="px-6 py-4">
+            $1999
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
 </div>
   </div>
 </div>
 </div>
     <div id="aside" class="flex flex-col w-[95%] h-[300px] mx-auto bg-white border-t-0 border-l border-r border-b border-[rgb(229,229,229)] rounded-t-md md:pb-20 overflow-y-scroll overflow-x-hidden lg:w-5/12 lg:h-screen lg:mx-0 xl:w-4/12">
-  <div class="flex flex-row justify-between items-stretch p-4 border-b border-[rgb(229,229,229)]">
-    <div class="font-bold flex flex-row justify-start items-center space-x-1 text-2xl">
-      <span>
-        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-7 h-7 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="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"></path>
+  
+  
+
+  <div id="aside-content">
+    
+
+    <div data-phx-component="7" id="phx-F1g2qbNPLt3iFgXh-7-0">
+  <div id="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form" class="flex flex-col w-full pt-5">
+  <div class="flex flex-row justify-between border-b pb-5 w-full">
+    <h3 class="flex flex-row px-5 text-2xl font-bold gap-2 items-center">
+      <span class="mt-1 border border-gray-300 rounded-md p-1">
+        <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="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
 </svg>
       </span>
-      <span>List of Blocks</span>
-    </div>
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mx-auto stroke-current mt-1" fill="none" phx-click="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#aside&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;remove_class&quot;,{&quot;names&quot;:[&quot;text-gray-800&quot;],&quot;time&quot;:200,&quot;to&quot;:&quot;#blocks_stack&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+      <span class="mt-1">Settings:</span>
+    </h3>
+
+    <div class="px-5 flex flex-row items-center text-2xl gap-2 cursor-pointer hover:text-gray-500 hover:duration-150 duration-150" phx-click="back">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 mt-2" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"></path>
 </svg>
+      <span class="mt-1">Back</span>
     </div>
   </div>
-  <div id="mishka_search" class="w-full border-b border-[rgb(229,229,229)]">
-    <div class="relative">
-      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-        <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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
-</svg>
-      </div>
-      <input type="text" id="search_blocks" class="border-0 focus:ring-blue-300 focus:border-blue-300 block w-full pl-10 p-2.5" placeholder="Search Blocks">
+
+  <div class="flex flex-col w-full p-5 justify-start items-start gap-5">
+    
+    <div class="w-full text-sm font-medium text-center text-gray-500 border-b border-gray-200 items-center mx-auto mb-4">
+      <ul class="w-full flex flex-row -mb-px justify-center items-center">
+        <li>
+          <a href="#" class="inline-block p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg" aria-current="page">
+            Quick edit
+          </a>
+        </li>
+        <li>
+          <a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 relative">
+            Advanced edit
+            <div class="absolute inline-flex items-center justify-center text-whitebg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded border border-blue-400 -top-2 -right-2">
+              Soon
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 relative">
+            Presets
+            <div class="absolute inline-flex items-center justify-center text-whitebg-pink-100 text-pink-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded border border-pink-400 -top-2 -right-2">
+              Pro
+            </div>
+          </a>
+        </li>
+      </ul>
     </div>
+
+    <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span>
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="add" phx-target="7" phx-value-type="header" 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>
+      </span>
+    <span class="my-4 w-full text-center font-bold select-none text-lg">Table Header Content:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Table-Header-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Table-Header-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Header-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Table-Header-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Table-Header-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Header-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
   </div>
 
-  <div id="aside-content">
-    <div id="layout" class="flex flex-col px-2 py-4 mx-auto w-full">
-  <h3 class="mb-4 font-bold">Layout</h3>
-  <div id="layout-block" class="grid grid-cols-3 gap-4 text-gray-700 lg:grid-cols-3 2xl:grid-cols-4">
-    <div data-id="layout" data-type="layout" data-parent-type="dragLocation" 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">
+  <div class="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Header-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full ">
     
-      <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>
+      <div class="w-full flex flex-col gap-3 space-y-4 pt-3">
+        
+
+        <div class="w-full flex flex-row justify-between items-center">
+          <span class="font-bold text-base" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0-span-title" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}]]">
+            Product name
+          </span>
+          <div id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" class="hidden">
+            <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Layout</p>
-</div><div data-id="section" data-type="section" data-parent-type="layout,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">
+              <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0-title-text" name="table_header_component[title]" placeholder="Change Tag name" type="text" value="Product name">
+
+              <div phx-feedback-for="table_header_component[index]" class="phx-no-feedback">
+  <label for="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0-title-id" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_header_component[index]" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0-title-id" value="0" 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>
+
+              <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0-span-title&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}]]">
+                Save
+              </button>
+            
     
-      <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>
+  </div>
+
+</form>
+          </div>
+
+          <div class="flex flex-row justify-end items-center gap-2">
+            <div class="flex flex-row justify-center items-start gap-2 cursor-pointer" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0-span-title&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}]]">
+              <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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
 </svg>
-    
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Section</p>
-</div><div data-id="text" data-type="text" 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>
+              <span class="text-base select-none">
+                Edit
+              </span>
+            </div>
+            <div class="flex flex-row justify-center items-start gap-2 cursor-pointer" phx-click="delete" phx-value-type="header" phx-value-index="0" phx-target="7">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600" fill="none" 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>
+              <span class="text-base select-none">Delete</span>
+            </div>
+          </div>
+        </div><div class="w-full flex flex-row justify-between items-center">
+          <span class="font-bold text-base" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1-span-title" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}]]">
+            Color
+          </span>
+          <div id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" class="hidden">
+            <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Text</p>
-</div><div data-id="tab" data-type="tab" 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">
+              <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1-title-text" name="table_header_component[title]" placeholder="Change Tag name" type="text" value="Color">
+
+              <div phx-feedback-for="table_header_component[index]" class="phx-no-feedback">
+  <label for="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1-title-id" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_header_component[index]" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1-title-id" value="1" 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>
+
+              <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1-span-title&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}]]">
+                Save
+              </button>
+            
     
-      <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>
+  </div>
+
+</form>
+          </div>
+
+          <div class="flex flex-row justify-end items-center gap-2">
+            <div class="flex flex-row justify-center items-start gap-2 cursor-pointer" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1-span-title&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}]]">
+              <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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
 </svg>
-    
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Tab</p>
-</div><div data-id="table" data-type="table" 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>
+              <span class="text-base select-none">
+                Edit
+              </span>
+            </div>
+            <div class="flex flex-row justify-center items-start gap-2 cursor-pointer" phx-click="delete" phx-value-type="header" phx-value-index="1" phx-target="7">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600" fill="none" 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>
+              <span class="text-base select-none">Delete</span>
+            </div>
+          </div>
+        </div><div class="w-full flex flex-row justify-between items-center">
+          <span class="font-bold text-base" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2-span-title" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}]]">
+            Category
+          </span>
+          <div id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" class="hidden">
+            <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Table</p>
-</div><div data-id="accordion" data-type="accordion" 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">
+              <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2-title-text" name="table_header_component[title]" placeholder="Change Tag name" type="text" value="Category">
+
+              <div phx-feedback-for="table_header_component[index]" class="phx-no-feedback">
+  <label for="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2-title-id" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_header_component[index]" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2-title-id" value="2" 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>
+
+              <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2-span-title&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}]]">
+                Save
+              </button>
+            
     
-      <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>
+  </div>
+
+</form>
+          </div>
+
+          <div class="flex flex-row justify-end items-center gap-2">
+            <div class="flex flex-row justify-center items-start gap-2 cursor-pointer" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2-span-title&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}]]">
+              <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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
 </svg>
-    
-  </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>
+              <span class="text-base select-none">
+                Edit
+              </span>
+            </div>
+            <div class="flex flex-row justify-center items-start gap-2 cursor-pointer" phx-click="delete" phx-value-type="header" phx-value-index="2" phx-target="7">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600" fill="none" 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>
+              <span class="text-base select-none">Delete</span>
+            </div>
+          </div>
+        </div><div class="w-full flex flex-row justify-between items-center">
+          <span class="font-bold text-base" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3-span-title" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}]]">
+            Price
+          </span>
+          <div id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" class="hidden">
+            <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Buttons</p>
-</div>
-  </div>
+              <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3-title-text" name="table_header_component[title]" placeholder="Change Tag name" type="text" value="Price">
+
+              <div phx-feedback-for="table_header_component[index]" class="phx-no-feedback">
+  <label for="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3-title-id" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_header_component[index]" id="title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3-title-id" value="3" 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>
-<hr>
-<div id="elements" class="flex flex-col px-2 py-4 mx-auto w-full">
-  <h3 class="mb-4 font-bold">Elements</h3>
-  <div id="elements-block" class="grid grid-cols-3 gap-4 text-gray-700 lg:grid-cols-3 2xl:grid-cols-4">
-    <div data-id="alerts" data-type="alerts" 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">
+
+              <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3-span-title&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}]]">
+                Save
+              </button>
+            
     
-      <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>
+  </div>
+
+</form>
+          </div>
+
+          <div class="flex flex-row justify-end items-center gap-2">
+            <div class="flex flex-row justify-center items-start gap-2 cursor-pointer" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3-span-title&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}]]">
+              <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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
 </svg>
-    
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Alerts</p>
-</div><div data-id="quotes" data-type="quotes" 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>
+              <span class="text-base select-none">
+                Edit
+              </span>
+            </div>
+            <div class="flex flex-row justify-center items-start gap-2 cursor-pointer" phx-click="delete" phx-value-type="header" phx-value-index="3" phx-target="7">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600" fill="none" 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>
+              <span class="text-base select-none">Delete</span>
+            </div>
+          </div>
+        </div>
+      </div>
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Quotes</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">
-    
-      <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>
+  </div>
+</section>
+
+    <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span>
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="add" phx-target="7" phx-value-type="content" 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>
-    
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Links</p>
-</div><div data-id="code" data-type="code" 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>
+      </span>
+    <span class="my-4 w-full text-center font-bold select-none text-lg">Table Row Content:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Table-Row-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Table-Row-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Row-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
 </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Table-Row-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Table-Row-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Row-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Row-Content-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full ">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Code</p>
-</div><div data-id="notes" data-type="notes" 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>
+      <div class="flex flex-col w-full gap-3 space-y-4 pt-3">
+        
+
+        <div class="w-full flex flex-col justify-between items-center">
+          <div class="w-full flex flex-row justify-between items-center pb-3">
+            <span class="text-base select-none cursor-pointer" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#table-content-b46a7a9f-f855-48b9-90ef-7d592258e622-form-ea52892b-5786-4a59-9ea4-914fb71be421&quot;}]]">
+              Row-1:
+            </span>
+            <div class="flex flex-row justify-end items-center gap-2">
+              <div class="flex flex-row justify-center items-start gap-1 cursor-pointer" phx-click="[[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#table-content-b46a7a9f-f855-48b9-90ef-7d592258e622-form-ea52892b-5786-4a59-9ea4-914fb71be421&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;push&quot;,{&quot;event&quot;:&quot;add_item&quot;,&quot;value&quot;:{&quot;id&quot;:&quot;ea52892b-5786-4a59-9ea4-914fb71be421&quot;,&quot;type&quot;:&quot;content&quot;}}]]" phx-target="7">
+                <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="M12 4.5v15m7.5-7.5h-15"></path>
 </svg>
+                <span class="text-base select-none">Add</span>
+              </div>
+              <div class="flex flex-row justify-center items-start gap-1 cursor-pointer" phx-click="delete" phx-value-type="content" phx-value-id="ea52892b-5786-4a59-9ea4-914fb71be421" phx-target="7">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600" fill="none" 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>
+                <span class="text-base select-none">Delete</span>
+              </div>
+            </div>
+          </div>
+          <div id="table-content-b46a7a9f-f855-48b9-90ef-7d592258e622-form-ea52892b-5786-4a59-9ea4-914fb71be421" class="w-full ">
+            <div class="w-full flex flex-wrap p-3 gap-2 items-start">
+              
+              <span class="group text-sm border border-gray-200 rounded-md py-2 px-3 bg-gray-100 relative mb-3">
+                <span id="content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0">Apple MacBook Pro 17"</span>
+
+                <div id="content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" class="hidden">
+                  <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Notes</p>
+                    <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="content-title-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" name="table_content_component[title]" placeholder="Change Tag name" type="text" value="Apple MacBook Pro 17&quot;">
+
+                    <div phx-feedback-for="table_content_component[index]" class="phx-no-feedback">
+  <label for="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[index]" id="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" value="0" 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>
+
+                    <div phx-feedback-for="table_content_component[id]" class="phx-no-feedback">
+  <label for="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[id]" id="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" value="ea52892b-5786-4a59-9ea4-914fb71be421" 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>
-<hr>
-<div id="media" class="flex flex-col px-2 py-4 mx-auto w-full">
-  <h3 class="mb-4 font-bold">Media</h3>
-  <div id="media-block" class="grid grid-cols-3 gap-4 text-gray-700 lg:grid-cols-3 2xl:grid-cols-4">
-    <div data-id="image" data-type="image" 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">
+
+                    <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}]]">
+                      Save
+                    </button>
+                  
     
-      <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>
+  </div>
+
+</form>
+                </div>
+                <span class="hidden group-hover:flex group-hover:absolute left-1 duration-100 group-hover:duration-150 gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600 cursor-pointer" fill="none" phx-click="delete_item" phx-target="7" phx-value-id="ea52892b-5786-4a59-9ea4-914fb71be421" phx-value-index="0" phx-value-type="content_item" 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>
-    
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Image</p>
-</div><div data-id="video" data-type="video" 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 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
 </svg>
+                </span>
+              </span><span class="group text-sm border border-gray-200 rounded-md py-2 px-3 bg-gray-100 relative mb-3">
+                <span id="content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1">Silver</span>
+
+                <div id="content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" class="hidden">
+                  <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Video</p>
-</div><div data-id="gallery" data-type="gallery" 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">
+                    <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="content-title-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" name="table_content_component[title]" placeholder="Change Tag name" type="text" value="Silver">
+
+                    <div phx-feedback-for="table_content_component[index]" class="phx-no-feedback">
+  <label for="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[index]" id="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" value="1" 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="table_content_component[id]" class="phx-no-feedback">
+  <label for="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[id]" id="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" value="ea52892b-5786-4a59-9ea4-914fb71be421" 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>
+
+                    <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}]]">
+                      Save
+                    </button>
+                  
     
-      <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>
+  </div>
+
+</form>
+                </div>
+                <span class="hidden group-hover:flex group-hover:absolute left-1 duration-100 group-hover:duration-150 gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600 cursor-pointer" fill="none" phx-click="delete_item" phx-target="7" phx-value-id="ea52892b-5786-4a59-9ea4-914fb71be421" phx-value-index="1" phx-value-type="content_item" 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>
-    
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Gallery</p>
-</div><div data-id="thumbnails" data-type="thumbnails" 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 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
 </svg>
+                </span>
+              </span><span class="group text-sm border border-gray-200 rounded-md py-2 px-3 bg-gray-100 relative mb-3">
+                <span id="content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2">Laptop</span>
+
+                <div id="content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" class="hidden">
+                  <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Thumbnails</p>
-</div><div data-id="audio" data-type="audio" 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">
+                    <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="content-title-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" name="table_content_component[title]" placeholder="Change Tag name" type="text" value="Laptop">
+
+                    <div phx-feedback-for="table_content_component[index]" class="phx-no-feedback">
+  <label for="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[index]" id="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" value="2" 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="table_content_component[id]" class="phx-no-feedback">
+  <label for="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[id]" id="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" value="ea52892b-5786-4a59-9ea4-914fb71be421" 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>
+
+                    <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}]]">
+                      Save
+                    </button>
+                  
     
-      <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>
+  </div>
+
+</form>
+                </div>
+                <span class="hidden group-hover:flex group-hover:absolute left-1 duration-100 group-hover:duration-150 gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600 cursor-pointer" fill="none" phx-click="delete_item" phx-target="7" phx-value-id="ea52892b-5786-4a59-9ea4-914fb71be421" phx-value-index="2" phx-value-type="content_item" 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>
-    
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Audio</p>
-</div><div data-id="file" data-type="file" 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 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
 </svg>
+                </span>
+              </span><span class="group text-sm border border-gray-200 rounded-md py-2 px-3 bg-gray-100 relative mb-3">
+                <span id="content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3">$2999</span>
+
+                <div id="content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" class="hidden">
+                  <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">File</p>
-</div><div data-id="pdf" data-type="pdf" 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>
+                    <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="content-title-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" name="table_content_component[title]" placeholder="Change Tag name" type="text" value="$2999">
+
+                    <div phx-feedback-for="table_content_component[index]" class="phx-no-feedback">
+  <label for="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[index]" id="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" value="3" 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="table_content_component[id]" class="phx-no-feedback">
+  <label for="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[id]" id="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" value="ea52892b-5786-4a59-9ea4-914fb71be421" 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>
+
+                    <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}]]">
+                      Save
+                    </button>
+                  
+    
+  </div>
+
+</form>
+                </div>
+                <span class="hidden group-hover:flex group-hover:absolute left-1 duration-100 group-hover:duration-150 gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600 cursor-pointer" fill="none" phx-click="delete_item" phx-target="7" phx-value-id="ea52892b-5786-4a59-9ea4-914fb71be421" phx-value-index="3" phx-value-type="content_item" 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>
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
+</svg>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div><div class="w-full flex flex-col justify-between items-center">
+          <div class="w-full flex flex-row justify-between items-center pb-3">
+            <span class="text-base select-none cursor-pointer" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#table-content-b46a7a9f-f855-48b9-90ef-7d592258e622-form-e6a50c6e-16f7-4812-a057-2cdb1f74ffc6&quot;}]]">
+              Row-2:
+            </span>
+            <div class="flex flex-row justify-end items-center gap-2">
+              <div class="flex flex-row justify-center items-start gap-1 cursor-pointer" phx-click="[[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;#table-content-b46a7a9f-f855-48b9-90ef-7d592258e622-form-e6a50c6e-16f7-4812-a057-2cdb1f74ffc6&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;push&quot;,{&quot;event&quot;:&quot;add_item&quot;,&quot;value&quot;:{&quot;id&quot;:&quot;e6a50c6e-16f7-4812-a057-2cdb1f74ffc6&quot;,&quot;type&quot;:&quot;content&quot;}}]]" phx-target="7">
+                <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="M12 4.5v15m7.5-7.5h-15"></path>
+</svg>
+                <span class="text-base select-none">Add</span>
+              </div>
+              <div class="flex flex-row justify-center items-start gap-1 cursor-pointer" phx-click="delete" phx-value-type="content" phx-value-id="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" phx-target="7">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600" fill="none" 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>
+                <span class="text-base select-none">Delete</span>
+              </div>
+            </div>
+          </div>
+          <div id="table-content-b46a7a9f-f855-48b9-90ef-7d592258e622-form-e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" class="w-full hidden">
+            <div class="w-full flex flex-wrap p-3 gap-2 items-start">
+              
+              <span class="group text-sm border border-gray-200 rounded-md py-2 px-3 bg-gray-100 relative mb-3">
+                <span id="content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0">Microsoft Surface Pro</span>
+
+                <div id="content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" class="hidden">
+                  <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">PDF</p>
-</div><div data-id="comparison" data-type="comparison" 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">
+                    <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="content-title-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" name="table_content_component[title]" placeholder="Change Tag name" type="text" value="Microsoft Surface Pro">
+
+                    <div phx-feedback-for="table_content_component[index]" class="phx-no-feedback">
+  <label for="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[index]" id="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" value="0" 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="table_content_component[id]" class="phx-no-feedback">
+  <label for="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[id]" id="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0" value="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" 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>
+
+                    <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}]]">
+                      Save
+                    </button>
+                  
     
-      <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>
+  </div>
+
+</form>
+                </div>
+                <span class="hidden group-hover:flex group-hover:absolute left-1 duration-100 group-hover:duration-150 gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600 cursor-pointer" fill="none" phx-click="delete_item" phx-target="7" phx-value-id="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" phx-value-index="0" phx-value-type="content_item" 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>
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-0&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
 </svg>
+                </span>
+              </span><span class="group text-sm border border-gray-200 rounded-md py-2 px-3 bg-gray-100 relative mb-3">
+                <span id="content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1">White</span>
+
+                <div id="content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" class="hidden">
+                  <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
     
-  </p>
-  <p class="text-xs font-bold mt-5 text-center">Comparison</p>
+                    <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="content-title-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" name="table_content_component[title]" placeholder="Change Tag name" type="text" value="White">
+
+                    <div phx-feedback-for="table_content_component[index]" class="phx-no-feedback">
+  <label for="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[index]" id="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" value="1" 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="table_content_component[id]" class="phx-no-feedback">
+  <label for="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[id]" id="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1" value="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" 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>
+
+                    <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}]]">
+                      Save
+                    </button>
+                  
+    
+  </div>
+
+</form>
+                </div>
+                <span class="hidden group-hover:flex group-hover:absolute left-1 duration-100 group-hover:duration-150 gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600 cursor-pointer" fill="none" phx-click="delete_item" phx-target="7" phx-value-id="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" phx-value-index="1" phx-value-type="content_item" 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>
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-1&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
+</svg>
+                </span>
+              </span><span class="group text-sm border border-gray-200 rounded-md py-2 px-3 bg-gray-100 relative mb-3">
+                <span id="content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2">Laptop PC</span>
+
+                <div id="content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" class="hidden">
+                  <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
+    
+                    <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="content-title-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" name="table_content_component[title]" placeholder="Change Tag name" type="text" value="Laptop PC">
+
+                    <div phx-feedback-for="table_content_component[index]" class="phx-no-feedback">
+  <label for="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[index]" id="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" value="2" 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="table_content_component[id]" class="phx-no-feedback">
+  <label for="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[id]" id="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2" value="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" 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>
+
+                    <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}]]">
+                      Save
+                    </button>
+                  
+    
+  </div>
+
+</form>
+                </div>
+                <span class="hidden group-hover:flex group-hover:absolute left-1 duration-100 group-hover:duration-150 gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600 cursor-pointer" fill="none" phx-click="delete_item" phx-target="7" phx-value-id="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" phx-value-index="2" phx-value-type="content_item" 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>
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-2&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
+</svg>
+                </span>
+              </span><span class="group text-sm border border-gray-200 rounded-md py-2 px-3 bg-gray-100 relative mb-3">
+                <span id="content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3">$1999</span>
+
+                <div id="content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" class="hidden">
+                  <form class="w-full" phx-submit="edit" phx-target="7">
+  
+  
+  
+  <div class="flex flex-row w-full justify-start gap-2">
+    
+                    <input class="w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="content-title-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" name="table_content_component[title]" placeholder="Change Tag name" type="text" value="$1999">
+
+                    <div phx-feedback-for="table_content_component[index]" class="phx-no-feedback">
+  <label for="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[index]" id="content-id-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" value="3" 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="table_content_component[id]" class="phx-no-feedback">
+  <label for="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" class="block text-sm font-semibold leading-6 text-zinc-800">
+  
+</label>
+  <input type="hidden" name="table_content_component[id]" id="content-key-form-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3" value="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" 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>
+
+                    <button type="submit" class="px-4 py-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}]]">
+                      Save
+                    </button>
+                  
+    
+  </div>
+
+</form>
+                </div>
+                <span class="hidden group-hover:flex group-hover:absolute left-1 duration-100 group-hover:duration-150 gap-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 text-red-600 cursor-pointer" fill="none" phx-click="delete_item" phx-target="7" phx-value-id="e6a50c6e-16f7-4812-a057-2cdb1f74ffc6" phx-value-index="3" phx-value-type="content_item" 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>
+                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-5 h-5 cursor-pointer" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-input-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}],[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:&quot;#content-title-b46a7a9f-f855-48b9-90ef-7d592258e622-form-3&quot;}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"></path>
+</svg>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    
+  </div>
+</section>
+
+    <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="my-4 w-full text-center font-bold select-none text-lg">Table Header Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Table-Header-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Table-Header-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Header-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Table-Header-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Table-Header-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Header-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Header-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full ">
+    
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Header Font Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Header-Font-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Header-Font-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Font-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="display: block;">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Header-Font-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Header-Font-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Font-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="display: none;">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
   </div>
+
+  <div class="table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Font-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden" style="display: block;">
+    
+        <div class="flex flex-col w-full items-center justify-center">
+  <ul class="flex flex-row mx-auto text-md border-gray-400 py-5 text-gray-600">
+    <li class="px-3 py-1 border border-gray-300 rounded-l-md border-r-0 hover:bg-gray-200 cursor-pointer" phx-click="header_text_alignment" phx-value-type="start" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5"></path>
+</svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 hover:bg-gray-200 cursor-pointer" phx-click="header_text_alignment" phx-value-type="center" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="currentColor" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
+      </svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="header_text_alignment" phx-value-type="end" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"></path>
+</svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 rounded-r-md border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="header_text_alignment" phx-value-type="justify" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
+</svg>
+    </li>
+  </ul>
 </div>
 
+        <div class="flex flex-col mt-2 pb-1 justify-between w-full">
+  <p class="w-full text-start font-bold text-lg select-none">Direction:</p>
+  <ul class="flex flex-row mx-auto text-md border-gray-400 py-5 text-gray-600">
+    <li class="px-3 py-1 border border-gray-300 rounded-l-md hover:bg-gray-200 cursor-pointer" phx-click="header_text_direction" phx-value-type="LTR" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
+        <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm5 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm-5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm.79-5.373c.112-.078.26-.17.444-.275L3.524 6c-.122.074-.272.17-.452.287-.18.117-.35.26-.51.428a2.425 2.425 0 0 0-.398.562c-.11.207-.164.438-.164.692 0 .36.072.65.217.873.144.219.385.328.72.328.215 0 .383-.07.504-.211a.697.697 0 0 0 .188-.463c0-.23-.07-.404-.211-.521-.137-.121-.326-.182-.568-.182h-.282c.024-.203.065-.37.123-.498a1.38 1.38 0 0 1 .252-.37 1.94 1.94 0 0 1 .346-.298zm2.167 0c.113-.078.262-.17.445-.275L5.692 6c-.122.074-.272.17-.452.287-.18.117-.35.26-.51.428a2.425 2.425 0 0 0-.398.562c-.11.207-.164.438-.164.692 0 .36.072.65.217.873.144.219.385.328.72.328.215 0 .383-.07.504-.211a.697.697 0 0 0 .188-.463c0-.23-.07-.404-.211-.521-.137-.121-.326-.182-.568-.182h-.282a1.75 1.75 0 0 1 .118-.492c.058-.13.144-.254.257-.375a1.94 1.94 0 0 1 .346-.3z"></path>
+      </svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 rounded-r-md border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="header_text_direction" phx-value-type="RTL" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
+        <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm10.113-5.373a6.59 6.59 0 0 0-.445-.275l.21-.352c.122.074.272.17.452.287.18.117.35.26.51.428.156.164.289.351.398.562.11.207.164.438.164.692 0 .36-.072.65-.216.873-.145.219-.385.328-.721.328-.215 0-.383-.07-.504-.211a.697.697 0 0 1-.188-.463c0-.23.07-.404.211-.521.137-.121.326-.182.569-.182h.281a1.686 1.686 0 0 0-.123-.498 1.379 1.379 0 0 0-.252-.37 1.94 1.94 0 0 0-.346-.298zm-2.168 0A6.59 6.59 0 0 0 10 6.352L10.21 6c.122.074.272.17.452.287.18.117.35.26.51.428.156.164.289.351.398.562.11.207.164.438.164.692 0 .36-.072.65-.216.873-.145.219-.385.328-.721.328-.215 0-.383-.07-.504-.211a.697.697 0 0 1-.188-.463c0-.23.07-.404.211-.521.137-.121.327-.182.569-.182h.281a1.749 1.749 0 0 0-.117-.492 1.402 1.402 0 0 0-.258-.375 1.94 1.94 0 0 0-.346-.3z"></path>
+      </svg>
+    </li>
+  </ul>
+</div>
+
+        <form class="w-full" phx-change="font_style" phx-target="7">
+  
+  
+  
+  <div class="w-full m-0 p-0 flex flex-col">
+    
+          <div class="flex flex-row w-full justify-between items-stretch pt-3 pb-5">
+            <span class="w-3/5">Font:</span>
+            <div class="w-full">
+              <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1" id="header_table_font-b46a7a9f-f855-48b9-90ef-7d592258e622-form" name="header_table_font_style[font]"><option value="" selected="">Choose preferred font</option><option value="font-sans">font-sans</option><option value="font-serif">font-serif</option><option value="font-mono">font-mono</option></select>
+            </div>
+          </div>
+          <div class="flex flex-row w-full justify-between items-stretch pt-3 pb-5">
+            <span class="w-3/5">Size:</span>
+            <div class="flex flex-row w-full gap-2 items-center">
+              <span class="py-1 px-2 border border-gray-300 text-xs rounded-md">
+                6
+              </span>
+              <input class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="header_table_font_size-b46a7a9f-f855-48b9-90ef-7d592258e622-form" max="13" min="1" name="header_table_font_style[font_size]" type="range" value="1">
+            </div>
+          </div>
+        
     
+  </div>
+
+</form>
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-black" phx-target="7">
+      
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-800" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+</svg>
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_text_style" phx-value-color="text-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+      
+  </div>
+</section>
+
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Header Row Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Header-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Header-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Header-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Header-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden">
+    
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Background Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-black" phx-target="7">
+      
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-800" phx-target="7">
+      
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="header_table_row_style" phx-value-color="bg-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+      
+  </div>
+</section>
+
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Header Item Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Header-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Header-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Header-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Header-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Header-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden">
+    
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Text Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-black" phx-target="7">
+      
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-800" phx-target="7">
+      
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_text_style" phx-value-color="text-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Background Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-black" phx-target="7">
+      
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-800" phx-target="7">
+      
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="header_table_item_style" phx-value-color="bg-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+      
+  </div>
+</section>
+    
+  </div>
+</section>
+
+    <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="my-4 w-full text-center font-bold select-none text-lg">Table Row Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Table-Row-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Table-Row-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Row-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Table-Row-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Table-Row-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Row-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Table-Row-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full ">
+    
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Row Font Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Row-Font-Style-table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Row-Font-Style-table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Font-Style-table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Row-Font-Style-table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Row-Font-Style-table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Font-Style-table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Font-Style-table-row-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden">
+    
+        <div class="flex flex-col w-full items-center justify-center">
+  <ul class="flex flex-row mx-auto text-md border-gray-400 py-5 text-gray-600">
+    <li class="px-3 py-1 border border-gray-300 rounded-l-md border-r-0 hover:bg-gray-200 cursor-pointer" phx-click="row_text_alignment" phx-value-type="start" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5"></path>
+</svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 hover:bg-gray-200 cursor-pointer" phx-click="row_text_alignment" phx-value-type="center" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="currentColor" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
+      </svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="row_text_alignment" phx-value-type="end" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"></path>
+</svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 rounded-r-md border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="row_text_alignment" phx-value-type="justify" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
+</svg>
+    </li>
+  </ul>
+</div>
+
+        <div class="flex flex-col mt-2 pb-1 justify-between w-full">
+  <p class="w-full text-start font-bold text-lg select-none">Direction:</p>
+  <ul class="flex flex-row mx-auto text-md border-gray-400 py-5 text-gray-600">
+    <li class="px-3 py-1 border border-gray-300 rounded-l-md hover:bg-gray-200 cursor-pointer" phx-click="row_text_direction" phx-value-type="LTR" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
+        <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm5 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm-5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm.79-5.373c.112-.078.26-.17.444-.275L3.524 6c-.122.074-.272.17-.452.287-.18.117-.35.26-.51.428a2.425 2.425 0 0 0-.398.562c-.11.207-.164.438-.164.692 0 .36.072.65.217.873.144.219.385.328.72.328.215 0 .383-.07.504-.211a.697.697 0 0 0 .188-.463c0-.23-.07-.404-.211-.521-.137-.121-.326-.182-.568-.182h-.282c.024-.203.065-.37.123-.498a1.38 1.38 0 0 1 .252-.37 1.94 1.94 0 0 1 .346-.298zm2.167 0c.113-.078.262-.17.445-.275L5.692 6c-.122.074-.272.17-.452.287-.18.117-.35.26-.51.428a2.425 2.425 0 0 0-.398.562c-.11.207-.164.438-.164.692 0 .36.072.65.217.873.144.219.385.328.72.328.215 0 .383-.07.504-.211a.697.697 0 0 0 .188-.463c0-.23-.07-.404-.211-.521-.137-.121-.326-.182-.568-.182h-.282a1.75 1.75 0 0 1 .118-.492c.058-.13.144-.254.257-.375a1.94 1.94 0 0 1 .346-.3z"></path>
+      </svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 rounded-r-md border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="row_text_direction" phx-value-type="RTL" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
+        <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm10.113-5.373a6.59 6.59 0 0 0-.445-.275l.21-.352c.122.074.272.17.452.287.18.117.35.26.51.428.156.164.289.351.398.562.11.207.164.438.164.692 0 .36-.072.65-.216.873-.145.219-.385.328-.721.328-.215 0-.383-.07-.504-.211a.697.697 0 0 1-.188-.463c0-.23.07-.404.211-.521.137-.121.326-.182.569-.182h.281a1.686 1.686 0 0 0-.123-.498 1.379 1.379 0 0 0-.252-.37 1.94 1.94 0 0 0-.346-.298zm-2.168 0A6.59 6.59 0 0 0 10 6.352L10.21 6c.122.074.272.17.452.287.18.117.35.26.51.428.156.164.289.351.398.562.11.207.164.438.164.692 0 .36-.072.65-.216.873-.145.219-.385.328-.721.328-.215 0-.383-.07-.504-.211a.697.697 0 0 1-.188-.463c0-.23.07-.404.211-.521.137-.121.327-.182.569-.182h.281a1.749 1.749 0 0 0-.117-.492 1.402 1.402 0 0 0-.258-.375 1.94 1.94 0 0 0-.346-.3z"></path>
+      </svg>
+    </li>
+  </ul>
+</div>
+        <form class="w-full" phx-change="font_style" phx-target="7">
+  
+  
+  
+  <div class="w-full m-0 p-0 flex flex-col">
+    
+          <div class="flex flex-row w-full justify-between items-stretch pt-3 pb-5">
+            <span class="w-3/5">Font:</span>
+            <div class="w-full">
+              <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1" id="content_tab_font-b46a7a9f-f855-48b9-90ef-7d592258e622-form" name="content_table_font_style[font]"><option value="" selected="">Choose preferred font</option><option value="font-sans">font-sans</option><option value="font-serif">font-serif</option><option value="font-mono">font-mono</option></select>
+            </div>
+          </div>
+          <div class="flex flex-row w-full justify-between items-stretch pt-3 pb-5">
+            <span class="w-3/5">Size:</span>
+            <div class="flex flex-row w-full gap-2 items-center">
+              <span class="py-1 px-2 border border-gray-300 text-xs rounded-md">
+                1
+              </span>
+              <input class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="content_tab_font_size-b46a7a9f-f855-48b9-90ef-7d592258e622-form" max="13" min="1" name="content_table_font_style[font_size]" type="range" value="1">
+            </div>
+          </div>
+        
+    
+  </div>
+
+</form>
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-black" phx-target="7">
+      
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-800" phx-target="7">
+      
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_text_style" phx-value-color="text-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+      
+  </div>
+</section>
+
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Row Row Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Row-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Row-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Row-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Row-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Row-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden">
+    
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Background Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-black" phx-target="7">
+      
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-800" phx-target="7">
+      
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="content_table_row_style" phx-value-color="bg-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+      
+  </div>
+</section>
+
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Row Item Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Row-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Row-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Row-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Row-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Row-Item-Style-table-headers-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden">
+    
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Text Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-black" phx-target="7">
+      
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-800" phx-target="7">
+      
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_text_style" phx-value-color="text-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Background Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-black" phx-target="7">
+      
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-800" phx-target="7">
+      
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="content_table_item_style" phx-value-color="bg-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+      
+  </div>
+</section>
+    
+  </div>
+</section>
+
+    <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="my-4 w-full text-center font-bold select-none text-lg">Public Settings:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Public-Settings-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Public-Settings-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Public-Settings-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Public-Settings-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Public-Settings-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Public-Settings-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Public-Settings-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full ">
+    
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Alignment:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Alignment-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Alignment-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Alignment-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Alignment-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Alignment-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Alignment-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Alignment-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden">
+    
+        <div class="flex flex-col w-full items-center justify-center">
+  <ul class="flex flex-row mx-auto text-md border-gray-400 py-5 text-gray-600">
+    <li class="px-3 py-1 border border-gray-300 rounded-l-md border-r-0 hover:bg-gray-200 cursor-pointer" phx-click="text_alignment" phx-value-type="start" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5"></path>
+</svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 hover:bg-gray-200 cursor-pointer" phx-click="text_alignment" phx-value-type="center" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="currentColor" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
+      </svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="text_alignment" phx-value-type="end" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"></path>
+</svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 rounded-r-md border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="text_alignment" phx-value-type="justify" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
+</svg>
+    </li>
+  </ul>
+</div>
+
+        <div class="flex flex-col mt-2 pb-1 justify-between w-full">
+  <p class="w-full text-start font-bold text-lg select-none">Direction:</p>
+  <ul class="flex flex-row mx-auto text-md border-gray-400 py-5 text-gray-600">
+    <li class="px-3 py-1 border border-gray-300 rounded-l-md hover:bg-gray-200 cursor-pointer" phx-click="text_direction" phx-value-type="LTR" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
+        <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm5 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm-5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm.79-5.373c.112-.078.26-.17.444-.275L3.524 6c-.122.074-.272.17-.452.287-.18.117-.35.26-.51.428a2.425 2.425 0 0 0-.398.562c-.11.207-.164.438-.164.692 0 .36.072.65.217.873.144.219.385.328.72.328.215 0 .383-.07.504-.211a.697.697 0 0 0 .188-.463c0-.23-.07-.404-.211-.521-.137-.121-.326-.182-.568-.182h-.282c.024-.203.065-.37.123-.498a1.38 1.38 0 0 1 .252-.37 1.94 1.94 0 0 1 .346-.298zm2.167 0c.113-.078.262-.17.445-.275L5.692 6c-.122.074-.272.17-.452.287-.18.117-.35.26-.51.428a2.425 2.425 0 0 0-.398.562c-.11.207-.164.438-.164.692 0 .36.072.65.217.873.144.219.385.328.72.328.215 0 .383-.07.504-.211a.697.697 0 0 0 .188-.463c0-.23-.07-.404-.211-.521-.137-.121-.326-.182-.568-.182h-.282a1.75 1.75 0 0 1 .118-.492c.058-.13.144-.254.257-.375a1.94 1.94 0 0 1 .346-.3z"></path>
+      </svg>
+    </li>
+    <li class="px-3 py-1 border border-gray-300 rounded-r-md border-l-0 hover:bg-gray-200 cursor-pointer" phx-click="text_direction" phx-value-type="RTL" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 h-6" viewBox="0 0 16 16">
+        <path d="M2.5 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 3a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1h-11zm10.113-5.373a6.59 6.59 0 0 0-.445-.275l.21-.352c.122.074.272.17.452.287.18.117.35.26.51.428.156.164.289.351.398.562.11.207.164.438.164.692 0 .36-.072.65-.216.873-.145.219-.385.328-.721.328-.215 0-.383-.07-.504-.211a.697.697 0 0 1-.188-.463c0-.23.07-.404.211-.521.137-.121.326-.182.569-.182h.281a1.686 1.686 0 0 0-.123-.498 1.379 1.379 0 0 0-.252-.37 1.94 1.94 0 0 0-.346-.298zm-2.168 0A6.59 6.59 0 0 0 10 6.352L10.21 6c.122.074.272.17.452.287.18.117.35.26.51.428.156.164.289.351.398.562.11.207.164.438.164.692 0 .36-.072.65-.216.873-.145.219-.385.328-.721.328-.215 0-.383-.07-.504-.211a.697.697 0 0 1-.188-.463c0-.23.07-.404.211-.521.137-.121.327-.182.569-.182h.281a1.749 1.749 0 0 0-.117-.492 1.402 1.402 0 0 0-.258-.375 1.94 1.94 0 0 0-.346-.3z"></path>
+      </svg>
+    </li>
+  </ul>
+</div>
+      
+  </div>
+</section>
+
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Font Style:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Font-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Font-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Font-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Font-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Font-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Font-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Font-Style-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden">
+    
+        <form class="w-full" phx-change="font_style" phx-target="7">
+  
+  
+  
+  <div class="w-full m-0 p-0 flex flex-col">
+    
+          <div class="flex flex-row w-full justify-between items-stretch pt-3 pb-5">
+            <span class="w-3/5">Font:</span>
+            <div class="w-full">
+              <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1" id="public_tab_font-b46a7a9f-f855-48b9-90ef-7d592258e622-form" name="public_table_font_style[font]"><option value="" selected="">Choose preferred font</option><option value="font-sans">font-sans</option><option value="font-serif">font-serif</option><option value="font-mono">font-mono</option></select>
+            </div>
+          </div>
+          <div class="flex flex-row w-full justify-between items-stretch pt-3 pb-5">
+            <span class="w-3/5">Size:</span>
+            <div class="flex flex-row w-full gap-2 items-center">
+              <span class="py-1 px-2 border border-gray-300 text-xs rounded-md">
+                3
+              </span>
+              <input class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="public_tab_font_size-b46a7a9f-f855-48b9-90ef-7d592258e622-form" max="13" min="1" name="public_table_font_style[font_size]" type="range" value="3">
+            </div>
+          </div>
+        
+    
+  </div>
+
+</form>
+        <div class="flex flex-col w-full justify-between items-stretch pt-3 pb-5">
+  <span class="w-full">Color:</span>
+  <div class="flex flex-wrap w-full mt-4">
+    <div class="bg-black w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-black" phx-target="7">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+</svg>
+    </div><div class="bg-white w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-white" phx-target="7">
+      
+    </div><div class="bg-slate-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-50" phx-target="7">
+      
+    </div><div class="bg-slate-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-100" phx-target="7">
+      
+    </div><div class="bg-slate-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-200" phx-target="7">
+      
+    </div><div class="bg-slate-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-300" phx-target="7">
+      
+    </div><div class="bg-slate-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-400" phx-target="7">
+      
+    </div><div class="bg-slate-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-500" phx-target="7">
+      
+    </div><div class="bg-slate-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-600" phx-target="7">
+      
+    </div><div class="bg-slate-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-700" phx-target="7">
+      
+    </div><div class="bg-slate-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-800" phx-target="7">
+      
+    </div><div class="bg-slate-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-slate-900" phx-target="7">
+      
+    </div><div class="bg-gray-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-50" phx-target="7">
+      
+    </div><div class="bg-gray-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-100" phx-target="7">
+      
+    </div><div class="bg-gray-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-200" phx-target="7">
+      
+    </div><div class="bg-gray-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-300" phx-target="7">
+      
+    </div><div class="bg-gray-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-400" phx-target="7">
+      
+    </div><div class="bg-gray-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-500" phx-target="7">
+      
+    </div><div class="bg-gray-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-600" phx-target="7">
+      
+    </div><div class="bg-gray-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-700" phx-target="7">
+      
+    </div><div class="bg-gray-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-800" phx-target="7">
+      
+    </div><div class="bg-gray-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-gray-900" phx-target="7">
+      
+    </div><div class="bg-zinc-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-50" phx-target="7">
+      
+    </div><div class="bg-zinc-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-100" phx-target="7">
+      
+    </div><div class="bg-zinc-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-200" phx-target="7">
+      
+    </div><div class="bg-zinc-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-300" phx-target="7">
+      
+    </div><div class="bg-zinc-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-400" phx-target="7">
+      
+    </div><div class="bg-zinc-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-500" phx-target="7">
+      
+    </div><div class="bg-zinc-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-600" phx-target="7">
+      
+    </div><div class="bg-zinc-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-700" phx-target="7">
+      
+    </div><div class="bg-zinc-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-800" phx-target="7">
+      
+    </div><div class="bg-zinc-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-zinc-900" phx-target="7">
+      
+    </div><div class="bg-neutral-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-50" phx-target="7">
+      
+    </div><div class="bg-neutral-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-100" phx-target="7">
+      
+    </div><div class="bg-neutral-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-200" phx-target="7">
+      
+    </div><div class="bg-neutral-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-300" phx-target="7">
+      
+    </div><div class="bg-neutral-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-400" phx-target="7">
+      
+    </div><div class="bg-neutral-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-500" phx-target="7">
+      
+    </div><div class="bg-neutral-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-600" phx-target="7">
+      
+    </div><div class="bg-neutral-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-700" phx-target="7">
+      
+    </div><div class="bg-neutral-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-800" phx-target="7">
+      
+    </div><div class="bg-neutral-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-neutral-900" phx-target="7">
+      
+    </div><div class="bg-stone-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-50" phx-target="7">
+      
+    </div><div class="bg-stone-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-100" phx-target="7">
+      
+    </div><div class="bg-stone-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-200" phx-target="7">
+      
+    </div><div class="bg-stone-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-300" phx-target="7">
+      
+    </div><div class="bg-stone-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-400" phx-target="7">
+      
+    </div><div class="bg-stone-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-500" phx-target="7">
+      
+    </div><div class="bg-stone-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-600" phx-target="7">
+      
+    </div><div class="bg-stone-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-700" phx-target="7">
+      
+    </div><div class="bg-stone-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-800" phx-target="7">
+      
+    </div><div class="bg-stone-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-stone-900" phx-target="7">
+      
+    </div><div class="bg-red-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-50" phx-target="7">
+      
+    </div><div class="bg-red-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-100" phx-target="7">
+      
+    </div><div class="bg-red-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-200" phx-target="7">
+      
+    </div><div class="bg-red-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-300" phx-target="7">
+      
+    </div><div class="bg-red-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-400" phx-target="7">
+      
+    </div><div class="bg-red-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-500" phx-target="7">
+      
+    </div><div class="bg-red-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-600" phx-target="7">
+      
+    </div><div class="bg-red-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-700" phx-target="7">
+      
+    </div><div class="bg-red-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-800" phx-target="7">
+      
+    </div><div class="bg-red-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-red-900" phx-target="7">
+      
+    </div><div class="bg-orange-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-50" phx-target="7">
+      
+    </div><div class="bg-orange-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-100" phx-target="7">
+      
+    </div><div class="bg-orange-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-200" phx-target="7">
+      
+    </div><div class="bg-orange-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-300" phx-target="7">
+      
+    </div><div class="bg-orange-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-400" phx-target="7">
+      
+    </div><div class="bg-orange-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-500" phx-target="7">
+      
+    </div><div class="bg-orange-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-600" phx-target="7">
+      
+    </div><div class="bg-orange-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-700" phx-target="7">
+      
+    </div><div class="bg-orange-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-800" phx-target="7">
+      
+    </div><div class="bg-orange-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-orange-900" phx-target="7">
+      
+    </div><div class="bg-amber-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-50" phx-target="7">
+      
+    </div><div class="bg-amber-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-100" phx-target="7">
+      
+    </div><div class="bg-amber-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-200" phx-target="7">
+      
+    </div><div class="bg-amber-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-300" phx-target="7">
+      
+    </div><div class="bg-amber-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-400" phx-target="7">
+      
+    </div><div class="bg-amber-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-500" phx-target="7">
+      
+    </div><div class="bg-amber-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-600" phx-target="7">
+      
+    </div><div class="bg-amber-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-700" phx-target="7">
+      
+    </div><div class="bg-amber-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-800" phx-target="7">
+      
+    </div><div class="bg-amber-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-amber-900" phx-target="7">
+      
+    </div><div class="bg-yellow-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-50" phx-target="7">
+      
+    </div><div class="bg-yellow-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-100" phx-target="7">
+      
+    </div><div class="bg-yellow-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-200" phx-target="7">
+      
+    </div><div class="bg-yellow-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-300" phx-target="7">
+      
+    </div><div class="bg-yellow-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-400" phx-target="7">
+      
+    </div><div class="bg-yellow-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-500" phx-target="7">
+      
+    </div><div class="bg-yellow-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-600" phx-target="7">
+      
+    </div><div class="bg-yellow-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-700" phx-target="7">
+      
+    </div><div class="bg-yellow-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-800" phx-target="7">
+      
+    </div><div class="bg-yellow-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-yellow-900" phx-target="7">
+      
+    </div><div class="bg-lime-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-50" phx-target="7">
+      
+    </div><div class="bg-lime-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-100" phx-target="7">
+      
+    </div><div class="bg-lime-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-200" phx-target="7">
+      
+    </div><div class="bg-lime-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-300" phx-target="7">
+      
+    </div><div class="bg-lime-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-400" phx-target="7">
+      
+    </div><div class="bg-lime-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-500" phx-target="7">
+      
+    </div><div class="bg-lime-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-600" phx-target="7">
+      
+    </div><div class="bg-lime-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-700" phx-target="7">
+      
+    </div><div class="bg-lime-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-800" phx-target="7">
+      
+    </div><div class="bg-lime-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-lime-900" phx-target="7">
+      
+    </div><div class="bg-green-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-50" phx-target="7">
+      
+    </div><div class="bg-green-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-100" phx-target="7">
+      
+    </div><div class="bg-green-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-200" phx-target="7">
+      
+    </div><div class="bg-green-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-300" phx-target="7">
+      
+    </div><div class="bg-green-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-400" phx-target="7">
+      
+    </div><div class="bg-green-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-500" phx-target="7">
+      
+    </div><div class="bg-green-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-600" phx-target="7">
+      
+    </div><div class="bg-green-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-700" phx-target="7">
+      
+    </div><div class="bg-green-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-800" phx-target="7">
+      
+    </div><div class="bg-green-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-green-900" phx-target="7">
+      
+    </div><div class="bg-emerald-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-50" phx-target="7">
+      
+    </div><div class="bg-emerald-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-100" phx-target="7">
+      
+    </div><div class="bg-emerald-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-200" phx-target="7">
+      
+    </div><div class="bg-emerald-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-300" phx-target="7">
+      
+    </div><div class="bg-emerald-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-400" phx-target="7">
+      
+    </div><div class="bg-emerald-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-500" phx-target="7">
+      
+    </div><div class="bg-emerald-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-600" phx-target="7">
+      
+    </div><div class="bg-emerald-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-700" phx-target="7">
+      
+    </div><div class="bg-emerald-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-800" phx-target="7">
+      
+    </div><div class="bg-emerald-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-emerald-900" phx-target="7">
+      
+    </div><div class="bg-teal-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-50" phx-target="7">
+      
+    </div><div class="bg-teal-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-100" phx-target="7">
+      
+    </div><div class="bg-teal-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-200" phx-target="7">
+      
+    </div><div class="bg-teal-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-300" phx-target="7">
+      
+    </div><div class="bg-teal-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-400" phx-target="7">
+      
+    </div><div class="bg-teal-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-500" phx-target="7">
+      
+    </div><div class="bg-teal-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-600" phx-target="7">
+      
+    </div><div class="bg-teal-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-700" phx-target="7">
+      
+    </div><div class="bg-teal-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-800" phx-target="7">
+      
+    </div><div class="bg-teal-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-teal-900" phx-target="7">
+      
+    </div><div class="bg-cyan-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-50" phx-target="7">
+      
+    </div><div class="bg-cyan-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-100" phx-target="7">
+      
+    </div><div class="bg-cyan-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-200" phx-target="7">
+      
+    </div><div class="bg-cyan-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-300" phx-target="7">
+      
+    </div><div class="bg-cyan-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-400" phx-target="7">
+      
+    </div><div class="bg-cyan-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-500" phx-target="7">
+      
+    </div><div class="bg-cyan-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-600" phx-target="7">
+      
+    </div><div class="bg-cyan-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-700" phx-target="7">
+      
+    </div><div class="bg-cyan-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-800" phx-target="7">
+      
+    </div><div class="bg-cyan-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-cyan-900" phx-target="7">
+      
+    </div><div class="bg-sky-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-50" phx-target="7">
+      
+    </div><div class="bg-sky-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-100" phx-target="7">
+      
+    </div><div class="bg-sky-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-200" phx-target="7">
+      
+    </div><div class="bg-sky-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-300" phx-target="7">
+      
+    </div><div class="bg-sky-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-400" phx-target="7">
+      
+    </div><div class="bg-sky-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-500" phx-target="7">
+      
+    </div><div class="bg-sky-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-600" phx-target="7">
+      
+    </div><div class="bg-sky-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-700" phx-target="7">
+      
+    </div><div class="bg-sky-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-800" phx-target="7">
+      
+    </div><div class="bg-sky-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-sky-900" phx-target="7">
+      
+    </div><div class="bg-blue-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-50" phx-target="7">
+      
+    </div><div class="bg-blue-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-100" phx-target="7">
+      
+    </div><div class="bg-blue-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-200" phx-target="7">
+      
+    </div><div class="bg-blue-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-300" phx-target="7">
+      
+    </div><div class="bg-blue-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-400" phx-target="7">
+      
+    </div><div class="bg-blue-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-500" phx-target="7">
+      
+    </div><div class="bg-blue-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-600" phx-target="7">
+      
+    </div><div class="bg-blue-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-700" phx-target="7">
+      
+    </div><div class="bg-blue-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-800" phx-target="7">
+      
+    </div><div class="bg-blue-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-blue-900" phx-target="7">
+      
+    </div><div class="bg-indigo-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-50" phx-target="7">
+      
+    </div><div class="bg-indigo-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-100" phx-target="7">
+      
+    </div><div class="bg-indigo-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-200" phx-target="7">
+      
+    </div><div class="bg-indigo-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-300" phx-target="7">
+      
+    </div><div class="bg-indigo-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-400" phx-target="7">
+      
+    </div><div class="bg-indigo-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-500" phx-target="7">
+      
+    </div><div class="bg-indigo-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-600" phx-target="7">
+      
+    </div><div class="bg-indigo-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-700" phx-target="7">
+      
+    </div><div class="bg-indigo-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-800" phx-target="7">
+      
+    </div><div class="bg-indigo-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-indigo-900" phx-target="7">
+      
+    </div><div class="bg-violet-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-50" phx-target="7">
+      
+    </div><div class="bg-violet-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-100" phx-target="7">
+      
+    </div><div class="bg-violet-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-200" phx-target="7">
+      
+    </div><div class="bg-violet-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-300" phx-target="7">
+      
+    </div><div class="bg-violet-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-400" phx-target="7">
+      
+    </div><div class="bg-violet-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-500" phx-target="7">
+      
+    </div><div class="bg-violet-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-600" phx-target="7">
+      
+    </div><div class="bg-violet-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-700" phx-target="7">
+      
+    </div><div class="bg-violet-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-800" phx-target="7">
+      
+    </div><div class="bg-violet-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-violet-900" phx-target="7">
+      
+    </div><div class="bg-purple-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-50" phx-target="7">
+      
+    </div><div class="bg-purple-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-100" phx-target="7">
+      
+    </div><div class="bg-purple-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-200" phx-target="7">
+      
+    </div><div class="bg-purple-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-300" phx-target="7">
+      
+    </div><div class="bg-purple-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-400" phx-target="7">
+      
+    </div><div class="bg-purple-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-500" phx-target="7">
+      
+    </div><div class="bg-purple-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-600" phx-target="7">
+      
+    </div><div class="bg-purple-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-700" phx-target="7">
+      
+    </div><div class="bg-purple-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-800" phx-target="7">
+      
+    </div><div class="bg-purple-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-purple-900" phx-target="7">
+      
+    </div><div class="bg-fuchsia-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-50" phx-target="7">
+      
+    </div><div class="bg-fuchsia-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-100" phx-target="7">
+      
+    </div><div class="bg-fuchsia-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-200" phx-target="7">
+      
+    </div><div class="bg-fuchsia-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-300" phx-target="7">
+      
+    </div><div class="bg-fuchsia-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-400" phx-target="7">
+      
+    </div><div class="bg-fuchsia-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-500" phx-target="7">
+      
+    </div><div class="bg-fuchsia-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-600" phx-target="7">
+      
+    </div><div class="bg-fuchsia-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-700" phx-target="7">
+      
+    </div><div class="bg-fuchsia-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-800" phx-target="7">
+      
+    </div><div class="bg-fuchsia-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-fuchsia-900" phx-target="7">
+      
+    </div><div class="bg-pink-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-50" phx-target="7">
+      
+    </div><div class="bg-pink-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-100" phx-target="7">
+      
+    </div><div class="bg-pink-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-200" phx-target="7">
+      
+    </div><div class="bg-pink-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-300" phx-target="7">
+      
+    </div><div class="bg-pink-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-400" phx-target="7">
+      
+    </div><div class="bg-pink-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-500" phx-target="7">
+      
+    </div><div class="bg-pink-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-600" phx-target="7">
+      
+    </div><div class="bg-pink-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-700" phx-target="7">
+      
+    </div><div class="bg-pink-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-800" phx-target="7">
+      
+    </div><div class="bg-pink-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-pink-900" phx-target="7">
+      
+    </div><div class="bg-rose-50 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-50" phx-target="7">
+      
+    </div><div class="bg-rose-100 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-100" phx-target="7">
+      
+    </div><div class="bg-rose-200 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-200" phx-target="7">
+      
+    </div><div class="bg-rose-300 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-300" phx-target="7">
+      
+    </div><div class="bg-rose-400 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-400" phx-target="7">
+      
+    </div><div class="bg-rose-500 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-500" phx-target="7">
+      
+    </div><div class="bg-rose-600 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-600" phx-target="7">
+      
+    </div><div class="bg-rose-700 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-700" phx-target="7">
+      
+    </div><div class="bg-rose-800 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-800" phx-target="7">
+      
+    </div><div class="bg-rose-900 w-4 h-4 cursor-pointer" phx-click="public_table_font_style" phx-value-color="text-rose-900" phx-target="7">
+      
+    </div>
+  </div>
+</div>
+      
+  </div>
+</section>
+
+      <section class="flex flex-col w-full mx-auto">
+  <div class="flex flex-row w-full justify-between items-center pb-1 border-b border-gray-300">
+    <span></span>
+    <span class="w-full font-bold select-none my-4">Custom Tag name:</span>
+    <span>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Custom-Tag-name-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up w-4 h-auto cursor-pointer hidden" fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Custom-Tag-name-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Custom-Tag-name-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5"></path>
+</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="Custom-Tag-name-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-down w-4 h-auto cursor-pointer " fill="none" phx-click="[[&quot;toggle&quot;,{&quot;display&quot;:null,&quot;ins&quot;:[[],[],[]],&quot;outs&quot;:[[],[],[]],&quot;time&quot;:200,&quot;to&quot;:null}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.Custom-Tag-name-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-up&quot;,&quot;transition&quot;:[[],[],[]]}],[&quot;show&quot;,{&quot;display&quot;:null,&quot;time&quot;:200,&quot;to&quot;:&quot;.table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Custom-Tag-name-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content&quot;,&quot;transition&quot;:[[],[],[]]}]]" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5"></path>
+</svg>
+    </span>
+  </div>
+
+  <div class="table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-Custom-Tag-name-table-b46a7a9f-f855-48b9-90ef-7d592258e622-form-content flex flex-col pt-2 duration-200 w-full hidden">
+    
+        <div class="flex flex-col w-full items-center justify-center pb-5">
+          <div class="flex flex-col w-full items-center justify-center pb-5">
+  <form class="w-full" phx-change="validate" phx-submit="element" phx-target="7">
+  
+  
+  
+  <div class="w-full m-0 p-0 flex flex-col">
+    
+    <input class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" id="public_tab_tag-b46a7a9f-f855-48b9-90ef-7d592258e622-form" name="public_tab_tag[tag]" placeholder="Change Tag name" type="text">
+    <p class="text-xs text-red-500 my-3 text-justify">
+      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>
+
+</form>
+</div>
+        </div>
+      
+  </div>
+</section>
+
+      <div class="flex flex-row w-full justify-center items-center gap-3 pb-10 mt-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 w-24 !bg-white border border-gray-300 shadow-sm !text-red-600 hover:!bg-gray-300 hover:text-gray-400 !rounded-md" phx-click="delete" phx-target="7">
+  
+          Delete
+        
+</button>
+        <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 w-24 !bg-white border border-gray-300 shadow-sm !text-black hover:!bg-gray-300 hover:text-gray-400 !rounded-md" phx-click="reset" phx-target="7">
+  
+          Reset
+        
+</button>
+      </div>
+    
+  </div>
+</section>
+  
+  </div>
+</div>
+</div>
   </div>
 </div>
   </div>
diff --git a/lib/mishka_template_creator/components/blocks/color.ex b/lib/mishka_template_creator/components/blocks/color.ex
new file mode 100644
index 0000000..f67284f
--- /dev/null
+++ b/lib/mishka_template_creator/components/blocks/color.ex
@@ -0,0 +1,44 @@
+defmodule MishkaTemplateCreator.Components.Blocks.Color do
+  use Phoenix.Component
+  alias MishkaTemplateCreator.Data.TailwindSetting
+
+  attr(:myself, :integer, required: true)
+  attr(:classes, :list, required: true)
+  attr(:title, :string, required: false, default: "Color:")
+  attr(:type, :string, required: false, default: "text")
+  attr(:event_name, :string, required: false, default: "select_color")
+
+  attr(:class, :string,
+    required: false,
+    default: "flex flex-col w-full justify-between items-stretch pt-3 pb-5"
+  )
+
+  def select(%{type: type} = assigns) do
+    assigns =
+      assign(assigns,
+        colors:
+          TailwindSetting.get_form_options("typography", "text-color", nil, nil).form_configs
+      )
+
+    ~H"""
+    <div class={@class}>
+      <span class="w-full"><%= @title %></span>
+      <div class="flex flex-wrap w-full mt-4">
+        <div
+          :for={item <- @colors}
+          :if={item not in ["text-inherit", "text-current", "text-transparent"]}
+          class={"bg-#{String.replace(item, "text-", "")} w-4 h-4 cursor-pointer"}
+          phx-click={@event_name}
+          phx-value-color={String.replace(item, "text", @type)}
+          phx-target={@myself}
+        >
+          <Heroicons.x_mark
+            :if={String.replace(item, "text", @type) in @classes}
+            class={if(item in TailwindSetting.different_selected_color(), do: "text-white")}
+          />
+        </div>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/lib/mishka_template_creator/components/elements/tab.ex b/lib/mishka_template_creator/components/elements/tab.ex
index 6b1ce0f..6f96859 100644
--- a/lib/mishka_template_creator/components/elements/tab.ex
+++ b/lib/mishka_template_creator/components/elements/tab.ex
@@ -10,6 +10,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
   alias Phoenix.LiveView.JS
   alias MishkaTemplateCreator.Components.Blocks.Tag
   alias MishkaTemplateCreator.Components.Blocks.Icon
+  alias MishkaTemplateCreator.Components.Blocks.Color
 
   @svg_height [
     "h-1",
@@ -409,7 +410,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
                 </div>
               </div>
             </MishkaCoreComponent.custom_simple_form>
-            <MishkaCoreComponent.color_selector
+            <Color.select
               myself={@myself}
               event_name="public_tab_font_style"
               classes={@element["class"]}
@@ -570,7 +571,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
             </div>
           </div>
         </MishkaCoreComponent.custom_simple_form>
-        <MishkaCoreComponent.color_selector
+        <Color.select
           myself={@myself}
           event_name="tab_title_font_style"
           classes={@header["title"]}
@@ -651,7 +652,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
             </div>
           </div>
         </MishkaCoreComponent.custom_simple_form>
-        <MishkaCoreComponent.color_selector
+        <Color.select
           myself={@myself}
           event_name="tab_content_font_style"
           classes={@content}
@@ -696,7 +697,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
         </div>
       </Aside.aside_accordion>
       <Aside.aside_accordion id={"text-#{@key}"} title="Content Background Color">
-        <MishkaCoreComponent.color_selector
+        <Color.select
           myself={@myself}
           event_name="tab_content_background"
           type="bg"
@@ -765,7 +766,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
             </div>
           </div>
         </MishkaCoreComponent.custom_simple_form>
-        <MishkaCoreComponent.color_selector
+        <Color.select
           myself={@myself}
           event_name="tab_icon_font_style"
           classes={@header["icon"]}
diff --git a/lib/mishka_template_creator/components/elements/table.ex b/lib/mishka_template_creator/components/elements/table.ex
index 5b97e02..a90cfb4 100644
--- a/lib/mishka_template_creator/components/elements/table.ex
+++ b/lib/mishka_template_creator/components/elements/table.ex
@@ -9,6 +9,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
   alias MishkaTemplateCreator.Data.TailwindSetting
   alias Phoenix.LiveView.JS
   alias MishkaTemplateCreator.Components.Blocks.Tag
+  alias MishkaTemplateCreator.Components.Blocks.Color
 
   %{
     "unique_id" => %{
@@ -470,7 +471,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
                 </div>
               </div>
             </MishkaCoreComponent.custom_simple_form>
-            <MishkaCoreComponent.color_selector
+            <Color.select
               myself={@myself}
               event_name="header_table_row_text_style"
               classes={@element["header"]["row"]}
@@ -478,7 +479,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
           </Aside.aside_accordion>
 
           <Aside.aside_accordion id={"table-headers-#{@id}"} title="Header Row Style" open={false}>
-            <MishkaCoreComponent.color_selector
+            <Color.select
               title="Background Color:"
               type="bg"
               myself={@myself}
@@ -488,14 +489,14 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
           </Aside.aside_accordion>
 
           <Aside.aside_accordion id={"table-headers-#{@id}"} title="Header Item Style" open={false}>
-            <MishkaCoreComponent.color_selector
+            <Color.select
               title="Text Color:"
               myself={@myself}
               event_name="header_table_item_text_style"
               classes={@element["header"]["column"]}
             />
 
-            <MishkaCoreComponent.color_selector
+            <Color.select
               title="Background Color:"
               type="bg"
               myself={@myself}
@@ -559,7 +560,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
                 </div>
               </div>
             </MishkaCoreComponent.custom_simple_form>
-            <MishkaCoreComponent.color_selector
+            <Color.select
               myself={@myself}
               event_name="content_table_row_text_style"
               classes={@element["content"]["row"]}
@@ -567,7 +568,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
           </Aside.aside_accordion>
 
           <Aside.aside_accordion id={"table-headers-#{@id}"} title="Row Row Style" open={false}>
-            <MishkaCoreComponent.color_selector
+            <Color.select
               title="Background Color:"
               type="bg"
               myself={@myself}
@@ -577,14 +578,14 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
           </Aside.aside_accordion>
 
           <Aside.aside_accordion id={"table-headers-#{@id}"} title="Row Item Style" open={false}>
-            <MishkaCoreComponent.color_selector
+            <Color.select
               title="Text Color:"
               myself={@myself}
               event_name="content_table_item_text_style"
               classes={@element["content"]["column"]}
             />
 
-            <MishkaCoreComponent.color_selector
+            <Color.select
               title="Background Color:"
               type="bg"
               myself={@myself}
@@ -651,7 +652,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
                 </div>
               </div>
             </MishkaCoreComponent.custom_simple_form>
-            <MishkaCoreComponent.color_selector
+            <Color.select
               myself={@myself}
               event_name="public_table_font_style"
               classes={@element["class"]}
diff --git a/lib/mishka_template_creator/components/elements/text.ex b/lib/mishka_template_creator/components/elements/text.ex
index 0368398..bcaa99b 100644
--- a/lib/mishka_template_creator/components/elements/text.ex
+++ b/lib/mishka_template_creator/components/elements/text.ex
@@ -7,6 +7,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
   alias MishkaTemplateCreatorWeb.MishkaCoreComponent
   import MishkaTemplateCreatorWeb.CoreComponents
   alias MishkaTemplateCreator.Data.TailwindSetting
+  alias MishkaTemplateCreator.Components.Blocks.Color
 
   @impl true
   def mount(socket) do
@@ -261,7 +262,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
               </div>
             </div>
           </MishkaCoreComponent.custom_simple_form>
-          <MishkaCoreComponent.color_selector
+          <Color.select
             myself={@myself}
             event_name="font_style"
             classes={@element["class"]}
diff --git a/lib/mishka_template_creator/components/mishka_core_component.ex b/lib/mishka_template_creator/components/mishka_core_component.ex
index c1ba513..a6ad5b1 100644
--- a/lib/mishka_template_creator/components/mishka_core_component.ex
+++ b/lib/mishka_template_creator/components/mishka_core_component.ex
@@ -212,46 +212,6 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
     """
   end
 
-  attr(:myself, :integer, required: true)
-  attr(:classes, :list, required: true)
-  attr(:title, :string, required: false, default: "Color:")
-  attr(:type, :string, required: false, default: "text")
-  attr(:event_name, :string, required: false, default: "select_color")
-
-  attr(:class, :string,
-    required: false,
-    default: "flex flex-col w-full justify-between items-stretch pt-3 pb-5"
-  )
-
-  def color_selector(%{type: type} = assigns) do
-    assigns =
-      assign(assigns,
-        colors:
-          TailwindSetting.get_form_options("typography", "text-color", nil, nil).form_configs
-      )
-
-    ~H"""
-    <div class={@class}>
-      <span class="w-full"><%= @title %></span>
-      <div class="flex flex-wrap w-full mt-4">
-        <div
-          :for={item <- @colors}
-          :if={item not in ["text-inherit", "text-current", "text-transparent"]}
-          class={"bg-#{String.replace(item, "text-", "")} w-4 h-4 cursor-pointer"}
-          phx-click={@event_name}
-          phx-value-color={String.replace(item, "text", type)}
-          phx-target={@myself}
-        >
-          <Heroicons.x_mark
-            :if={String.replace(item, "text", type) in @classes}
-            class={if(item in TailwindSetting.different_selected_color(), do: "text-white")}
-          />
-        </div>
-      </div>
-    </div>
-    """
-  end
-
   attr(:myself, :integer, required: true)
   attr(:event_name, :string, required: false, default: "text_alignment")