Controtto

<section class="p-6 bg-white dark:bg-neutral-800 w-full rounded-xl border border-neutral-200 dark:border-neutral-700 shadow-sm animate__animated animate__fadeInUp"> {{ if not .MarketTraders }} <div class="text-center text-gray-500 dark:text-gray-400 py-12"> <p class="text-lg font-medium">No providers configured</p> <p class="text-sm mt-2"> Please set up at least one market provider to view your balances. <a class="text-blue-400" href="/settings">/settings</a> </p> </div> {{ else }} <!-- <div class="grid gap-6 sm:grid-cols-2 md:grid-cols-3"> --> <div class="grid gap-6 grid-cols-[repeat(auto-fit,minmax(300px,1fr))]"> <!-- Define pid variable with .PairID--> {{ range $marketName, $market := .MarketTraders }} {{ if $market.IsSet }} <div class="p-4 bg-neutral-50 dark:bg-neutral-900 hover:shadow-md transition-shadow relative"> {{ with index $.MarketData $marketName }} {{ if .HasError }} <div class="absolute top-2 right-2 px-2 py-1 text-xs font-semibold rounded bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" title="{{ .ErrorMessage }}"> Error </div> {{ else }} <div class="absolute cursor-pointer top-2 right-2 px-2 py-1 text-xs font-semibold rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400 hover:bg-indigo-200 transition-all duration-200 ease-in-out dark:hover:bg-indigo-800/50" title="See latest trades" id="tradesTable" type="button" hx-get="/pairs/{{ $.Pair.ID }}/market/{{ $marketName }}/trades" hx-swap="innerHTML" hx-target="#market-modal" hx-trigger="click" > Trades </div> {{ end }} {{ end }} <div class="flex items-center gap-3 mb-3"> <img src="{{ $market.MarketLogo }}" alt="{{ $marketName }}" class="w-8 h-8"> <span class="text-base font-semibold text-gray-700 dark:text-gray-100">{{ $market.MarketName }}</span> <span class="px-2 py-1 text-xs rounded-md {{ if eq $market.Type "Exchange" }} text-emerald-600 dark:text-emerald-400 bg-emerald-100/60 dark:bg-emerald-900/30 {{ else if eq $market.Type "Broker" }} text-blue-600 dark:text-blue-400 bg-blue-100/60 dark:bg-blue-900/30 {{ else if eq $market.Type "Wallet" }} text-purple-600 dark:text-indigo-400 bg-indigo-100/60 dark:bg-indigo-900/30 {{ else if eq $market.Type "DEX" }} text-purple-600 dark:text-purple-400 bg-purple-100/60 dark:bg-purple-900/30 {{ else }} text-gray-600 dark:text-gray-400 bg-gray-100/60 dark:bg-gray-900/30 {{ end }}"> {{ $market.Type }} </span> </div> <div class="space-y-2 text-sm"> {{ $info := index $.MarketData $marketName }} {{ range $key, $val := $info.Amounts }} <div class="flex justify-between text-gray-600 dark:text-gray-400 border-b border-1 border-neutral-300 dark:border-neutral-800 pb-1"> <span>{{ $key }}</span> <span class="font-medium"> {{ if eq $key $.Pair.BaseAsset.Symbol}} (<span class="font-medium" style="color:{{ $.Pair.QuoteAsset.Color }}"> $ <span hx-swap="outerHTML" hx-trigger="revealed delay:1s" hx-target="this" hx-get="/calc/price?base={{ $.Pair.BaseAsset.Symbol }}&quote={{ $.Pair.QuoteAsset.Symbol }}&amount={{ printf "%.4f" $val }}" hx-trigger="load"> ... </span> </span>) {{ end }} {{ if or (eq $key $.Pair.BaseAsset.Symbol) (ne $market.Type "Wallet") }} <span _="on load fetch `/asset/{{ $key }}/color` then put it into my.style.color"> {{ printf "%.2f" $val }} </span> {{ else }} --.-- {{ end }} </span> </div> {{ end }} </div> </div> {{ end }} {{ end }} </div> {{ end }} </section> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize any JS here }); </script>