Controtto

<section class="mx-auto max-w-screen-2xl"> <div id="tvChart{{ .PairID }}" hx-get="/ui/pairs/{{ .PairID }}/chart" hx-target="this" hx-trigger="revealed" hw-swap="innerHTML" class="hidden"> </div> <div id="cards" hx-get="/ui/pairs/{{ .PairID }}/cards" hx-target="this" hx-trigger="revealed,newTrade from:body" class=""> </div> <hr class="my-4 border-neutral-300 dark:border-neutral-600" /> <div hx-get="/ui/pairs/{{ .PairID }}/tape" hx-target="this" hx-trigger="revealed"> </div> <div class="flex items-center justify-between"> <h1 class="font-semibold dark:text-neutral-200 text-gray-700 text-xl mx-4 hidden md:block">Trades</h1> <hr class="my-6 border-neutral-300 dark:border-neutral-600" /> <div class="flex items-center flex-col-2 md:float-left md:flex-row justify-end gap-3 w-screen m-3"> <button hx-get="/ui/pairs/{{ .PairID }}/market" hx-swap="innerHTML" hx-target="#market-data" hx-trigger="revealed" _="on click toggle .hidden on #market-data" class="flex items-center justify-center lg:w-full w-1/2 md:w-1/6 h-10 px-5 py-2 text-sm tracking-wide border border-neutral-300 rounded-lg bg-white text-gray-800 hover:bg-gray-100 hover:text-black dark:bg-neutral-800 dark:text-gray-200 dark:border-neutral-600 dark:hover:bg-slate-600 dark:hover:text-white transition-colors duration-200"> <img src="/assets/img/trades.svg" alt="export" class="h-6 w-6 mr-2"> <span>Markets</span> </button> <!-- <button disabled --> <!-- class="group relative flex items-center justify-center lg:w-full w-1/2 md:w-1/6 h-10 px-5 py-2 text-sm tracking-wide border border-neutral-300 rounded-lg bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-neutral-700 dark:text-gray-500 dark:border-neutral-600 transition-colors duration-200"> --> <!-- <img src="/assets/img/markets.svg" alt="export" class="h-6 w-6 mr-2 opacity-50"> --> <!-- <span class="group-hover:hidden">Trade</span> --> <!-- <span class="hidden group-hover:inline">Soon...</span> --> <!-- </button> --> <button hx-get="/ui/pairs/{{ .PairID }}/newMarketTrade/form" hx-swap="innerHTML" hx-target="#market-trade-form" hx-trigger="mouseover once" _="on click toggle .hidden on #market-trade-form" class="flex items-center justify-center lg:w-full w-1/2 md:w-1/6 h-10 px-5 py-2 text-sm tracking-wide border border-neutral-300 rounded-lg bg-white text-gray-800 hover:bg-gray-100 hover:text-black dark:bg-neutral-800 dark:text-gray-200 dark:border-neutral-600 dark:hover:bg-slate-600 dark:hover:text-white transition-colors duration-200"> <img src="/assets/img/markets.svg " alt="export" class="h-6 w-6 mr-2"> <span>Trade</span> </button> <button _="on click toggle .hidden on #tvChart{{ .PairID }} then changeTradingViewTheme() then go to the top of the body end on click toggle .hidden on #cards" class="flex items-center justify-center lg:w-full w-1/2 md:w-1/6 h-10 px-5 py-2 text-sm tracking-wide border border-neutral-300 rounded-lg bg-white text-gray-800 hover:bg-gray-100 hover:text-black dark:bg-neutral-800 dark:text-gray-200 dark:border-neutral-600 dark:hover:bg-slate-600 dark:hover:text-white transition-colors duration-200"> <svg class="h-6 w-6" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg"> <path d="M14 22H7V11H0V4h14v18zM28 22h-8l7.5-18h8L28 22z" fill="currentColor"></path> <circle cx="20" cy="8" r="4" fill="currentColor"></circle> </svg> <span class="ml-1">Chart</span> </button> <button class="md:flex hidden items-center justify-center lg:w-full w-1/2 md:w-1/6 h-10 px-5 py-2 text-sm tracking-wide border border-neutral-300 rounded-lg bg-white text-gray-800 hover:bg-gray-100 hover:text-black dark:bg-neutral-800 dark:text-gray-200 dark:border-neutral-600 dark:hover:bg-slate-600 dark:hover:text-white transition-colors duration-200"> <img src="/assets/img/paper.svg" alt="export" class="h-6 w-6 mr-2"> <a href="/pairs/{{ .PairID }}/trades/export" target="_blank"> <span>Export</span> </a> </button> <button hx-get="/ui/pairs/{{ .PairID }}/newTrade/form" hx-swap="innerHTML" hx-target="#trade-form" hx-trigger="mouseover once" _="on click toggle .hidden on #trade-form" class="flex items-center justify-center lg:w-full w-1/2 md:w-1/6 h-10 px-5 py-2 text-sm tracking-wide border border-neutral-300 rounded-lg bg-white text-gray-800 hover:bg-gray-100 hover:text-black dark:bg-neutral-800 dark:text-gray-200 dark:border-neutral-600 dark:hover:bg-slate-600 dark:hover:text-white transition-colors duration-200"> <img src="/assets/img/new.svg" alt="export" class="h-6 w-6 mr-2"> <span>New</span> </button> </div> </div> <div class="flex justify-center items-center grow animate__animted animate__fadeInUp"> <div id="market-data" class="mx-4 py-2 w-full overflow-x-auto hidden"> </div> </div> <div class="flex justify-center items-center grow animate__animted animate__fadeInUp"> <div id="market-trade-form" class="mx-4 py-2 w-full overflow-x-auto hidden"> </div> </div> <div class="flex justify-center items-center grow animate__animted animate__fadeInUp"> <div id="trade-form" class="mx-4 py-2 w-full overflow-x-auto hidden"> </div> </div> <div class="flex justify-center items-center grow animate__animated animate__fadeInUp"> <div class="mx-4 w-full overflow-x-clip hover:overflow-x-auto"> <div id="tradesTable" hx-get="/ui/pairs/{{ .PairID }}/trades/table" hx-swap="innerHTML" hx-target="this" hx-trigger="revealed,newTrade from:body"> </div> </div> </div> <div id="market-modal"> </div> </section>