Controtto

<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> <thead class="bg-gray-50 dark:bg-neutral-900"> <tr> <th scope="col" class="py-3.5 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"> <div class="flex items-center gap-x-3"> <span>Buy/Sell</span> </div> </th> <th scope="col" class="px-12 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"> Quote </th> <th scope="col" class="px-12 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"> Price </th> <th scope="col" class="px-12 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400"> Date </th> <th scope="col"> <button class="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400" hx-get="/ui/pairs/{{ .Pair.ID }}/trades/table" hx-target="#tradesTable" hx-trigger="click" hx-swap="innerHTML" type="button"> <i class="fa-solid fa-arrows-rotate px-6"></i> </button> </th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-neutral-900 animate__headShake animate__animated"> {{ range .Pair.Trades }} <tr id="trans{{ .ID }}" class=" animate__animated"> <td class="p-1 text-sm font-medium text-gray-700 whitespace-nowrap"> <div class="inline-flex items-center gap-x-3"> <div class="flex items-center gap-x-2"> {{ if eq .TradeType "Buy" }} <div class="flex items-center border-0 justify-center w-8 h-8 bg-green-500 rounded-full dark:bg-neutral-900"> <div class="flex items-center justify-center w-8 h-8 bg-green-100 rounded-full dark:bg-neutral-900"> <img src="/assets/img/buy.svg" alt="buy"> </div> </div> {{ else }} <div class="flex items-center justify-center w-8 h-8 text-red-500 bg-red-100 rounded-full dark:bg-neutral-900"> <div class="flex items-center justify-center w-8 h-8 bg-red-100 rounded-full dark:bg-neutral-900"> <img src="/assets/img/sell.svg" alt="sell"> </div> </div> {{ end }} <div> <h2 class="font-normal text-gray-800 dark:text-white ">{{ .TradeType }}</h2> <p class="text-xs font-normal text-gray-500 dark:text-gray-400"> {{ .BaseAmount }} <span style="color:{{ $.Pair.BaseAsset.Color }}"> {{ $.Pair.BaseAsset.Symbol }} </span> </p> </div> </div> </div> </td> <td class="px-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap"> {{ if eq .TradeType "Sell" }} <span class="text-emerald-500"> + {{ .QuoteAmount }} </span> {{ else }} <span class="text-red-500"> - {{ .QuoteAmount }} </span> {{ end }} <span style="color:{{ $.Pair.QuoteAsset.Color }}"> {{ $.Pair.QuoteAsset.Symbol }} </span> </td> <td class="px-4 text-sm text-gray-500 font-semibold dark:text-gray-300 whitespace-nowrap"> {{ printf "%.2f" .Price }} <span class="mb-1 text-sm leading-normal dark:text-white" style="color:{{ $.Pair.QuoteAsset.Color }}"> {{ $.Pair.QuoteAsset.Symbol }} </span> </td> <td class="px-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap"> {{ .Timestamp.Format "Jan 02, 2006 15:04" }} </td> <td class="px-4 text-sm text-center"> <button hx-target="#mitoast" hx-delete="/trades/{{ .ID }}" class="inline-block font-bold text-red-600 text-center uppercase align-middle transition-all bg-transparent border-0 rounded-lg shadow-none leading-normal text-sm ease-in bg-150 tracking-tight-rem bg-x-25" _="on htmx:confirm(issueRequest) halt the event call Swal.fire({title: 'Confirm', text:'Al trade associated will be deleted. Are you sure ?'}) if result.isConfirmed toggle .animate__backOutRight on #trans{{ .ID }} then wait 1s then issueRequest()"> <i class="fa-solid fa-trash"></i> </button> </td> </tr> {{ end }} </tbody> </table>