decred.org/dcrdex@v1.0.5/client/webserver/site/src/html/forms.tmpl (about)

     1  {{define "walletConfigTemplates"}}
     2  <div class="d-flex align-items-center justify-content-between">
     3    <span data-tmpl="walletSettingsHeader" class="fs20">
     4      [[[Wallet Settings]]]
     5    </span>
     6    <div class="flex-center">
     7      <button data-tmpl="fileSelector" type="button" class="small">
     8        <span>[[[load from file]]]</span>
     9        <span class="ico-textfile ms-1 fs14"></span>
    10      </button>
    11      <input data-tmpl="fileInput" type="file" class="d-none" accept=".conf, .cfg, .cnf, .ini">
    12    </div>
    13  </div>
    14  
    15  <div data-tmpl="allSettings">
    16    <div data-tmpl="dynamicOpts" class="dynamicopts">
    17      <div data-tmpl="textInput" class="px-0 d-flex flex-column justify-content-end mt-2">
    18        <label class="small"> <span class="ico-info"></span></label>
    19        <input type="text">
    20      </div>
    21      <div data-tmpl="checkbox" class="d-flex align-items-center mt-2 text-nowrap">
    22        <div class="form-check">
    23          <input class="form-check-input" type="checkbox" value="">
    24          <label class="form-check-label fs14"> <span class="ico-info fs13"></span></label>
    25        </div>
    26      </div>
    27      <div data-tmpl="dateInput" class="px-0 d-flex flex-column justify-content-end mt-2">
    28        <label class="small"> <span class="ico-info"></span></label>
    29        <input type="date">
    30      </div>
    31    </div>
    32    <div data-tmpl="repeatableInput" class="w-100 mt-2">
    33      <label class="small"> <span class="ico-info"></span></label>
    34      <div class="d-flex align-items-stretch justify-content-center">
    35        <input type="text" class="flex-grow-1">
    36        <div class="ico-plus fs14 p-2 ms-2 pointer hoverbg" data-tmpl="add"></div>
    37      </div>
    38    </div>
    39    <div data-tmpl="showOther" class="d-hide mt-2 pointer d-flex align-items-center justify-content-start">
    40      <span data-tmpl="showIcon" class="ico-plus fs8 ps-1"></span>
    41      <span data-tmpl="hideIcon" class="ico-minus fs8 ps-1"></span>
    42      <span data-tmpl="showHideMsg" class="d-inline-block ps-1 pb-1"></span>
    43    </div>
    44    <div data-tmpl="otherSettings" class="d-hide mt-3">
    45      <div data-tmpl="loadedSettingsMsg" class="fs15 pt-3 pb-1 ps-1">&mdash; [[[loaded from file]]] &mdash;</div>
    46      <div data-tmpl="loadedSettings" class="dynamicopts"></div>
    47      <div data-tmpl="defaultSettingsMsg" class="fs15">&mdash; [[[defaults]]] &mdash;</div>
    48      <div data-tmpl="defaultSettings" class="dynamicopts"></div>
    49    </div>
    50  </div>
    51  <div data-tmpl="errMsg" class="fs15 pt-3 text-center d-hide text-danger text-break"></div>
    52  {{end}}
    53  
    54  {{define "walletCfgGuideTemplate"}}
    55  <a data-tmpl="walletCfgGuide" class="d-flex justify-content-start align-items-center pt-2 mx-3 pointer hoverbg" target="_blank">
    56    <span class="ico-textfile me-2"></span>
    57    <span class="pointer">[[[configuration guide]]]</span>
    58  </a>
    59  {{end}}
    60  
    61  {{define "newWalletForm"}}
    62  <div class="form-closer"><span class="ico-cross"></span></div>
    63  <header>
    64    <span class="fs14 ico-plus grey me-2"></span>
    65    <span>[[[add_a_x_wallet]]]</span>
    66  </header>
    67  <div class="flex-center pb-2 border-bottom d-hide" data-tmpl="tokenMsgBox">
    68    <span>[[[Token on]]]</span>
    69    <img data-tmpl="tokenParentLogo" class="ms-1 micro-icon">
    70    <span data-tmpl="tokenParentName"></span>
    71  </div>
    72  <div data-tmpl="walletTypeTabs" class="d-flex justify-content-stretch border-bottom p-0">
    73    <div data-tmpl="walletTabTmpl" class="wtab px-3 py-2 border-end user-select-none"></div>
    74  </div>
    75  <div class="position-relative" data-tmpl="mainForm">
    76    <div class="flex-center pt-3" data-tmpl="oneBttnBox">
    77      <button class="one-bttn w-auto" data-tmpl="oneBttn">[[[Create]]]!</button>
    78    </div>
    79    <div data-tmpl="goBack" class="pt-3 d-flex align-items-center fs14 grey d-hide">
    80      <span class="ico-arrowleft fs12 me-1"></span>
    81      <span>[[[pick a different asset]]]</span>
    82    </div>
    83    <div data-tmpl="walletSettings" class="pt-3">
    84      {{template "walletConfigTemplates"}}
    85    </div>
    86    {{template "walletCfgGuideTemplate"}}
    87    <div class="d-flex align-items-end flex-wrap mt-3" data-tmpl="walletPassAndSubmitBttn">
    88      <div class="flex-grow-1 me-3" data-tmpl="newWalletPassBox">
    89        <label for="newWalletPass">[[[Wallet Password]]]
    90          <span class="ico-info" data-tooltip="[[[w_password_tooltip]]]"></span>
    91        </label>
    92        <input type="password" data-tmpl="newWalletPass" autocomplete="off">
    93      </div>
    94      <button data-tmpl="submitAdd" type="submit" class="feature flex-grow-1">[[[Add]]]</button>
    95    </div>
    96    <div class="p-3 text-center d-hide text-danger text-break" data-tmpl="newWalletErr"></div>
    97  </div>
    98  <div class="d-hide flex-center flex-column" data-tmpl="parentSyncing">
    99    <div>
   100      [[[Synchronizing]]] <img data-tmpl="parentLogo" class="micro-icon"> <span data-tmpl="parentName"></span>.
   101    </div>
   102  
   103    <div class="fs20 pt-3">
   104      <span data-tmpl="parentSyncPct"></span> %
   105    </div>
   106    <div class="pt-3">
   107      <img data-tmpl="childLogo" class="micro-icon"> <span data-tmpl="childName"></span> [[[wallet_wait_synced]]].
   108    </div>
   109  </div>
   110  {{end}}
   111  
   112  {{define "depositAddress"}}
   113  <div class="form-closer"><span class="ico-cross"></span></div>
   114  <header>
   115    [[[Receive]]]
   116    <img id="depositLogo" class="mini-icon mx-1">
   117    <span id="depositName"></span>
   118  </header>
   119  <div class="flex-center d-hide fs18 sans pb-3 border-bottom" id="depositTokenMsgBox">
   120    <span>[[[Token on]]]</span>
   121    <img id="depositTokenParentLogo" class="ms-1 micro-icon">
   122    <span id="depositTokenParentName"></span>
   123  </div>
   124  <div class="flex-center">
   125    <img id="qrcode" />
   126  </div>
   127  <div>
   128    <div class="mono fs15 px-2 py-1 border word-break-all border">
   129      <span id="depositAddress" class="user-select-all"></span>
   130      <span id="copyAddressBtn" class="ico-copy mt-2 ml-2 fs18 pointer"></span>
   131      <span id="copyAlert" class="d-hide text-nowrap">[[[copied]]]</span>
   132    </div>
   133  </div>
   134  
   135  <div id="unifiedReceivers" class="d-flex align-items-stretch">
   136    <div id="unifiedReceiverTmpl" class="p-1 me-2 hoverbg lh1 fs15 pointer brdr selectable"></div>
   137  </div>
   138  <div id="addrUsed" class="my-1 text-center fs15 grey lh1 text-warning">
   139    [[[address has been used]]]
   140  </div>
   141  <div id="newDepAddrBttnBox" class="flex-stretch-column">
   142    <button id="newDepAddrBttn" type="button" class="feature">[[[New Address]]]</button>
   143  </div>
   144  <div class="fs15 text-center d-hide text-danger text-break" id="depositErr"></div>
   145  {{end}}
   146  
   147  {{define "certPicker"}}
   148  <label for="certFile" class="pointer">[[[TLS Certificate]]]</label>
   149  <input type="file" class="d-none" data-tmpl="certFile">
   150  <div class="ps-1 mt-2 fs15">
   151    <span data-tmpl="selectedCert"></span>
   152    <u class="ms-3 pointer d-hide" data-tmpl="removeCert">[[[remove]]]</u>
   153    <u class="ms-3 pointer" data-tmpl="addCert">[[[add a file]]]</u>
   154  </div>
   155  {{end}}
   156  
   157  {{define "dexAddrForm"}}
   158  <div class="form-closer"><span class="ico-cross"></span></div>
   159  <div class="flex-center pt-2 px-3">
   160    <img class="dex-logo mini-icon me-2">
   161    <div data-tmpl="addDexHdr" class="fs26 d-flex align-items-center justify-content-center">[[[Add a DEX]]]</div>
   162    <div data-tmpl="updateDexHdr" class="fs26 d-hide">[[[update dex host]]]</div>
   163  </div>
   164  <div data-tmpl="pickServerMsg" class="fs20 mt-2 border-top">
   165    [[[Pick a server]]]
   166  </div>
   167  <div data-tmpl="knownXCs" class="flex-stretch-column">
   168    {{range .KnownExchanges}}
   169      <div class="known-exchange" data-host="{{.}}"><img class="micro-icon me-1" src={{dummyExchangeLogo .}}> {{.}}</div>
   170    {{end}}
   171  </div>
   172  <div data-tmpl="skipRegistrationBox" class="fs14">
   173    <input class="form-check-input" type="checkbox" data-tmpl="skipRegistration" id="skipRegistration">
   174    <label for="skipRegistration" class="ps-1">[[[Skip Registration]]]</label>
   175  </div>
   176  <div data-tmpl="showCustom">
   177    <div class="px-1 mb-2 fs14 pointer d-flex justify-content-start align-items-center {{if eq (len .KnownExchanges) 0}}d-hide{{end}}">
   178      <span class="ico-plus fs11"></span>
   179      <div class="ps-2">[[[add a different server]]]</div>
   180    </div>
   181  </div>
   182  
   183  <div data-tmpl="customBox" class="mt-2 border-top">
   184    <div class="fs20 " data-tmpl="addCustomMsg">[[[Add a custom server]]]</div>
   185    <div class="mb-3">
   186      <label for="dexAddr">[[[DEX Address]]]</label>
   187      <input type="text" data-tmpl="addr" id="dexAddr">
   188    </div>
   189    <div class="fs14 d-hide" data-tmpl="needCert">
   190      [[[reg_ssl_needed]]]
   191    </div>
   192    {{template "certPicker"}}
   193  </div>
   194  <div class="flex-stretch-column d-hide" data-tmpl="auth">
   195    <button data-tmpl="submit" type="button" class="feature">[[[Submit]]]</button>
   196  </div>
   197  <div class="fs15 text-center d-hide text-danger text-break" data-tmpl="err"></div>
   198  {{end}}
   199  
   200  {{define "discoverAcctForm"}}
   201  <header data-tmpl="header">[[[Create Account]]]</header>
   202  <div class="fs16 text-center"><span data-tmpl="dexHost"></span></div>
   203  <div class="flex-stretch-column">
   204    <button data-tmpl="submit" type="button" class="feature">[[[Create Account]]]</button>
   205  </div>
   206  <div class="fs15 text-center d-hide text-danger text-break" data-tmpl="err"></div>
   207  {{end}}
   208  
   209  {{define "regAssetForm"}}
   210  <div data-tmpl="whatsABondPanel" class="d-hide">
   211    <div data-tmpl="whatsABondBack" class="small">
   212      <span class="ico-wide-headed-left-arrow pointer hoverbg fs24"></span>
   213    </div>
   214    <h4 class="flex-center fs22 mb-3">[[[What is a fidelity bond]]]</h4>
   215    <ul>
   216      <li>
   217        [[[bond_definition]]]
   218      </li>
   219      <li>
   220        [[[bonds_can_be_revoked]]]
   221      </li>
   222      <li>
   223        [[[bigger_bonds_higher_limit]]]
   224      </li>
   225      <li>
   226        [[[limits_reputation]]]
   227      </li>
   228      <li>
   229        [[[wallet_bond_reserves]]]
   230      </li>
   231    </ul>
   232    <div class="flex-center">
   233      <button type="button" data-tmpl="bondGotIt" class="mt-3">[[[Got it]]]</button>
   234    </div>
   235  </div>
   236  
   237  <div data-tmpl="assetForm" class="flex-stretch-column">
   238    <div class="flex-center fs26">
   239      <span>[[[Select your bond asset]]]</span>
   240    </div>
   241    <div data-tmpl="regAssetErr" class="fs14 text-danger flex-center p-3"></div>
   242    <div data-tmpl="bondAssets" class="mt-3 border-top">
   243      <div data-tmpl="bondAssetTmpl" class="border rounded3 d-flex align-items-stretch p-2 hoverbg pointer mt-3">
   244        <div class="flex-center pe-4">
   245          <div class="flex-center">
   246            <img class="small-icon" data-tmpl="logo">
   247            <span class="fs26 ms-2" data-tmpl="name"></span>
   248          </div>
   249          <div class="fs14 readygreen" data-tmpl="ready"></div>
   250        </div>
   251        <div class="d-flex flex-column align-items-end justify-content-center flex-grow-1">
   252          <div class="d-flex align-items-end lh1">
   253            <span data-tmpl="feeAmt" class="fs20"></span>
   254            <span data-tmpl="feeSymbol" class="fs17 grey ms-1"></span>
   255          </div>
   256          <div data-tmpl="fiatBox" class="d-flex align-items-end grey fs15 lh1">
   257            <span class="me-1">~</span>
   258            <span data-tmpl="fiatBondAmount"></span>
   259            <span class="ms-1 fs14">USD</span>
   260          </div>
   261        </div>
   262      </div>
   263    </div>
   264    <button type="button" data-tmpl="usePrepaidBond" class="mt-3">
   265      <span class="ico-ticket fs20 me-2"></span>
   266      <span class="fs22">Use a pre-paid bond</span>
   267    </button>
   268    <div data-tmpl="whatsABond" class="flex-center fs18 hoverbg pointer underline py-2">[[[what_s_a_bond]]]</div>
   269  </div>
   270  
   271  <div data-tmpl="tradingTierForm" class="flex-stretch-column d-hide">
   272    <div class="flex-center fs26">
   273      [[[Choose your trading tier]]]
   274    </div>
   275    <div class="d-flex align-items-center pt-3 mt-3 border-top">
   276      <div class="flex-grow-1 flex-column pe-2">
   277        <div class="fs15">[[[trading_tier_message]]]</div>
   278      </div>
   279      <div class="flex-center flex-grow-1">
   280        <div class="position-relative d-flex align-items-stretch user-select-none">
   281          <input data-tmpl="tradingTierInput" type="number" class="text-center fs24 p-2" value="1" min="0" step="1">
   282          <input type="text" class="d-hide"> <!--two inputs to prevent auto form submission-->
   283          <div class="flex-stretch-column border-top border-end border-bottom">
   284            <div data-tmpl="tierUp" class="hoveropaque flex-grow-1 flex-center ico-arrowup pointer hoverbg border-bottom px-2"></div>
   285            <div data-tmpl="tierDown" class="hoveropaque flex-grow-1 flex-center ico-arrowdown pointer hoverbg px-2"></div>
   286          </div>
   287        </div>
   288      </div>
   289    </div>
   290    <div data-tmpl="tradingTierErr" class="fs14 text-danger flex-center p-3"></div>
   291    <div class="pt-1">
   292      <div data-tmpl="goBackToAssets" class="d-inline-block fs16 grey pointer hoverbg">
   293        <span class="ico-wide-headed-left-arrow"></span>
   294        [[[choose a different asset]]]
   295      </div>
   296    </div>
   297    <table class="cell-border w-auto compact mt-3">
   298      <thead>
   299        <tr>
   300          <th class="text-center">Bond</th>
   301          <th class="text-center">Tier</th>
   302          <th class="text-center">Reserves</th>
   303          <th class="text-center">Bond Lock</th>
   304        </tr>
   305      </thead>
   306      <tbody>
   307        <tr>
   308          <td class="text-center">
   309            <span data-tmpl="bondSizeDisplay" class="fs18"></span>
   310            <span class="fs16 grey" data-bond-asset-ticker></span>
   311          </td>
   312          <td class="text-center fs18">
   313            x <span data-tier></span>
   314          </td>
   315          <td class="text-center fs18">x 2</td>
   316          <td>
   317            <div class="text-center lh1">
   318              <span>=</span>
   319              <span data-tmpl="bondLockDisplay" class="fs18 demi"></span>
   320              <span class="fs16 grey" data-bond-asset-ticker></span>
   321            </div>
   322            <div data-tmpl="fiatLockBox" class="text-center lh1">
   323              <span>~</span>
   324              <span data-tmpl="fiatLockDisplay" class="fs16 demi"></span>
   325              <span class="fs14 grey">USD</span>
   326            </div>
   327          </td>
   328        </tr>
   329      </tbody>
   330    </table>
   331    <button type="button" data-tmpl="submitTradingTier" class="feature mt-3">[[[Submit]]]</button>
   332    <table data-tmpl="currentBondBox" class="cell-border w-auto mt-3 lh1">
   333      <thead>
   334        <tr>
   335          <th colspan="2" class="text-center">Current Bond Lock</th>
   336        </tr>
   337      </thead>
   338      <tbody data-tmpl="currentBonds">
   339        <tr data-tmpl="currentBondTmpl">
   340          <td class="no-stretch">
   341            <div class="flex-center">
   342              <img data-tmpl="icon" class="mini-icon me-2">
   343              <span data-tmpl="name" class="fs20"></span>
   344            </div>
   345          </td>
   346          <td>
   347            <div class="flex-stretch-column">
   348              <div class="d-flex align-items-center justify-content-end lh1">
   349                <span data-tmpl="amt" class="fs18 me-1"></span>
   350                <span data-tmpl="ticker" class="fs16 grey"></span>
   351              </div>
   352              <div data-tmpl="fiatBox" class="d-flex align-items-center justify-content-end lh1">
   353                <span>~</span>
   354                <span data-tmpl="fiatAmt" class="fs16 me-1"></span>
   355                <span class="fs14 grey">USD</span>
   356              </div>
   357            </div>
   358          </td>
   359        </tr>
   360      </tbody>
   361    </table>
   362    <div class="text-center fs22 pt-3">Tier <span data-tier></span> Trading Limits</div>
   363    <table class="cell-border w-auto mt-3">
   364      <thead>
   365        <tr class="fs16">
   366          <th class="no-stretch">[[[Market]]]</th>
   367          <th class="text-end text-nowrap">Starting Limit</th>
   368          <th class="text-nowrap">Upper Limit</th>
   369        </tr>
   370      </thead>
   371      <tbody data-tmpl="markets">
   372  
   373        <tr data-tmpl="marketTmpl">
   374          <td class="no-stretch">
   375            <div class="d-flex align-items-center lh1">
   376              <img data-tmpl="baseLogo" class="micro-icon me-1">
   377              <img data-tmpl="quoteLogo" class="micro-icon me-1">
   378              <span data-base-ticker></span>-<span data-quote-ticker></span>
   379            </div>
   380          </td>
   381          <td>
   382            <div class="flex-stretch-column">
   383              <div class="d-flex align-items-center justify-content-end lh1">
   384                <span data-tmpl="tradeLimitLow" class="fs18 me-1"></span>
   385                <span class="fs16 grey" data-base-ticker></span>
   386              </div>
   387              <div data-tmpl="fiatTradeLowBox" class="d-flex align-items-center justify-content-end lh1">
   388                <span>~</span>
   389                <span data-tmpl="fiatTradeLimitLow" class="fs16 me-1"></span>
   390                <span class="fs14 grey">USD</span>
   391              </div>
   392            </div>
   393          </td>
   394          <td>
   395            <div class="flex-stretch-column">
   396              <div class="d-flex align-items-center justify-content-end lh1">
   397                <span data-tmpl="tradeLimitHigh" class="fs18 me-1"></span>
   398                <span class="fs16 grey" data-base-ticker></span>
   399              </div>
   400              <div data-tmpl="fiatTradeHighBox" class="d-flex align-items-center justify-content-end lh1">
   401                <span>~</span>
   402                <span data-tmpl="fiatTradeLimitHigh" class="fs16 me-1"></span>
   403                <span class="fs14 grey">USD</span>
   404              </div>
   405            </div>
   406          </td>
   407        </tr>
   408      </tbody>
   409    </table>
   410  </div>
   411  
   412  <div data-tmpl="prepaidBonds" class="d-hide">
   413    <div class="flex-center fs26">
   414      <span>Redeem Pre-paid Bond</span>
   415    </div>
   416    <div class="flex-stretch-column mt-3 border-top">
   417      <label for="prepaidBondCode">Code</label>
   418      <input type="text" data-tmpl="prepaidBondCode" autocomplete="off">
   419      <div data-tmpl="prepaidBondErr" class="p-3 text-danger d-hide"></div>
   420      <button data-tmpl="submitPrepaidBond" type="button" class="feature mt-3">[[[Submit]]]</button>
   421    </div>
   422    <div class="pt-3 fs14 grey">
   423      <span class="hoverbg pointer" data-tmpl="ppbGoBack"><span class="ico-arrowleft fs12 me-1"></span> go back</span>
   424    </div>
   425  </div>
   426  {{end}}
   427  
   428  {{define "loginForm"}}
   429  <header>
   430    <span class="ico-locked fs20 grey me-1"></span>
   431    <span>[[[Log In]]]</span>
   432  </header>
   433  <div class="d-flex align-items-end">
   434    <div class="flex-grow-1">
   435      <label for="pw">[[[Password]]]</label>
   436      <input type="password" data-tmpl="pw" autocomplete="current-password">
   437    </div>
   438    <button data-tmpl="submit" type="button" class="feature ms-3" id="loginSubmit">[[[Submit]]]</button>
   439  </div>
   440  <div class="d-flex justify-content-center">
   441    <div id="forgotPassBtn" class="grey demi pointer pointer hoverbg">[[[Forgot Password]]]</div>
   442  </div>
   443  <div class="fs15 text-center d-hide text-danger text-break" data-tmpl="errMsg"></div>
   444  {{end}}
   445  
   446  {{define "confirmRegistrationForm"}}
   447  <header>
   448    [[[Confirm Bond Options]]]
   449  </header>
   450  <div class="d-flex align-items-stretch">
   451    <div class="flex-grow-1 flex-stretch-column pe-3">
   452      <div class="d-flex justify-content-between">
   453        <span>[[[Host]]]</span>
   454        <span data-tmpl="host"></span>
   455      </div>
   456      <div class="d-flex justify-content-between">
   457        <span>[[[Trading Tier]]]</span>
   458        <span data-tmpl="tradingTier"></span>
   459      </div>
   460      <div class="d-flex justify-content-between">
   461        <span>[[[Bond Lock]]]</span>
   462        <span>
   463          <span data-tmpl="bondLock"></span>
   464          <span data-tmpl="bondUnit"></span>
   465          <img data-tmpl="logo" class="micro-icon ms-1">
   466        </span>
   467      </div>
   468      <div data-tmpl="bondLockUSDBox" class="d-flex justify-content-between lh1 fs14 grey">
   469        <span></span>
   470        <span><span>~</span><span data-tmpl="bondLockUSD"></span> <span>USD</span></span>
   471      </div>
   472      <div class="d-flex justify-content-between">
   473        <span>[[[Fee Reserves]]]</span>
   474        <span><span data-tmpl="feeReserves"></span> <span data-tmpl="reservesUnit"></span></span>
   475      </div>
   476    </div>
   477    <div class="flex-center flex-column border-start ps-3">
   478      <button data-tmpl="submit" class="large feature">[[[Submit]]]</button>
   479    </div>
   480  </div>
   481  <div class="fs15 text-center d-hide text-danger text-break" data-tmpl="regErr"></div>
   482  <div data-tmpl="text" class="fs16 reg-conf-msg mt-3 border-top">
   483    <span class="ico-info"></span> [[[reg_confirm_submit]]]
   484  </div>
   485  <div class="hoverbg pointer grey pt-2" data-tmpl="goBack"><span class="ico-arrowleft fs12 me-1"></span> [[[pick a different asset]]]</div>
   486  {{end}}
   487  
   488  {{define "authorizeAccountImportForm"}}
   489  <div class="form-closer"><span class="ico-cross"></span></div>
   490  <header>
   491    [[[Authorize Import]]]
   492  </header>
   493  <div>
   494    <label for="accountFile">[[[Account File]]]</label>
   495    <input type="file" class="d-none" id="accountFile">
   496    <small class="pointer">
   497      <span id="selectedAccount"></span>
   498      <u class="ms-3 pointer d-hide" id="removeAccount">[[[remove]]]</u>
   499      <u class="ms-3 pointer" id="addAccount"><span class="ico-textfile me-1"></span> [[[load from file]]]</u>
   500    </small>
   501  </div>
   502  <div class="flex-stretch-column">
   503    <button id="authorizeImportAccountConfirm" type="button" class="mt-2 mx-3 mb-3 feature">[[[Authorize Import]]]</button>
   504  </div>
   505  <div class="fs15 text-center d-hide text-danger text-break" id="importAccountErr"></div>
   506  {{end}}
   507  
   508  {{define "changeAppPWForm"}}
   509  <div class="form-closer"><span class="ico-cross"></span></div>
   510  <div class="flex-center pt-2 px-3">
   511    <span class="ico-locked fs16 grey me-2"></span>
   512    <span class="fs26">[[[Change Application Password]]]</span>
   513  </div>
   514  <div class="mt-2 pt-2 px-3 border-top">
   515    <label for="appPW">[[[Current Password]]]</label>
   516    <input type="password" id="appPW" autocomplete="current-password">
   517  </div>
   518  <div class="pt-2 px-3">
   519    <label for="newAppPW">[[[New Password]]]</label>
   520    <input type="password" id="newAppPW" autocomplete="new-password">
   521  </div>
   522  <div class="pt-2 px-3">
   523    <label for="confirmNewPW">[[[Confirm New Password]]]</label>
   524    <input type="password" id="confirmNewPW" autocomplete="new-password">
   525  </div>
   526  <div class="flex-stretch-column pt-2 px-3 pb-3">
   527    <button id="submitNewPW" type="submit" class="feature">[[[Submit]]]</button>
   528  </div>
   529  <div class="fs15 p-3 text-center d-hide text-danger text-break" id="changePWErrMsg"></div>
   530  {{end}}
   531  
   532  {{define "cancelOrderForm"}}
   533  <div class="form-closer"><span class="ico-cross"></span></div>
   534  <header>
   535    [[[:title:cancel_order]]]
   536  </header>
   537  <div>
   538    [[[cancel_no_pw]]]
   539    <span id="cancelRemain" class="fs16 sans"></span>
   540    <span id="cancelUnit" class="fs14 sans"></span>.<br>
   541    [[[cancel_remain]]]
   542  </div>
   543  <div class="flex-stretch-column">
   544    <button id="cancelSubmit" type="button" class="feature">[[[Submit]]]</button>
   545  </div>
   546  <div class="fs15 text-center d-hide text-danger" id="cancelErr"></div>
   547  {{end}}
   548  
   549  {{define "accelerateForm"}}
   550  <div class="form-closer"><span class="ico-cross"></span></div>
   551  <header>[[[:title:accelerate_order]]]</header>
   552  <div id="accelerateMainDiv">
   553    <div id="configureAccelerationDiv">
   554      [[[acceleration_text]]]
   555      <br />
   556      <div class="text-center fs17 position-relative">
   557        [[[effective_swap_tx_rate]]]: <span id="accelerateAvgFeeRate"></span>
   558      </div>
   559      <div class="text-center fs17 position-relative">
   560        [[[current_fee]]]: <span id="accelerateCurrentFeeRate"></span>
   561      </div>
   562      <div id="sliderContainer" class="slider-container">
   563      </div>
   564      <div id="feeEstimateDiv" class="text-center fs17 position-relative d-hide">
   565        [[[acceleration_cost_msg]]]
   566      </div>
   567      <hr class="dashed mt-2">
   568      <div class="d-flex flex-row align-items-end justify-content-end pb-4">
   569        <div class="col-12 pt-2">
   570          <button id="accelerateSubmit" type="button" class="go">[[[Submit]]]</button>
   571        </div>
   572      </div>
   573    </div>
   574    <div class="d-hide" id="earlyAccelerationDiv">
   575      <div id="recentAccelerationMsg">[[[recent_acceleration_msg]]]</div>
   576      <div id="recentSwapMsg">[[[recent_swap_msg]]]</div>
   577      <br/>
   578      [[[early_acceleration_help_msg]]]
   579      <div class="d-flex flex-row align-items-end justify-content-end pb-4">
   580        <div class="col-12 pt-2">
   581          <button id="submitEarlyConfirm" type="button" class="go">[[[Submit]]]</button>
   582        </div>
   583      </div>
   584    </div>
   585    <div class="fs15 pt-3 text-center d-hide text-danger text-break" id="accelerateErr"></div>
   586  </div>
   587    {{/* range option template goes here */}}
   588  <div id="accelerateMsgDiv" class="d-hide">
   589    <div class="fs15 pt-3 text-center d-hide text-danger text-break" id="preAccelerateErr"></div>
   590    <div class="fs15 pt-3 text-left d-hide text-break" id="accelerateSuccess">
   591      [[[accelerate_success]]]
   592    </div>
   593  </div>
   594  {{end}}
   595  
   596  {{define "waitingForWalletForm"}}
   597  <div class="flex-center"><img class="large-icon" data-tmpl="logo" src="/img/coins/dcr.png"></div>
   598  <div class="d-flex flex-column align-items-start border-start">
   599    <div class="flex-center flex-row">
   600      <div class="icons text-end pe-3">
   601        <span class="ico-check fs16 d-hide" data-tmpl="syncCheck"></span>
   602        <span class="ico-checkbox d-hide fs14" data-tmpl="syncUncheck"></span>
   603        <div class="ico-spinner spinner d-hide fs14 d-inline-block" data-tmpl="syncSpinner"></div>
   604      </div>
   605      <span class="fs20 ">[[[1 Sync the Blockchain]]]</span>
   606    </div>
   607    <div class="flex-center mt-1">
   608      <span class="fs16 me-1">[[[Progress]]]:</span>
   609      <span class="fs20 mx-1" data-tmpl="progress"></span>
   610      <span class="fs16 grey">%</span>
   611    </div>
   612    <div class="mt-1 flex-center flex-row fs14 d-hide" data-tmpl="syncRemainBox">
   613      <span data-tmpl="syncRemaining"><span data-tmpl="syncRemain" class="me-1"></span> [[[remaining]]]</span>
   614      <span data-tmpl="syncFinishingUp" class="me-1"></span>
   615    </div>
   616  </div>
   617  
   618  <div class="d-flex flex-column align-items-start ps-3 mb-3 border-start">
   619    <div class="flex-center flex-row mb-2">
   620      <div class="icons text-end pe-3">
   621        <span class="ico-checkbox fs14 d-hide" data-tmpl="balUncheck"></span>
   622        <span class="ico-check d-hide fs16" data-tmpl="balCheck"></span>
   623      </div>
   624      <span class="fs20">[[[2 Fund your Wallet]]]</span>
   625    </div>
   626    <div class="d-flex flex-column align-items-start" data-tmpl="balanceBox">
   627      <div class="flex-center mb-2">
   628        <span class="me-1">[[[Available Balance]]]:</span>
   629        <strong class="me-1" data-tmpl="balance"></strong>
   630        <span class="grey unit">XYZ</span>
   631      </div>
   632      <div class="flex-center flex-row mb-2">
   633        <span class="me-1">[[[bond_lock]]]</span>
   634        <strong class="me-1" data-tmpl="fee"></strong>
   635        <span class="grey unit">XYZ</span>
   636      </div>
   637      <div data-tmpl="bondCostBreakdown" class="mb-2 grey">[[[bond_cost_breakdown]]]</div>
   638      <span data-tmpl="sendEnoughWithEst" class="grey">[[[Send enough with estimate]]]</span> {{- /* NOTE: includes totalForBond */}}
   639      <span data-tmpl="sendEnoughForToken" class="grey">[[[Send funds for token]]]</span>
   640      <div class="mb-1 flex-center flex-row d-hide" data-tmpl="txFeeBox">
   641        <span class="fs16 me-1">[[[Reserves for tx fees]]]</span>
   642        <span class="fs20 me-1" data-tmpl="txFee"></span>
   643        <span class="fs16 grey unit" data-tmpl="txFeeUnit">XYZ</span>
   644      </div>
   645      <div class="mb-3 flex-center flex-row d-hide" data-tmpl="txFeeBalanceBox">
   646        <span class="fs16 me-1">[[[Tx Fee Balance]]]</span>
   647        <span class="fs20 me-1" data-tmpl="parentBal">0</span>
   648        <span class="fs16 grey unit" data-tmpl="parentBalUnit">XYZ</span>
   649      </div>
   650      <hr class="dashed w-100 mb-3">
   651      <div class="mb-2">[[[Your Deposit Address]]]</div>
   652      <div class="mono fs15 p-2 border word-break-all border user-select-all" data-tmpl="depoAddr"></div>
   653      <span data-tmpl="sendEnough">[[[Send enough for bonds]]]</span> {{- /* generic message if the fee buffer is unknown */}}
   654    </div>
   655  </div>
   656  
   657  <div class="hoverbg pointer grey d-inline-block text-center" data-tmpl="goBack">
   658    <span class="ico-arrowleft fs12 mb-1"></span>
   659    [[[pick a different asset]]]
   660  </div>
   661  {{end}}
   662  
   663  {{define "orderOptionTemplates"}}
   664  <div id="orderOptTmpl" class="order-opt d-flex align-items-start">
   665    <div data-tmpl="toggle" class="opt-check selected"></div>
   666    <div class="flex-grow-1" data-tmpl="controls">
   667      <div class="d-flex align-items-center">
   668        <span data-tmpl="optName" class="flex-grow-1 text-start fs16 ps-2"></span>
   669        <span data-tmpl="tooltip" class="ico-info me-2" data-tooltip="[[[prevent_temporary_overlocking]]]"></span>
   670        <img data-tmpl="chainIcon" class="micro-icon me-1">
   671      </div>
   672    </div>
   673  </div>
   674  <div id="booleanOptTmpl" class="d-flex justify-content-between align-items-center fs14 ps-2">
   675    <span data-tmpl="reason"></span>
   676  </div>
   677  <div id="rangeOptTmpl">
   678    <div data-tmpl="sliderBox" class="d-flex flex-nowrap fs12">
   679      <span data-tmpl="rangeLblStart"></span>
   680      <div data-tmpl="slider" class="slider flex-grow-1">
   681        <div data-tmpl="handle" class="slider-handle"></div>
   682      </div>
   683      <span data-tmpl="rangeLblEnd"></span>
   684    </div>
   685    <div class="d-flex justify-content-between align-items-center fs14">
   686      <span>
   687        <input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
   688        <span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
   689      </span>
   690      <span>
   691        <input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
   692        <span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
   693      </span>
   694    </div>
   695  </div>
   696  {{end}}
   697  
   698  {{define "toggleWalletStatusConfirm"}}
   699  <div class="form-closer"><span class="ico-cross"></span></div>
   700  <header>
   701     <span id="walletStatusDisable" class="d-hide">[[[disable_wallet]]]</span>
   702      <span id="walletStatusEnable" class="d-hide">[[[enable_wallet]]]</span>
   703  </header>
   704  <div class="fs15 text-left">
   705   <span id="disableWalletMsg" class="hide">[[[disable_wallet_warning]]]</span>
   706   <span id="enableWalletMsg" class="hide">[[[enable_wallet_message]]]</span>
   707  </div>
   708  <div class="flex-stretch-column">
   709    <button id="toggleWalletStatusSubmit" type="button" class="feature">[[[Submit]]]</button>
   710  </div>
   711  <div class="fs15 text-center d-hide text-danger" id="toggleWalletStatusErr"></div>
   712  {{end}}
   713  
   714  {{define "appPassResetForm"}}
   715   <div class="form-closer" id="resetPassFormCloser"><span class="ico-cross"></span></div>
   716   <header>[[[Reset App Password]]]</header>
   717   <div>[[[reset_app_pw_msg]]]</div>
   718   <div class="mt-3 border-top">
   719     <label for="newAppPassword">[[[New Password]]]</label>
   720     <input type="password" id="newAppPassword" autocomplete="new-password">
   721   </div>
   722   <div>
   723     <label for="confirmNewAppPassword">[[[Confirm New Password]]]</label>
   724     <input type="password" id="confirmNewAppPassword" autocomplete="off">
   725   </div>
   726   <div>
   727     <label for="seedInput">[[[Restoration Seed]]]</label>
   728     <textarea class="mono" id="seedInput" rows="4" autocomplete="off" spellcheck="false"></textarea>
   729   </div>
   730   <div class="flex-stretch-column">
   731      <button id="resetAppPWSubmitBtn" type="button" class="feature">[[[Submit]]]</button>
   732   </div>
   733   <div class="fs15 text-center d-hide text-danger text-break" id="appPWResetErrMsg"></div>
   734   <div id="appPWResetSuccessMsg" class="d-hide text-break text-center fs15"></div> 
   735  {{end}}
   736  
   737  {{define "reputationMeter"}}
   738  <div class="flex-stretch-column py-2">
   739    <div class="d-flex justify-content-between align-items-center pb-1">
   740      <span data-tmpl="scoreMin"></span>
   741      <span class="fs15">
   742        <span>[[[Limit Bonus]]]</span>
   743        <span data-tmpl="limitBonus"></span><span>x</span>
   744      </span>
   745      <span data-tmpl="scoreMax"></span>
   746    </div>
   747    <div data-tmpl="scoreTray" class="position-relative pt-2">
   748      <div data-tmpl="scoreWarn"></div>
   749      <div data-tmpl="penaltyMarkerTmpl" class="penalty-marker"></div>
   750    </div>
   751    <div class="position-relative mb-2">
   752      <span data-tmpl="scorePointer" class="d-inline-block position-relative ico-arrowup fs15 lh1">
   753        <span data-tmpl="scoreData" class="d-inline-block position-absolute fs15 px-1 text-nowrap sans">
   754          <span>[[[Score]]]:</span>
   755          <span data-tmpl="score"></span>
   756        </span>
   757      </span>
   758    </div>
   759    <div class="fs14 grey">
   760      [[[score_factors]]]
   761    </div>
   762  </div>
   763  {{end}}
   764  
   765  {{define "tokenApprovalForm"}}
   766  <div class="form-closer"><span class="ico-cross"></span></div>
   767  <header>
   768    [[[:title:Approve]]] <div data-tmpl="tokenSymbol" class="d-inline-block"></div>
   769  </header>
   770  <div data-tmpl="submissionElements">
   771    <div class="fs15 text-start mt-2">
   772      [[[approve_token_text]]]
   773    </div>
   774    <div class="flex-stretch-column mt-2 flex-wrap">
   775      <button data-tmpl="submit" type="button" class="fs15 feature">[[[Approve]]]</button>
   776    </div>
   777  </div>
   778  <div data-tmpl="txMsg">
   779    <span class="text-center fs17 pt-2 px-3 d-hide">[[[token_approval_tx_msg]]]</span>
   780    <a target="_blank" class="subtlelink word-break-all fs14" data-tmpl="txid"></a>
   781  </div>
   782  <div class="fs15 text-center d-hide text-danger text-break" data-tmpl="errMsg"></div>
   783  <div data-tmpl="balanceBox" class="flex-center w-100 py-2 mt-2 px-3 border-top fs15">
   784    [[[Available fee balance]]]: <span data-tmpl="balance" class="ms-2"></span> <span data-tmpl="parentTicker" class="grey ms-1"></span>
   785  </div>
   786  <div data-tmpl="addressBox" class="flex-center fs15 d-hide">
   787    [[[approve_token_wallet_addr]]] <span data-tmpl="address" class="ms-2 px-2"></span>
   788  </div>
   789  {{end}}
   790  
   791  {{define "cexConfigForm"}}
   792  <div class="form-closer"><span class="ico-cross"></span></div>
   793  <div data-tmpl="cexConfigPrompt" class="pt-4 fs18">
   794    [[[configure_cex_prompt]]]
   795  </div>
   796  <div class="flex-center flex-column mt-3 border-top">
   797    <img class="xclogo enourmous-icon" data-cex-logo>
   798    <div class="mt-2 fs20" data-cex-name></div>
   799  </div>
   800  <div data-tmpl="cexConnectErrBox" class="flex-center flex-column text-danger">
   801    <span class="ico-disconnected fs24"></span>
   802    <span>[[[err_with_cex_creds]]]</span>
   803    <span data-tmpl="cexConnectErr" class="fs14 mt-2 text-break"></span>
   804  </div>
   805  <div class="d-flex flex-column">
   806    <label for="cexApiKeyInput">[[[API Key]]]</label>
   807    <input type="text" data-tmpl="cexApiKeyInput" autocomplete="off">
   808  </div>
   809  <div class="d-flex flex-column">
   810    <label for="cexSecretInput">[[[API Secret]]]</label>
   811    <input type="text" data-tmpl="cexSecretInput" autocomplete="off">
   812  </div>
   813  <div data-tmpl="cexFormErr" class="flex-center text-danger text-break d-hide"></div>
   814  <div class="flex-stretch-column">
   815    <button type="button" data-tmpl="cexSubmit" class="feature">[[[Submit]]]</button>
   816  </div>
   817  {{end}}
   818  
   819  {{define "runningBotDisplay"}}
   820  <div data-tmpl="stats" class="d-hide">
   821    <div class="d-flex align-items-center justify-content-between px-3">
   822      <span class="d-flex align-items-center fs28">
   823        <span data-tmpl="plSign" class="me-1 fs10"></span>
   824        <span data-tmpl="profitLoss"></span>
   825        <span class="fs20 grey ms-1">USD</span>
   826      </span>
   827      <span data-tmpl="runTime" class="fs28 mono lh1">00:00:00</span>
   828    </div>
   829    <div class="pt-2 mt-2 border-top">
   830      <table class="row-border fs18 lh1">
   831        <thead>
   832          <tr class="fs16">
   833            <th class="no-stretch ps-3">[[[Inventory]]]</th>
   834            <th class="text-end">
   835              <div class="d-inline-flex align-items-center">
   836                <img class="micro-icon me-2" data-base-logo>
   837                <span data-base-ticker></span>
   838              </div>
   839            </th>
   840            <th class="text-end pe-3 no-stretch">
   841              <div class="d-inline-flex align-items-center">
   842                <img class="micro-icon me-2" data-quote-logo>
   843                <span data-quote-ticker></span>
   844              </div>
   845            </th>
   846          </tr>
   847        </thead>
   848        <tbody>
   849          <tr>
   850            <td class="no-stretch ps-3">
   851              <img class="logo-square small">
   852            </td>
   853            <td class="text-end">
   854              <div class="d-inline-flex flex-column align-items-end text-nowrap">
   855                <span data-tmpl="walletBaseInventory"></span>
   856                <span class="fs14 grey">
   857                  <span>~</span>
   858                  <span data-tmpl="walletBaseInvFiat"></span>
   859                  <span>USD</span>
   860                </span>
   861              </div>
   862            </td>
   863            <td class="no-stretch pe-3">
   864              <div class="d-inline-flex flex-column text-nowrap">
   865                <span data-tmpl="walletQuoteInventory"></span>
   866                <span class="fs14 grey">
   867                  <span>~</span>
   868                  <span data-tmpl="walletQuoteInvFiat"></span>
   869                  <span>USD</span>
   870                </span>
   871              </div>
   872            </td>
   873          </tr>
   874          <tr data-tmpl="cexRow">
   875            <td class="ps-3">
   876              <img class="mini-icon" data-cex-logo>
   877            </td>
   878            <td class="text-end">
   879              <div class="d-inline-flex flex-column align-items-end text-nowrap">
   880                <span data-tmpl="cexBaseInventory"></span>
   881                <span class="fs14 grey">
   882                  <span>~</span>
   883                  <span data-tmpl="cexBaseInventoryFiat"></span>
   884                  <span>USD</span>
   885                </span>
   886              </div>
   887            </td>
   888            <td class="no-stretch text-end pe-3">
   889              <div class="d-inline-flex flex-column text-nowrap">
   890                <span data-tmpl="cexQuoteInventory"></span>
   891                <span class="fs14 grey">
   892                  <span>~</span>
   893                  <span data-tmpl="cexQuoteInventoryFiat"></span>
   894                  <span>USD</span>
   895                </span>
   896              </div>
   897            </td>
   898          </tr>
   899        </tbody>
   900      </table>
   901    </div>
   902    <div class="flex-stretch-column mt-2 px-3">
   903      <div data-tmpl="buyOrdersReportBox" class="d-flex justify-content-between align-items-center d-hide">
   904        <span data-tmpl="buyOrdersSuccess" class="text-buycolor">[[[buy_orders_success]]]</span>
   905        <span data-tmpl="buyOrdersFailed" class="d-hide text-warning">[[[buy_orders_failed]]]</span>
   906        <button data-tmpl="buyOrdersBttn" class="ico-open"></button>
   907      </div>
   908  
   909      <div data-tmpl="sellOrdersReportBox" class="d-flex justify-content-between align-items-center d-hide">
   910        <span data-tmpl="sellOrdersSuccess" class="text-buycolor">[[[sell_orders_success]]]</span>
   911        <span data-tmpl="sellOrdersFailed" class="d-hide text-warning">[[[sell_orders_failed]]]</span>
   912        <button data-tmpl="sellOrdersBttn" class="ico-open"></button>
   913      </div>
   914  
   915      <div data-tmpl="preOrderProblemsBox" class="d-flex flex-column bot-problems-section">
   916      </div>
   917  
   918      <div class="d-flex justify-content-between align-items-center">
   919        <span>[[[Profit]]]</span>
   920        <span class="flex-center">
   921          <span data-tmpl="profitSign" class="fs8 me-1"></span>
   922          <span data-tmpl="profit">
   923          </span>%</span>
   924        </span>
   925      </div>
   926  
   927      <div class="d-flex justify-content-between align-items-center">
   928        <span>[[[Booked orders]]]</span>
   929        <span data-tmpl="nBookedOrders"></span>
   930      </div>
   931  
   932      <div data-tmpl="baseFeeReservesBox" class="d-flex justify-content-between align-items-center">
   933        <span>
   934          <span>[[[Fee reserves]]]</span>
   935          <img data-tmpl="baseFeeLogo" class="micro-icon">
   936        </span>
   937        <span>
   938          <span data-tmpl="baseFeeReserves"></span>
   939          <span data-tmpl="baseFeeTicker"></span>
   940        </span>
   941      </div>
   942  
   943      <div data-tmpl="quoteFeeReservesBox" class="d-flex justify-content-between align-items-center">
   944        <span>
   945          <span>[[[Fee reserves]]]</span>
   946          <img data-tmpl="quoteFeeLogo" class="micro-icon">
   947        </span>
   948        <span>
   949          <span data-tmpl="quoteFeeReserves"></span>
   950          <span data-tmpl="quoteFeeTicker"></span>
   951        </span>
   952      </div>
   953  
   954      <div data-tmpl="pendingDepositBox" class="d-flex justify-content-between align-items-center">
   955        <span>[[[Pending deposits]]]</span>
   956        <span data-tmpl="pendingDeposits"></span>
   957      </div>
   958  
   959      <div data-tmpl="pendingWithdrawalBox" class="d-flex justify-content-between align-items-center">
   960        <span>[[[Pending withdrawals]]]</span>
   961        <span data-tmpl="pendingWithdrawals"></span>
   962      </div>
   963  
   964      <div class="d-flex justify-content-between align-items-center">
   965        <span>[[[Settled matches]]]</span>
   966        <span data-tmpl="completedMatches"></span>
   967      </div>
   968  
   969      <div data-tmpl="tradedUSDBox" class="d-flex justify-content-between align-items-center">
   970        <span>[[[Traded]]]</span>
   971        <span>
   972          <span data-tmpl="tradedUSD"></span>
   973          <span class="fs14 grey">USD</span>
   974        </span>
   975      </div>
   976  
   977      <div class="d-flex justify-content-between align-items-center">
   978        <span>[[[Basis price]]]</span>
   979        <span data-tmpl="basisPrice"></span>
   980      </div>
   981  
   982      <div data-tmpl="feeGapBox" class="d-flex justify-content-between align-items-center">
   983        <span>
   984          [[[Fee gap]]]
   985          <span class="ico-info" data-tooltip="[[[feegap_tooltip]]]"></span>
   986        </span>
   987        <span>
   988          <span data-tmpl="feeGap"></span> (<span data-tmpl="feeGapPct"></span>%)
   989        </span>
   990      </div>
   991  
   992      <div data-tmpl="gapStrategyBox" class="d-flex justify-content-between align-items-center">
   993        <span>Gap strategy</span>
   994        <span data-tmpl="gapStrategy"></span>
   995      </div>
   996  
   997      <div data-tmpl="remoteGapBox" class="d-flex justify-content-between align-items-center">
   998        <span>
   999          [[[Remote gap]]]
  1000          <span class="ico-info" data-tooltip="[[[remotegap_tooltip]]]"></span>
  1001        </span>
  1002        <span>
  1003          <span data-tmpl="remoteGap"></span> (<span data-tmpl="remoteGapPct"></span>%)
  1004        </span>
  1005      </div>
  1006  
  1007      <div data-tmpl="roundTripFeesBox" class="d-flex justify-content-between align-items-center">
  1008        <span>[[[Round_trip fees]]]</span>
  1009        <span>
  1010          <span data-tmpl="roundTripFeesUSD"></span>
  1011          <span class="fs14 grey">USD</span>
  1012        </span>
  1013      </div>
  1014    </div>
  1015  
  1016    <div class="d-flex align-items-stretch px-3 pt-2 py-2 mt-2 border-top">
  1017      <div class="flex-grow-1 d-flex align-items-center justify-content-between pe-3">
  1018        <span>
  1019          <span data-tmpl="profitLabel">Profit threshold</span>
  1020          <span data-tmpl="gapLabel">Gap</span>
  1021          <span data-tmpl="multiplierLabel">Multiplier</span>
  1022        </span>
  1023        <div class="d-flex align-items-end">
  1024          <span data-tmpl="gapFactor"></span>
  1025          <span data-tmpl="profitUnit" class="fs14 grey ms-1">%</span>
  1026          <span data-tmpl="gapUnit" class="fs14 grey ms-1">
  1027            <span data-quote-ticker></span>/<span data-base-ticker></span>
  1028          </span>
  1029          <span data-tmpl="multiplierUnit" class="fs14 grey ms-1">X</span>
  1030        </div>
  1031      </div>
  1032      <div class="d-flex align-items-stretch ps-3 border-start">
  1033        <button data-tmpl="runLogsBttn" class="ico-textfile"></button>
  1034        <button data-tmpl="stopBttn" class="ms-3 position-relative">Stop</button>
  1035      </div>
  1036    </div>
  1037  </div>
  1038  {{end}}
  1039  
  1040  {{define "orderReportForm"}}
  1041  <div class="form-closer"><span class="ico-cross"></span></div>
  1042  <div>
  1043    <header id="orderReportTitle"></header>
  1044    <div id="orderReportError" class="text-danger d-flex flex-column"></div>
  1045    <div id="orderReportDetails" class="d-flex flex-column">
  1046      <div class="fs18 mt-3 align-self-start"><img class="logo-square small"><span class="ms-2">[[[Wallet Balances]]]</span></div>
  1047      <table class="table striped border mt-3 w-auto mx-auto">
  1048        <thead>
  1049          <tr>
  1050            <th class="border text-center">[[[Asset]]]</th>
  1051            <th class="border text-center">[[[Available]]]</th>
  1052            <th class="border text-center">[[[Locked]]]</th>
  1053            <th class="border text-center">[[[Pending]]]</th>
  1054            <th class="border text-center">[[[Required]]]</th>
  1055            <th class="border text-center">[[[Used]]]</th>
  1056            <th class="border text-center">[[[Remaining]]]</th>
  1057            <th id="dexDeficiencyHeader" class="border text-center">[[[Deficiency]]]</th>
  1058            <th id="dexDeficiencyWithPendingHeader" class="border text-center">[[[Deficiency with Pending]]]</th>
  1059          </tr>
  1060        </thead>
  1061        <tbody id="dexBalancesBody">
  1062          <tr id="dexBalancesRowTmpl">
  1063            <td class="border text-center"><img data-tmpl="assetLogo" class="micro-icon me-1"><span data-tmpl="asset"></span></td>
  1064            <td class="border text-center" data-tmpl="available"></td>
  1065            <td class="border text-center" data-tmpl="locked"></td>
  1066            <td class="border text-center" data-tmpl="pending"></td>
  1067            <td class="border text-center" data-tmpl="required"></td>
  1068            <td class="border text-center" data-tmpl="used"></td>
  1069            <td class="border text-center" data-tmpl="remaining"></td>
  1070            <td class="border text-center" data-tmpl="deficiency"></td>
  1071            <td class="border text-center" data-tmpl="deficiencyWithPending"></td>
  1072          </tr>
  1073        </tbody>
  1074      </table>
  1075  
  1076      <div id="cexSection">
  1077        <hr>
  1078        <div class="fs18 align-self-start"><img id="cexLogo" class="small-icon"><span class="ms-2" id="cexBalancesTitle"></span></div>
  1079        <table id="cexBalancesTable" class="table striped border mt-3 w-auto mx-auto">
  1080        <thead>
  1081          <tr>
  1082            <th class="border text-center">[[[Asset]]]</th>
  1083            <th class="border text-center">[[[Available]]]</th>
  1084            <th class="border text-center">[[[Locked]]]</th>
  1085            <th class="border text-center">[[[Pending]]]</th>
  1086            <th class="border text-center">[[[Required]]]</th>
  1087            <th class="border text-center">[[[Used]]]</th>
  1088            <th class="border text-center">[[[Remaining]]]</th>
  1089            <th id="cexDeficiencyHeader" class="border text-center">[[[Deficiency]]]</th>
  1090            <th id="cexDeficiencyWithPendingHeader" class="border text-center">[[[Deficiency with Pending]]]</th>
  1091          </tr>
  1092        </thead>
  1093        <tbody>
  1094          <tr>
  1095            <td class="border text-center"><img id="cexAssetLogo" class="micro-icon me-1"><span id="cexAsset"></span></td>
  1096            <td id="cexAvailable" class="border text-center"></td>
  1097            <td id="cexLocked" class="border text-center"></td>
  1098            <td id="cexPending" class="border text-center"></td>
  1099            <td id="cexRequired" class="border text-center"></td>
  1100            <td id="cexUsed" class="border text-center"></td>
  1101            <td id="cexRemaining" class="border text-center"></td>
  1102            <td id="cexDeficiency" class="border text-center text-warning"></td>
  1103            <td id="cexDeficiencyWithPending" class="border text-center"></td>
  1104            </tr>
  1105          </tbody>
  1106        </table>
  1107      </div>
  1108  
  1109      <hr>
  1110      <div class="fs18 align-self-start">Placements</div>
  1111      <table id="placementsTable" class="table striped border mt-3 w-auto mx-auto">
  1112        <thead>
  1113          <tr>
  1114            <th class="border text-center">[[[Priority]]]</th>
  1115            <th class="border text-center">[[[Lots]]]</th>
  1116            <th class="border text-center">[[[Standing Lots]]]</th>
  1117            <th class="border text-center">[[[Ordered Lots]]]</th>
  1118            <th class="border text-center">[[[Rate]]]</th>
  1119            <th class="border text-center" id="counterTradeRateHeader">[[[Arb Rate]]]</th>
  1120            <th class="border text-center">[[[Required DEX]]]</th>
  1121            <th class="border text-center">[[[Used DEX]]]</th>
  1122            <th class="border text-center" id="requiredCEXHeader">[[[Required CEX]]]</th>
  1123            <th class="border text-center" id="usedCEXHeader">[[[Used CEX]]]</th>
  1124            <th class="border text-center" id="errorHeader">[[[Error]]]</th>
  1125          </tr>
  1126        </thead>
  1127        <tbody id="placementsBody">
  1128          <tr id="placementRowTmpl">
  1129            <td data-tmpl="priority" class="text-center border"></td>
  1130            <td data-tmpl="lots" class="text-center border"></td>
  1131            <td data-tmpl="standingLots" class="text-center border"></td>
  1132            <td data-tmpl="orderedLots" class="text-center border"></td>
  1133            <td data-tmpl="rate" class="text-center border"></td>
  1134            <td data-tmpl="counterTradeRate" class="text-center border"></td>
  1135            <td data-tmpl="requiredDEX" class="text-center border">
  1136              <span id="placementAmtRowTmpl" class="d-flex justify-content-end">
  1137                <span data-tmpl="amt"></span>
  1138                <img data-tmpl="assetLogo" class="micro-icon mx-1 mt-1">
  1139                <span data-tmpl="assetSymbol"></span>
  1140              </span>
  1141            </td>
  1142            <td data-tmpl="usedDEX" class="text-center border"></td>
  1143            <td data-tmpl="requiredCEX" class="text-center border"></td>
  1144            <td data-tmpl="usedCEX" class="text-center border"></td>
  1145            <td data-tmpl="error" class="text-center border text-danger"></td>
  1146          </tr>
  1147        </tbody>
  1148      </table>
  1149    </div>
  1150  </div>
  1151  {{end}}