basicswap_miserver/basicswap/templates/offer_confirm.html

{% include 'header.html' %}
<div class="container mx-auto">
  <section class="bg-white p-5 mt-5">
    <div class="flex flex-wrap items-center -m-2">
      <div class="w-full md:w-1/2 p-2">
        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
          <li>
            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
              <p>Home</p>
            </a>
          </li>
          <li>
            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
            </svg>
          </li>
          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
          <li>
            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
            </svg>
          </li>
          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li>
          <li>
            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
            </svg>
          </li>
          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Confirm your offer information</a></li>
          <li>
            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
            </svg>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <section class="py-4">
    <div class="container px-4 mx-auto">
      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Confirm your offer information</h2>
            <p class="font-semibold text-coolGray-200">Place an order on the order book.</p>
          </div>
        </div>
      </div>
    </div>
  </section <section class="bg-white">
  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
    <div class="pb-6 border-coolGray-100">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-full p-2">
          {% include 'inc_messages.html' %}
          <div class="p-5 mb-10">
            <div class="mx-4 p-4">
              <div class="flex items-center">
                <div class="flex items-center text-teal-600 relative">
                  <div class="rounded-full h-12 w-12 py-3 border-2 border-blue-500">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
                      <g fill="#3b82f6">
                        <polygon points="14.5 23.5 11.5 23.5 11.5 4.321 6.766 8.108 4.892 5.766 11.474 0.5 14.5 0.5 14.5 23.5" fill="#3b82f6"></polygon>
                      </g>
                    </svg>
                  </div>
                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
                </div>
                <div class="flex-auto border-t-2 border-blue-500"></div>
                <div class="flex items-center text-teal-600 relative">
                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
                      <g fill="#3b82f6">
                        <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path>
                      </g>
                    </svg>
                  </div>
                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
                </div>
                <div class="flex-auto border-t-2 border-blue-500"></div>
                <div class="flex items-center text-gray-500 relative">
                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
                      <g fill="#3b82f6">
                        <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#3b82f6"></polygon>
                      </g>
                    </svg>
                  </div>
                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
                </div>
              </div>
            </div>
          </div>
          <form method="post">
            <div class="py-6 border-b border-coolGray-100">
              <div class="w-full md:w-10/12">
                <div class="flex flex-wrap -m-3">
                  <div class="w-full md:w-1/3 p-3">
                    <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
                  </div>
                  <div class="w-full md:flex-1 p-3">
                    <div class="relative">
                      <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                      </svg>
                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                            <line data-cap="butt" x1="7.6" y1="10.5" x2="16.4" y2="5.5" stroke="#3b82f6"></line>
                            <line data-cap="butt" x1="7.6" y1="13.5" x2="16.4" y2="18.5" stroke="#3b82f6"></line>
                            <circle cx="5" cy="12" r="3"></circle>
                            <circle cx="19" cy="4" r="3"></circle>
                            <circle cx="19" cy="20" r="3"></circle>
                          </g>
                        </svg>
                      </div>
                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_to" disabled>
                        <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
                          {% for a in addrs_to %}
                          <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}" class="">{{ a[0] }} {{ a[1] }}</option>
                          {% endfor %}
                        </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-6 border-b border-coolGray-100">
              <div class="w-full md:w-10/12">
                <div class="flex flex-wrap -m-3">
                  <div class="w-full md:w-1/3 p-3">
                    <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
                  </div>
                  <div class="w-full md:flex-1 p-3">
                    <div class="relative">
                      <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                      </svg>
                      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                          <title>contacts 2</title>
                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                            <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
                            <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
                            <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
                            <line x1="23" y1="5" x2="23" y2="9" stroke="#3b82f6"></line>
                          </g>
                        </svg>
                      </div>
                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_from" disabled>
                        {% for a in addrs %}
                        <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
                        {% endfor %}
                        <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-6 border-b border-coolGray-100">
              <div class="w-full md:w-10/12">
                <div class="flex flex-wrap -m-3">
                  <div class="w-full md:w-1/3 p-3">
                    <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
                  </div>
                  <div class="w-full md:flex-1 p-3">
                    <div class="flex flex-wrap -m-3">
                      <div class="w-full md:w-1/2 p-3">
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
                            <option value="-1"></option>
                            {% for c in coins_from %}
                            <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
                            {% endfor %}
                          </select>
                        </div>
                      </div>
                      <div class="w-full md:w-1/2 p-3">
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> </div>
                      </div>
                      {% if data.swap_style == 'xmr' %}
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> </div>
                      </div>
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate From</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_from" value="{{ data.from_fee_override }}" readonly> </div><span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.from_fee_src }}</span> </div>
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_from_extra_" disabled>
                            <option value="0">None</option>
                            <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
                            <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
                            <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
                          </select>
                        </div> <span class="text-sm mt-2 block"><b>Lock Tx Spend Fee:</b> {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span></div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-6 border-b border-coolGray-100">
              <div class="w-full md:w-10/12">
                <div class="flex flex-wrap -m-3">
                  <div class="w-full md:w-1/3 p-3">
                    <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
                  </div>
                  <div class="w-full md:flex-1 p-3">
                    <div class="flex flex-wrap -m-3">
                      <div class="w-full md:w-1/2 p-3">
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
                            <option value="-1"></option>
                            {% for c in coins %}
                            <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
                            {% endfor %}
                          </select>
                        </div>
                      </div>
                      <div class="w-full md:w-1/2 p-3">
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> </div>
                      </div>
                      {% if data.swap_style == 'xmr' %}
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_to_conf }}" readonly> </div>
                      </div>
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate To</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_to" value="{{ data.to_fee_override }}" readonly> </div> <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.to_fee_src }}</span> </div>
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p>
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra_" disabled>
                            <option value="0">None</option>
                            <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
                            <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
                            <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
                          </select>
                        </div>
                      </div>
                      {% endif %}
                      {% if data.swap_style == 'xmr' and coin_to != '6' %}
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> </div>
                      </div>
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p>
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra" disabled>
                            <option value="0">None</option>
                            <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
                            <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
                            <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
                          </select>
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-6 border-b border-coolGray-100">
              <div class="w-full md:w-10/12">
                <div class="flex flex-wrap -m-3">
                  <div class="w-full md:w-1/3 p-3">
                    <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
                  </div>
                  <div class="w-full md:flex-1 p-3">
                    <div class="flex flex-wrap -m-3">
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect>
                                <polyline points="3,23 3,19 15,19 15,23 "></polyline>
                                <line x1="4" y1="15" x2="1" y2="15" stroke="#3b82f6"></line>
                                <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#3b82f6"></line>
                                <line x1="1" y1="23" x2="17" y2="23"></line>
                                <line x1="17" y1="9" x2="23" y2="15"></line>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> </div>
                      </div>
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g fill="#3b82f6">
                                <path d="M9,9h5L7,0,0,9H5V23a1,1,0,0,0,1,1H8a1,1,0,0,0,1-1Z" fill="#3b82f6"></path>
                                <path d="M14,17a3,3,0,1,1,3-3A3,3,0,0,1,14,17Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,14,13Z" data-color="color-2"></path>
                                <path d="M21,24a3,3,0,1,1,3-3A3,3,0,0,1,21,24Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z" data-color="color-2"></path>
                                <path d="M13,23a1,1,0,0,1-.707-1.707l9-9a1,1,0,0,1,1.414,1.414l-9,9A1,1,0,0,1,13,23Z" data-color="color-2"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-6 border-b border-coolGray-100">
              <div class="w-full md:w-10/12">
                <div class="flex flex-wrap -m-3">
                  <div class="w-full md:w-1/3 p-3">
                    <p class="text-sm text-coolGray-800 font-semibold">Time</p>
                  </div>
                  <div class="w-full md:flex-1 p-3">
                    <div class="flex flex-wrap -m-3">
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}" readonly> </div>
                      </div>
                      {% if data.debug_ui == true %}
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}" readonly> </div>
                          {% if data.swap_style != 'xmr' %}
                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
                      {% endif %}
                    </div>
                    {% else %}
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p>
                        <div class="relative">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <path d="M15.6,13.873a2.273,2.273,0,0,1-.825,1.833,4.1,4.1,0,0,1-2.31.829v1.47h-.982V16.563a7.95,7.95,0,0,1-3.07-.617V14.053a8.328,8.328,0,0,0,1.5.545,8.019,8.019,0,0,0,1.568.28V12.654L11,12.468a5.357,5.357,0,0,1-2.012-1.216A2.332,2.332,0,0,1,8.4,9.627a2.123,2.123,0,0,1,.814-1.71,4.143,4.143,0,0,1,2.27-.812v-1.1h.982V7.074a8.126,8.126,0,0,1,2.97.66l-.674,1.678a7.768,7.768,0,0,0-2.3-.559v2.116a11.073,11.073,0,0,1,1.991.932,2.733,2.733,0,0,1,.867.868A2.146,2.146,0,0,1,15.6,13.873ZM10.558,9.627a.678.678,0,0,0,.219.52,2.569,2.569,0,0,0,.707.42V8.881Q10.559,9.017,10.558,9.627Zm2.884,4.354a.646.646,0,0,0-.244-.509,3.173,3.173,0,0,0-.732-.431v1.786Q13.441,14.662,13.442,13.981Z" stroke="none" fill="#3b82f6"></path>
                                <polyline points="5.346 7.929 6.932 2.237 1.135 2.966"></polyline>
                                <path data-cap="butt" d="M11.789,23A11,11,0,0,1,6.932,2.237"></path>
                                <polyline points="18.654 16.071 17.068 21.763 22.865 21.034"></polyline>
                                <path data-cap="butt" d="M12.211,1a11,11,0,0,1,4.857,20.763"></path>
                              </g>
                            </svg>
                          </div>
                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}" readonly> </div>
                          {% if data.swap_style != 'xmr' %}
                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
                      {% endif %}
                    </div>
                  {% endif %}
                </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-6 border-b border-coolGray-100">
              <div class="w-full md:w-10/12">
                <div class="flex flex-wrap -m-3">
                  <div class="w-full md:w-1/3 p-3">
                    <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p>
                  </div>
                  <div class="w-full md:flex-1 p-3">
                    <div class="flex flex-wrap -m-3">
                      <div class="w-full md:w-1/2 p-3">
                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p>
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="5" stroke="#3b82f6" data-cap="butt"></circle>
                                <polygon points="5 6 2 4 5 2 5 6" fill="#3b82f6" stroke="none"></polygon>
                                <polygon points="19 18 22 20 19 22 19 18" fill="#3b82f6" stroke="none"></polygon>
                                <polygon points="5 6 2 4 5 2 5 6"></polygon>
                                <line x1="5" y1="4" x2="9" y2="4"></line>
                                <polygon points="19 18 22 20 19 22 19 18"></polygon>
                                <line x1="19" y1="20" x2="15" y2="20"></line>
                              </g>
                            </svg>
                          </div>
                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="automation_strat_id" disabled>
                            <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option>
                            {% for a in automation_strategies %}
                            <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option>
                          {% endfor %}
                        </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="py-6 border-coolGray-100">
              <div class="w-full md:w-10/12">
                <div class="flex flex-wrap -m-3">
                  <div class="w-full md:w-1/3 p-3">
                    <p class="text-sm text-coolGray-800 font-semibold">Options</p>
                  </div>
                  <div class="w-full md:flex-1 p-3">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
                      <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
                      <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
              <div class="w-full md:w-0/12">
                <div class="flex flex-wrap justify-end -m-1.5">
                  <div class="w-full md:w-auto p-1.5">
                    <button name="step2" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
                      <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round"><circle cx="12" cy="12" r="11"></circle><polyline points="13 16 9 12 13 8" stroke="#556987"></polyline></g></svg>
                      </svg> <span>Back</span> </button>
                  </div>
                  <div class="w-full md:w-auto p-1.5">
                    <button name="submit_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
                      <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                        <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
                          <circle cx="12" cy="12" r="11"></circle>
                          <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
                        </g>
                      </svg> <span>Confirm Offer</span></button>
                  </div>
                </div>
              </div>
            </div>
            <input type="hidden" name="formid" value="{{ form_id }}">
            <input type="hidden" name="addr_to" value="{{ data.addr_to }}">
            <input type="hidden" name="addr_from" value="{{ data.addr_from }}">
            <input type="hidden" name="coin_from" value="{{ data.coin_from }}">
            <input type="hidden" name="fee_from_extra" value="{{ data.fee_from_extra }}">
            <input type="hidden" name="coin_to" value="{{ data.coin_to }}">
            <input type="hidden" name="fee_to_extra" value="{{ data.fee_to_extra }}">
            {% if data.automation_strat_id != -1 %}
            <input type="hidden" name="automation_strat_id" value="{{ data.automation_strat_id }}">
            {% endif %}
            {% if data.amt_var==true %}
            <input type="hidden" name="amt_var" value="av">
            {% endif %}
            {% if data.rate_var==true %}
            <input type="hidden" name="rate_var" value="rv">
          {% endif %}
        </form>
          <script src="static/js/new_offer.js"></script>
        </div>
      </div>
    </div>
  </div>
</div>
{% include 'footer.html' %}
</body>
</html>