<turbo-stream action="update" target="mobile_bottom_bar"><template><div class="grid grid-cols-5 px-3 py-2 justify-between w-full items-center h-[70px] fixed bottom-0 z-20 border-t border-white border-opacity-20 bg-black-default lg:hidden">
  <!-- Discover Icon -->
  <a href="/" class="flex flex-col items-center">
    <img src="/assets/sidebar-icons/explore-active-ca279297c446de8d9227ffbadf9fef01e001cd35d665ec3620b02c9c35cab08c.svg" class="w-6 h-6" >
    <span class="text-pink-default text-[#A1A1A1] text-[10px] mt-1">Explore</span>
  </a>
  <!-- Generate Image Icon -->
  <a href="/generate-image?origin=sidebar" class="flex flex-col items-center relative" >
    <img src="/assets/bottom-nav-icons/generate-e0a4445659c35cbc82e7046cf089cf881179d55eaa82d4bf32dae229a06666c1.svg"  class="w-6 h-6">
    <span class=" text-[#A1A1A1] text-[10px] mt-1">
      Generate
    </span>
  </a>
  <!-- Create AI Icon -->
  <a href="/characters/new" class="flex flex-col items-center">
    <img src="/assets/sidebar-icons/mobile-magic-wand-d445265367be8ddfbfe1c22810893d0ea4dbdaf1eadd7c4496861113d5388d78.svg" class="w-6 h-6" >
    <span class=" text-[#A1A1A1] text-[10px] mt-1">
      Create
    </span>
  </a>
  <!-- Chat Icon -->
    <a
      data-action="click->main#openRegistrationModal"
      class="flex flex-col items-center cursor-pointer">
      <img src="/assets/bottom-nav-icons/chat-dbf86a760f2ab098a3a5d34346fb0a7c8619ed5050e90bd062c835416f510a0f.svg" class="w-6 h-6">
      <span class="text-[#A1A1A1] text-[10px] mt-1">
         Chat
      </span>
    </a>
  <!-- Premium Icon -->
        <a
        data-action="click->main#openRegistrationModal"
        class="flex flex-col items-center cursor-pointer">
        <img alt="Premium" src="/assets/sidebar-icons/premium-bef4c0d01b6b99b6f2764cf40b755bd97debc307331857ca26f97628c6a38eec.svg" >
        <span class="text-[#A1A1A1] text-[10px] mt-1">
          Premium
        </span>
      </a>

</div>
</template></turbo-stream>