basicswap_miserver/basicswap/templates/offer.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="#">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="{{ offer_id }}">OFFER ID: {{ offer_id }}</a></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">Offer (normal)</h2>
            <p class="font-semibold text-coolGray-200">Offer ID: {{ offer_id }}</p>
          </div>
          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
            {% if refresh %}
            <a id="refresh" href="/offer/{{ offer_id }}" class="flex flex-wrap justify-center px-5 py-4 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="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                <g fill="#ffffff">
                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
                </g>
              </svg><span>Refresh {{ refresh }} seconds</span></a>
              {% else %}
            <a id="refresh" href="/offer/{{ offer_id }}" class="flex flex-wrap justify-center px-5 py-4 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="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                <g fill="#ffffff">
                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
                </g>
              </svg><span>Refresh</span></a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </section>
  {% include 'inc_messages.html' %}
  {% if sent_bid_id %}
  <section class="py-4">
    <div class="container px-4 mx-auto">
      <div class="p-6 bg-green-100 border border-green-200 rounded-md">
        <div class="flex flex-wrap justify-between items-center -m-2">
          <div class="flex-1 p-2">
            <div class="flex flex-wrap -m-1">
              <div class="w-auto p-1">
                <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path>
                </svg>
              </div>
              <div class="flex-1 p-1">
                <h3 class="font-medium text-sm text-green-900"><a href="/bid/{{ sent_bid_id }}">Sent Bid {{ sent_bid_id }}</a></h3> </div>
            </div>
          </div>
          <div class="w-auto p-2">
            <a href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.94004 8L13.14 3.80667C13.2656 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2656 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4892 2.66394 12.3189 2.73447 12.1934 2.86L8.00004 7.06L3.80671 2.86C3.68117 2.73447 3.51091 2.66394 3.33337 2.66394C3.15584 2.66394 2.98558 2.73447 2.86004 2.86C2.7345 2.98554 2.66398 3.1558 2.66398 3.33333C2.66398 3.51087 2.7345 3.68113 2.86004 3.80667L7.06004 8L2.86004 12.1933C2.79756 12.2553 2.74796 12.329 2.71411 12.4103C2.68027 12.4915 2.66284 12.5787 2.66284 12.6667C2.66284 12.7547 2.68027 12.8418 2.71411 12.9231C2.74796 13.0043 2.79756 13.078 2.86004 13.14C2.92202 13.2025 2.99575 13.2521 3.07699 13.2859C3.15823 13.3198 3.24537 13.3372 3.33337 13.3372C3.42138 13.3372 3.50852 13.3198 3.58976 13.2859C3.671 13.2521 3.74473 13.2025 3.80671 13.14L8.00004 8.94L12.1934 13.14C12.2554 13.2025 12.3291 13.2521 12.4103 13.2859C12.4916 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8419 13.3198 12.9231 13.2859C13.0043 13.2521 13.0781 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.286 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.286 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94004 8Z" fill="#156633"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  {% endif %}
  <section class="bg-white">
    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
      <div class="pb-6 border-coolGray-100">
        <div class="flex flex-wrap items-center justify-between -m-2">
          <div class="w-full pt-2">
            <div class="container px-0 mx-auto mt-5">
              <div class="overflow-x-auto relative border sm:rounded-lg">
                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                    <tr>
                      <th scope="col" class="py-3 px-6">Details</th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Offer State</td>
                    <td>{{ data.state }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Swap Type</td>
                    <td>{{ data.swap_type }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                  <td class="py-4 px-6 bold">{% if data.sent %}You Send{% else %}You Get{% endif %}</td>
                  <td><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
                      <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
                    </span> {{ data.coin_from }} </td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">{% if data.sent %}You Get{% else %}You Send{% endif %}</td>
                  <td><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
                      <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
                    </span> {{ data.coin_to }} </td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Amount Offerer Sends</td>
                    <td class="bold">{{ data.amt_from }} {{ data.tla_from }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Amount Bidder Send</td>
                    <td class="bold">{{ data.amt_to }} {{ data.tla_to }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Minimum Bid Amount</td>
                    <td>{{ data.amt_bid_min }} {{ data.tla_from }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Rate</td>
                    <td>{{ data.rate }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold" title="Total coin-from value of completed bids, that this node is involved in">Amount Swapped</td>
                    <td>{{ data.amt_swapped }} {{ data.tla_from }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Amount Variable</td>
                    <td>{{ data.amount_negotiable }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Rate Variable</td>
                    <td>{{ data.rate_negotiable }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Script Lock Type</td>
                    <td>{{ data.lock_type }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Script Lock Value</td>
                    <td>{{ data.lock_value }} {{ data.lock_value_hr }}</td>
                  </tr> {% if data.addr_to == "Public" %}
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Address To</td>
                    <td>{{ data.addr_to }}</td>
                  </tr> {% else %}
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Address To</td>
                    <td><a class="monospace bold" href="/identity/{{ data.addr_to }}">{{ data.addr_to }}</a> {{ data.addr_to_label }}</td>
                  </tr> {% endif %}
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Address From</td>
                    <td><a class="monospace bold" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
                  </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
                      <svg alt="" class="w-5 h-5 rounded-full ml-5" 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="#6b7280" stroke-linejoin="round">
                          <circle cx="12" cy="12" r="11"></circle>
                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
                        </g>
                      </svg>
                      <div class="py-4 pl-2 bold">
                        <div>Created At</div>
                      </div>
                    </td>
                    <td>{{ data.created_at | formatts }}</td>
                  </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">
                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
                      <svg alt="" class="w-5 h-5 rounded-full  ml-5" 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="#6b7280" stroke-linejoin="round">
                          <circle cx="12" cy="12" r="11"></circle>
                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
                        </g>
                      </svg>
                      <div class="py-4 pl-2 bold">
                        <div>Expired At</div>
                      </div>
                    </td>
                    <td>{{ data.expired_at | formatts }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Sent</td>
                    <td>{{ data.sent }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Revoked</td>
                    <td>{{ data.was_revoked }}</td>
                  </tr>
                  {% if data.sent %}
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Auto Accept Strategy</td>
                    <td>
                      {% if data.automation_strat_id == -1 %} None {% else %}<a class="monospace" href="/automationstrategy/{{ data.automation_strat_id }}">{{ data.automation_strat_label }}</a>{% endif %}
                    </td>
                  </tr>
                  {% endif %}
                  {% if data.xmr_type == true %}
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Chain A offer fee rate</td>
                    <td>{{ data.a_fee_rate }}</td>
                  </tr>
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6 bold">Chain A local fee rate</td>
                    <td>{{ data.a_fee_rate_verify }} (Fee source: {{ data.a_fee_rate_verify_src }}{% if data.a_fee_warn == true %} WARNING{% endif %})</td>
                  </tr> {% endif %} </table>
              </div>
            </div>
            <section class="bg-white p-6">
              <div class="flex flex-wrap items-center">
                <div class="w-full">
                  <h4 class="font-semibold text-black text-2xl">Bids</h4></div>
              </div>
            </section>
            <div class="container px-0 mx-auto">
              <div class="overflow-x-auto relative border sm:rounded-lg">
                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                    <tr>
                      <th scope="col" class="py-3 px-6">Bid ID</th>
                      <th scope="col" class="py-3 px-6">Bid Amount</th>
                      <th scope="col" class="py-3 px-6">Bid Rate</th>
                      <th scope="col" class="py-3 px-6">Bid Status</th>
                      <th scope="col" class="py-3 px-6">Identity From</th>
                    </tr>
                  </thead>
                  {% for b in bids %}
                  <tr class="bg-white border-t hover:bg-gray-50">
                    <td class="py-4 px-6"><a class="monospace" href=/bid/{{ b[0] }}>{{ b[0] }}</a></td>
                    <td class="py-4 px-6">{{ b[1] }}</td>
                    <td class="py-4 px-6">{{ b[3] }}</td>
                    <td class="py-4 px-6">{{ b[2] }}</td>
                    <td class="py-4 px-6"><a class="monospace" href=/identity/{{ b[4] }}>{{ b[4] }}</a></td>
                  </tr>
                {% endfor %}
              </table>
              </div>
            </div>
            <form method="post">
              {% if data.show_bid_form %}
              <section class="bg-white p-6">
                <div class="flex flex-wrap items-center">
                  <div class="w-full">
                    <h4 class="font-semibold text-black text-2xl">New Bid</h4> </div>
                </div>
              </section>
              <div class="container px-0 mx-auto">
                <div class="overflow-x-auto relative border sm:rounded-lg">
                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                      <tr>
                        <th scope="col" class="py-3 px-6 w-1/2">Details</th>
                        <th scope="col" class="w-1/2"></th>
                      </tr>
                    </thead>
                    <tr class="bg-white border-t hover:bg-gray-50">
                      <td class="py-4 px-6 ">Amount you will get <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }} {% if data.xmr_type == true %} (excluding {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees). {% else %} (excluding a tx fee). {% endif %}</td>
                      <td class="">Amount you will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}</td>
                    </tr>
                    <tr class="bg-white border-t hover:bg-gray-50">
                      <td class="py-4 px-6 bold bold">Send From Address</td>
                      <td class="py-4 pr-5">
                            <div class="w-full md:flex-1">
                        <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 class="appearance-none 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" name="addr_from"> {% for a in addrs %}
                          <option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option> {% endfor %}
                          <option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option>
                        </select>
                      </div>
                      </div>
                      </td>
                    </tr>
                    {% if data.amount_negotiable == true %}
                    <tr class="bg-white border-t hover:bg-gray-50">
                      <td class="py-4 px-6 bold">Amount</td>
                      <td class="py-4 px-6">
                        <input type="text" class="appearance-none 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 p-2.5" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');">
                      </td>
                    </tr>
                    {% endif %}
                    {% if data.rate_negotiable == true %}
                    <tr class="bg-white border-t hover:bg-gray-50">
                      <td class="py-4 px-6 bold">Rate</td>
                      <td class="py-4">
                        <input type="text" class="appearance-none 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 p-2.5" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');">
                      </td>
                    </tr>
                    {% endif %}
                    <tr class="bg-white border-t hover:bg-gray-50">
                      <td class="py-4 px-6 bold">Minutes valid</td>
                      <td class="py-4">
                        <input type="number" class="appearance-none 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 p-2.5" name="validmins" min="10" max="1440" value="{{ data.nb_validmins }}"> </td>
                    </tr>
                    {% if data.debug_ui == true %}
                    <tr class="bg-white border-t hover:bg-gray-50">
                      <td class="py-4 px-6 bold">Debug Option:</td>
                      <td class="py-4 pr-5">
                            <div class="w-full md:flex-1">
                        <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 class="appearance-none 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" name="debugind">
                          <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
                            {% for a in data.debug_options %}
                            <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
                            {% endfor %}
                          </select>
                      </div>
                      </div>
                      </td>
                    </tr>
                    {% endif %}
                  </table>
                </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 ml-2">
                          <button name="sendbid" value="Send Bid" 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="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
                  <circle cx="5" cy="5" r="4"></circle>
                  <circle cx="19" cy="19" r="4"></circle>
                  <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline>
                  <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline>
                  <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline>
                  <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline>
                </g>
              </svg>Send Bid</button>
                        </div>
                     <div class="w-full md:w-auto p-1.5">
                          <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button>
                    </div>
                    <!-- TODO:
       <div class="w-full md:w-auto p-1.5 ml-2">
        <button name="check_rates" value="Lookup Rates"  type="button" onclick='lookup_rates();' 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 fill="#556987">
              <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
              <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
            </g>
          </svg> <span>Lookup Rates</span> </button>
      </div>
      --></div>
                </div>
              </div>
              {% else %}
              <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 ml-2">
                          <button name="newbid" value="New Bid" 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="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
                  <circle cx="5" cy="5" r="4"></circle>
                  <circle cx="19" cy="19" r="4"></circle>
                  <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline>
                  <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline>
                  <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline>
                  <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline>
                </g>
              </svg>New Bid</button>
                        </div>
                    {% if data.sent %}
                    <div class="w-full md:w-auto p-1.5">
                      <button name="repeat_offer" value="Repeat Offer" type="submit" 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 fill="#556987">
                            <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
                            <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
                          </g>
                        </svg> <span>Repeat Offer</span></button>
                    </div>
                    {% if data.was_revoked != true %}
                       <div class="w-full md:w-auto p-1.5">
                          <button name="revoke_offer" value="Revoke Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Revoke Offer </button>
                        </div>
                    {% endif %}
                    <!-- todo
                    {% if data.active_ind == 1 %}
                       <div class="w-full md:w-auto p-1.5">
                          <button name="archive_offer" value="Archive Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round"><polyline data-cap="butt" points="23 15 16 15 16 18 8 18 8 15 1 15"></polyline><line data-cap="butt" x1="12" y1="1" x2="12" y2="11" stroke="#ef5844"></line><path d="M18.558,6a2,2,0,0,1,1.9,1.368L23,15v6a2,2,0,0,1-2,2H3a2,2,0,0,1-2-2V15L3.544,7.368A2,2,0,0,1,5.442,6"></path><polyline points="15 8 12 11 9 8" stroke="#ef5844"></polyline></g></svg>Archive Offer</button>
                        </div>
                    {% endif %}
                    -->
                    {% endif %}
                    <!-- todo
<div class="w-full md:w-auto p-1.5 ml-2">
  <button name="check_rates" type="button"  value="Lookup Rates" onclick='lookup_rates();' 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 fill="#556987">
        <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
        <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
      </g>
    </svg> <span>Lookup Rates</span> </button>
</div>
--></div>
                </div>
              </div>
              {% endif %}
              <input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}">
              <input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}">
              <input type="hidden" id="amt_var" value="{{ data.amount_negotiable }}">
              <input type="hidden" id="rate_var" value="{{ data.rate_negotiable }}">
              <input type="hidden" id="amount_from" value="{{ data.amt_from }}">
              <input type="hidden" id="offer_rate" value="{{ data.rate }}">
              <input type="hidden" name="formid" value="{{ form_id }}"> </form>
            <p id="rates_display"></p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script>
    const xhr_rates = new XMLHttpRequest();
    xhr_rates.onload = () => {
      if (xhr_rates.status == 200) {
        const obj = JSON.parse(xhr_rates.response);
        inner_html = '<h4 class="bold>Rates</h4><pre><code>' + JSON.stringify(obj, null, '  ') + '</code></pre>';
        document.getElementById('rates_display').innerHTML = inner_html;
      }
    }

    function lookup_rates() {
      const coin_from = document.getElementById('coin_from').value;
      const coin_to = document.getElementById('coin_to').value;
      if (coin_from == '-1' || coin_to == '-1') {
        alert('Coins from and to must be set first.');
        return;
      }
      inner_html = '<h4>Rates</h4><p>Updating...</p>';
      document.getElementById('rates_display').innerHTML = inner_html;
      xhr_rates.open('POST', '/json/rates');
      xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr_rates.send('coin_from=' + coin_from + '&coin_to=' + coin_to);
    }
    const xhr_bid_params = new XMLHttpRequest();
    xhr_bid_params.onload = () => {
      if (xhr_bid_params.status == 200) {
        const obj = JSON.parse(xhr_bid_params.response);
        document.getElementById('bid_amt_to').innerHTML = obj['amount_to'];
      }
    }

    function updateBidParams(value_changed) {
      const coin_from = document.getElementById('coin_from').value;
      const coin_to = document.getElementById('coin_to').value;
      const amt_var = document.getElementById('amt_var').value;
      const rate_var = document.getElementById('rate_var').value;
      let amt_from = '';
      let rate = '';
      if (amt_var == 'True') {
        amt_from = document.getElementById('bid_amount').value;
      }
      else {
        amt_from = document.getElementById('amount_from').value;
      }
      if (rate_var == 'True') {
        rate = document.getElementById('bid_rate').value;
      }
      else {
        rate = document.getElementById('offer_rate').value;
      }
      if (value_changed == 'amount') {
        document.getElementById('bid_amt_from').innerHTML = amt_from;
      }
      xhr_bid_params.open('POST', '/json/rate');
      xhr_bid_params.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr_bid_params.send('coin_from=' + coin_from + '&coin_to=' + coin_to + '&rate=' + rate + '&amt_from=' + amt_from);
    }

    function confirmPopup() {
      return confirm("Are you sure?");
    }
  </script>
</div>
{% include 'footer.html' %}
</body>
</html>