Controtto

{{ if .Error }} <div id="cards" class="grid p-3 md:p-5 animate__animated animate__fadeIn"> <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-md p-4 md:p-5 border border-gray-200 dark:border-neutral-700 relative"> <div class="flex items-center justify-between mb-2 md:mb-3"> <div class="flex items-center space-x-2 text-xs md:text-sm font-medium text-gray-500 dark:text-gray-400"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" /> </svg> <span>Error</span> <span class="text-xs md:text-sm font-medium text-red-500 dark:text-red-400"> {{ .Error}} </span> </div> <span class="px-2 py-0.5 text-[10px] md:text-xs rounded-full text-white font-medium bg-red-500" > Error </span> </div> </div> </div> {{ else }} <section class="p-5 bg-white dark:bg-neutral-900 w-full divide-y rounded-md divide-gray-200 border border-neutral-200 dark:border-neutral-700 dark:divide-gray-700 animate__animated animate__fadeInUp"> <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white"> New Trade </h2> <form id="trans-form"> <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2"> <div> <label class="text-gray-700 dark:text-gray-200" for="base"> <span style="color:{{ .Pair.BaseAsset.Color }}">{{ .Pair.BaseAsset.Symbol }}</span> <small class="text-xs italic"> ( <span style="color:{{ .Pair.QuoteAsset.Color }}">{{ .Pair.QuoteAsset.Symbol }}</span> {{ printf "%.7g" .Pair.Calculations.BasePrice }} ) </small> </label> <input name="base" id="base" _="on change set global x to my.value * {{ .Pair.Calculations.BasePrice }} then put x into #quote.value" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-neutral-200 rounded-md dark:bg-neutral-900 dark:text-gray-300 dark:border-neutral-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" type="number" placeholder="0.029578 {{ .Pair.BaseAsset.Symbol }}" /> </div> <div> <label class="text-gray-700 dark:text-gray-200" for="quote"> <span style="color:{{ .Pair.QuoteAsset.Color }}">{{ .Pair.QuoteAsset.Symbol }}</span> </label> <input name="quote" id="quote" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-neutral-200 rounded-md dark:bg-neutral-900 dark:text-gray-300 dark:border-neutral-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" type="number" placeholder="365.87 {{ .Pair.QuoteAsset.Symbol }}" /> </div> <div> <label class="text-gray-700 dark:text-gray-200" for="ttype"> <span class="text-emerald-500">Buy</span> / <span class="text-red-500">Sell</span> </label> <select name="ttype" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-neutral-200 rounded-md dark:bg-neutral-900 dark:text-gray-300 dark:border-neutral-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" id="ttype"> <option value="Buy">Buy</option> <option value="Sell">Sell</option> </select> </div> <div> <label class="text-gray-700 dark:text-gray-200" for="fee"> Fee in <span style="color:{{ .Pair.BaseAsset.Color }}">{{ .Pair.BaseAsset.Symbol }}</span> / <span style="color:{{ .Pair.QuoteAsset.Color }}">{{ .Pair.QuoteAsset.Symbol }}</span> </label> <select class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-neutral-200 rounded-md dark:bg-neutral-900 dark:text-gray-300 dark:border-neutral-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" _="on change toggle .hidden on #qfee then toggle .hidden on #bfee" id="fee"> <option selected> <span style="color:{{ .Pair.BaseAsset.Color }}">{{ .Pair.BaseAsset.Symbol }}</span> </option> <option> <span style="color:{{ .Pair.QuoteAsset.Color }}">{{ .Pair.QuoteAsset.Symbol }}</span> </option> </select> {{ if eq .Pair.BaseAsset.Type "Crypto" }} <small class="text-xs leading-tight text-white/80"> Usually, when <span class="text-emerald-500 font-semibold">buying</span> <span style="color:{{ .Pair.BaseAsset.Color }}">{{ .Pair.BaseAsset.Symbol }}</span> fee is charge in <span style="color:{{ .Pair.BaseAsset.Color }}">{{ .Pair.BaseAsset.Symbol }}</span> </small> {{ else }} <small class="text-xs leading-tight text-white/80"> Please be mindful of the currency for fee charges. </small> {{ end }} </div> <div id="bfee" class="w-full"> <label class="text-gray-700 dark:text-gray-200" for="bfee"> Fee in <span style="color:{{ .Pair.BaseAsset.Color }}">{{ .Pair.BaseAsset.Symbol }}</span> </label> <input name="bfee" value="0" style="border: solid 1px {{ .Pair.BaseAsset.Color }}; box-shadow: 0 -1px 5px {{ .Pair.BaseAsset.Color }};" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-neutral-200 rounded-md dark:bg-neutral-900 dark:text-gray-300 dark:border-neutral-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" type="number" placeholder="0.0004 {{ .Pair.BaseAsset.Symbol }}" /> <small class="text-xs leading-tight text-white/80"> <br /> </small> </div> <div id="qfee" class="hidden w-full"> <label class="text-gray-700 dark:text-gray-200" for="qfee"> Fee in <span style="color:{{ .Pair.QuoteAsset.Color }}">{{ .Pair.QuoteAsset.Symbol }}</span> </label> <input name="qfee" value="0" style="border: solid 1px {{ .Pair.QuoteAsset.Color }}; box-shadow: 0 -1px 5px {{ .Pair.QuoteAsset.Color }};" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-neutral-200 rounded-md dark:bg-neutral-900 dark:text-gray-300 dark:border-neutral-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" type="number" placeholder="0.0002 {{ .Pair.QuoteAsset.Symbol }}" /> <small class="text-xs leading-tight text-white/80"> <br /> </small> </div> <div> <label class="text-gray-700 dark:text-gray-200" for="tdate"> Date </label> <input class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-neutral-200 rounded-md dark:bg-neutral-900 dark:text-gray-300 dark:border-neutral-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" type="date" id="tdate" name="tdate" value="{{ .Today }}" min="1997-01-01" max="2123-12-31" /> <small class="text-xs leading-tight text-white/80"> <br /> </small> </div> </div> <div class="flex md:flex–nowrap flex-wrap md:justify-between justify-center mt-6 gap-y-4"> <div class="group flex items-center justify-center w-full md:w-auto"> <form id="import-form" class=""> <button hx-encoding="multipart/form-data" hx-post="/pairs/{{ .Pair.ID }}/trades/csvImport" hx-target="#mitoast" id="import" hx-include="#import-form" class="inline-flex items-center px-4 py-2 text-md font-semibold text-indigo-700 bg-indigo-100 border border-indigo-300 rounded-lg shadow-sm dark:text-indigo-400 dark:bg-indigo-900/30 dark:border-indigo-800 hover:bg-indigo-200 dark:hover:bg-indigo-800/50 transition-all duration-200 ease-in-out"> <img src="/assets/img/import.svg" alt="import" class="h-6 w-6" /> <span>Import</span> </button> <input type="file" name="trancsv" class="flex px-2 ml-2 group-hover:scale-100 lg:scale-0 transition-transform duration-200 text-sm text-gray-600 bg-white border border-neutral-200 rounded-lg file:bg-gray-200 file:text-gray-700 file:text-sm file:px-4 file:py-1 file:border-none file:rounded-full dark:file:bg-gray-800 dark:file:text-gray-200 dark:text-gray-300 placeholder-gray-400/70 dark:placeholder-gray-500 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-neutral-600 dark:bg-neutral-900 dark:focus:border-blue-300" /> </form> </div> <div class=""> <button hx-post="/pairs/{{ .Pair.ID }}/trades" hx-include="#trans-form" hx-target="#mitoast" hx-swap="innerHTML" class="inline-flex items-center px-4 py-2 text-md font-semibold text-indigo-700 bg-indigo-100 border border-indigo-300 rounded-lg shadow-sm dark:text-indigo-400 dark:bg-indigo-900/30 dark:border-indigo-800 hover:bg-indigo-200 dark:hover:bg-indigo-800/50 transition-all duration-200 ease-in-out"> Record </button> </div> </div> </form> </section> {{end}}