{% include 'header.html' %} {% from 'style.html' import breadcrumb_line_svg, input_down_arrow_offer_svg, select_network_svg, select_address_svg, select_swap_type_svg, select_bid_amount_svg, select_rate_svg, step_one_svg, step_two_svg, step_three_svg %}
<script src="static/js/coin_icons.js"></script>
<div class="container mx-auto">
  <section class="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 dark:text-gray-300 hover:text-coolGray-700" href="/">
              <p>Home</p>
            </a>
          </li>
          <li>{{ breadcrumb_line_svg | safe }}</li>
          <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/newoffer">Place</a></li>
          <li>{{ breadcrumb_line_svg | safe }}</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 dark:bg-blue-500 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">Place an New Offer</h2>
            <p class="font-normal text-coolGray-200 dark:text-white">Place an order on the network order book.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  {% include 'inc_messages.html' %}
  <section>
    <div class="p-5 mb-5">
      <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">
            {{ step_one_svg | safe }}
          </div>
            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-700">Step 1 - Place</div>
          </div>

          <div class="flex-auto border-t-2 border-gray-300 dark:border-gray-400"></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-gray-300 dark:border-gray-400">
            {{ step_two_svg | safe }}
          </div>
            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-700">Step 2 - Setup</div>
          </div>

          <div class="flex-auto border-t-2 border-gray-300 dark:border-gray-400"></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-gray-300 dark:border-gray-400">
            {{ step_three_svg | safe }}
          </div>
            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-700">Confirm</div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <section class="py-3">
    <div class="container px-4 mx-auto">
      <div class="p-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
        <div class="flex flex-wrap items-center justify-between -mx-4 pb-6 border-gray-400 border-opacity-20"> </div>
        <form method="post" autocomplete="off" id='form'>
          <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
            <div class="w-full md:w-10/12">
              <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
                <div class="w-full md:w-1/3 p-6">
                  <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Network</p>
                </div>
                <div class="w-full md:flex-1 p-3">
                  <div class="relative">
                    {{ input_down_arrow_offer_svg | safe }}
                    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                    {{ select_network_svg | safe }}
                  </div>
                    <select class="pl-10 hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_to">
                      <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] }}">{{ a[0] }} ({{ a[1] }})</option>
                        {% endfor %}
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
  <div class="w-full md:w-10/12">
    <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
      <div class="w-full md:w-1/3 p-6">
        <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Address</p>
      </div>
      <div class="w-full md:flex-1 p-3">
        <div class="relative">
          {{ input_down_arrow_offer_svg | safe }}
          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
          {{ select_address_svg | safe }}
          </div>
          <select class="hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_from">
            <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
            {% for a in addrs %}
            <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
function handleNewOfferAddress() {
    const selectElement = document.querySelector('select[name="addr_from"]');
    const STORAGE_KEY = 'lastUsedAddressNewOffer';
    const form = selectElement?.closest('form');
    
    if (!selectElement || !form) return;

    function loadInitialAddress() {
        const savedAddressJSON = localStorage.getItem(STORAGE_KEY);
        if (savedAddressJSON) {
            try {
                const savedAddress = JSON.parse(savedAddressJSON);
                selectElement.value = savedAddress.value;
            } catch (e) {
                selectFirstAddress();
            }
        } else {
            selectFirstAddress();
        }
    }

    function selectFirstAddress() {
        if (selectElement.options.length > 1) {
            const firstOption = selectElement.options[1];
            if (firstOption) {
                selectElement.value = firstOption.value;
                saveAddress(firstOption.value, firstOption.text);
            }
        }
    }

    function saveAddress(value, text) {
        const addressData = {
            value: value,
            text: text
        };
        localStorage.setItem(STORAGE_KEY, JSON.stringify(addressData));
    }

    form.addEventListener('submit', async (e) => {
        saveAddress(selectElement.value, selectElement.selectedOptions[0].text);
    });

    selectElement.addEventListener('change', (event) => {
        saveAddress(event.target.value, event.target.selectedOptions[0].text);
    });

    loadInitialAddress();
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', handleNewOfferAddress);
} else {
    handleNewOfferAddress();
}
</script>

          <div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
            <div class="w-full md:w-10/12">
              <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
                <div class="w-full md:w-1/3 p-6">
                  <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Swap Type</p>
                </div>
                <div class="w-full md:flex-1 p-3">
                  <div class="relative">
                    {{ input_down_arrow_offer_svg | safe }}
                    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                    {{ select_swap_type_svg | safe }}
                  </div>
                  <select class="hover:border-blue-500 bg-gray-50 pl-10 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="swap_type" id="swap_type">
                    {% for a in swap_types %}
                    <option{% if data.swap_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
                    {% endfor %}
                  </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
            <div class="w-full md:w-10/12">
              <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
                <div class="w-full md:w-1/3 p-6">
                  <p class="text-sm text-coolGray-800 dark:text-white 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">
                       <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Select Coin You Send</p>
                      <div class="custom-select">
                        <div class="relative">
                          {{ input_down_arrow_offer_svg | safe }}
                          <select class="select hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 bold focus:ring-0" id="coin_from" name="coin_from" onchange="set_rate('coin_from');">
                            <option value="-1">Select coin you send</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 class="select-dropdown"> <img class="select-icon" src="" alt=""> <img class="select-image" src="" alt=""> </div>
                        </div>
                      </div>
                    </div>
                    <div class="w-full md:w-1/2 p-3">
                      <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Amount You Send</p>
                      <div class="relative">
                        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> </div> <input class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 focus:ring-0 bold" placeholder="0" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
            <div class="w-full md:w-10/12">
              <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
                <div class="w-full md:w-1/3 p-6">
                  <p class="text-sm text-coolGray-800 dark:text-white 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">
                      <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Select Coin You Get</p>
                      <div class="custom-select">
                        <div class="relative">
                          {{ input_down_arrow_offer_svg | safe }}
                          <select class="select hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 bold focus:ring-0" id="coin_to" name="coin_to" onchange="set_rate('coin_to');">
                            <option value="-1">Select coin you get</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 class="select-dropdown"> <img class="select-icon" src="" alt=""> <img class="select-image" src="" alt=""> </div>
                        </div>
                      </div>
                    </div>
                    <div class="w-full md:w-1/2 p-3">
                      <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Amount You Get</p>
                      <div class="relative">
                        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"> </div> <input class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 focus:ring-0 bold" placeholder="0" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
            <div class="w-full md:w-10/12">
              <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
                <div class="w-full md:w-1/3 p-6">
                  <p class="text-sm text-coolGray-800 dark:text-white 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 dark:text-white 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">
                        {{ select_bid_amount_svg | safe }}
                      </div>
                      <input class="pl-10 hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" 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">
                      </div>
                    </div>
                    <div class="w-full md:w-1/2 p-3">
                      <p class="mb-1.5 font-medium text-base dark:text-white text-coolGray-800">Rate</p>             
                      <div class="flex items-center gap-2">
                        <div class="relative flex-1">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            {{ select_rate_svg | safe }}
                          </div>
                          <input class="pl-10 hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');">
                        </div>
                        <button type="button" id="get_rate_inferred_button" class="px-4 py-2.5 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-md shadow-sm focus:outline-none">Get Rate Inferred</button>
                      </div>
                      <div class="flex form-check form-check-inline mt-5">
                        <div class="flex items-center h-5"> <input class="form-check-input hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked> </div>
                        <div class="ml-2 text-sm">
                          <label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox1">Lock Rate</label>
                          <p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Automatically adjusts the <b>You Get</b> value based on the rate you’ve entered. Without it, the rate value is automatically adjusted based on the number of coins you put in <b>You Get.</b></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
{% if debug_mode == true %}
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
  <div class="w-full md:w-10/12">
    <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
      <div class="w-full md:w-1/3 p-6">
        <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Options</p>
      </div>
      <div class="w-full md:flex-1 p-3">
        <div class="flex form-check form-check-inline">
          <div class="flex items-center h-5"> 
            <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="amt_var" name="amt_var" value="av">
          </div>
          <div class="ml-2 text-sm">
            <label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label>
            <p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Allow bids with a different amount to the offer.</p>
          </div>
        </div>
        <div class="flex mt-2 form-check form-check-inline">
          <div class="flex items-center h-5"> 
            <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_var" name="rate_var" value="rv"> 
          </div>
          <div class="ml-2 text-sm">
            <label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label>
            <p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Allow bids with a different rate to the offer.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% else %}
<div class="py-0 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
  <div class="w-full md:w-10/12">
    <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
      <div class="w-full md:w-1/3 p-6">
        <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Options</p>
      </div>
      <div class="w-full md:flex-1 p-3">
        <div class="flex form-check form-check-inline">
          <div class="flex items-center h-5"> 
            <input class="cursor-not-allowed hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="amt_var" name="amt_var" value="av" checked disabled>
          </div>
          <div class="ml-2 text-sm">
            <label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2" style="opacity: 0.40;">Amount Variable</label>
            <p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300" style="opacity: 0.40;">Allow bids with a different amount to the offer.</p>
          </div>
        </div>
        <div class="flex mt-2 form-check form-check-inline">
          <div class="flex items-center h-5"> 
            <input class="cursor-not-allowed hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_var" name="rate_var" value="rv" disabled> 
          </div>
          <div class="ml-2 text-sm">
            <label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3" style="opacity: 0.40;">Rate Variable</label>
            <p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300" style="opacity: 0.40;">Allow bids with a different rate to the offer.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}
          <div class="pricejsonhidden hidden py-3 border-b items-center justify-between -mx-4 mb-6 pb-3 border-gray-400 border-opacity-20">
            <div class="w-full md:w-10/12">
              <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
                <div class="w-full md:w-1/3 p-6">
                  <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Coin Prices/Rates (JSON)</p>
                </div>
                <div class="w-full md:flex-1 p-3 dark:text-white text-sm monospace">
                  <p id="rates_display"></p>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </section>
  <section>
    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
      <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 mt-5 mx-auto">
              <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
                <div class="px-6">
                  <div class="flex flex-wrap justify-end">
                    <div class="w-full md:w-auto p-1.5">
                      <button name="check_rates" type="button" value="Check Current Prices/Rates (JSON)" 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 focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">
                        <span>Check Current Prices/Rates (JSON)</span>
                    </button>
                  </div>
                    <div class="w-full md:w-auto p-1.5">
                      <button name="continue" 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">
                        <span>Continue</span>
                      </button>
                    </div>
                    <input type="hidden" name="formid" value="{{ form_id }}">
                    <input type="hidden" name="step1" value="a">
                  </form>
                  </div>
                </div>
              </div>
            </div>
          </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 = '<pre><code>' + JSON.stringify(obj, null, '  ') + '</code></pre>';
        document.getElementById('rates_display').innerHTML = inner_html;
    }
};

const xhr_rate = new XMLHttpRequest();
xhr_rate.onload = () => {
    if (xhr_rate.status == 200) {
        const obj = JSON.parse(xhr_rate.response);
        if (obj.hasOwnProperty('rate')) {
            document.getElementById('rate').value = obj['rate'];
        } else if (obj.hasOwnProperty('amount_to')) {
            document.getElementById('amt_to').value = obj['amount_to'];
        } else if (obj.hasOwnProperty('amount_from')) {
            document.getElementById('amt_from').value = obj['amount_from'];
        }
    }
};

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;
    }

    const selectedCoin = (coin_from === '15') ? '3' : coin_from;

    inner_html = '<p>Updating...</p>';
    document.getElementById('rates_display').innerHTML = inner_html;
    document.querySelector(".pricejsonhidden").classList.remove("hidden");

    const xhr_rates = new XMLHttpRequest();
    xhr_rates.onreadystatechange = function() {
        if (xhr_rates.readyState === XMLHttpRequest.DONE) {
            if (xhr_rates.status === 200) {
                document.getElementById('rates_display').innerHTML = xhr_rates.responseText;
            } else {
                console.error('Error fetching data:', xhr_rates.statusText);
            }
        }
    };

    xhr_rates.open('POST', '/json/rates');
    xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr_rates.send('coin_from=' + selectedCoin + '&coin_to=' + coin_to);
}

function getRateInferred(event) {
    event.preventDefault();

    const coin_from = document.getElementById('coin_from').value;
    const coin_to = document.getElementById('coin_to').value;
    const params = 'coin_from=' + encodeURIComponent(coin_from) + '&coin_to=' + encodeURIComponent(coin_to);

    const xhr_rates = new XMLHttpRequest();
    xhr_rates.onreadystatechange = function() {
        if (xhr_rates.readyState === XMLHttpRequest.DONE) {
            if (xhr_rates.status === 200) {
                try {
                    const responseData = JSON.parse(xhr_rates.responseText);
                    if (responseData.coingecko && responseData.coingecko.rate_inferred) {
                        const rateInferred = responseData.coingecko.rate_inferred;
                        document.getElementById('rate').value = rateInferred;
                        set_rate('rate');
                    } else {
                        document.getElementById('rate').value = 'Error: Rate limit';
                        console.error('Rate limit reached or invalid response format');
                    }
                } catch (error) {
                    document.getElementById('rate').value = 'Error: Rate limit';
                    console.error('Error parsing response:', error);
                }
            } else {
                document.getElementById('rate').value = 'Error: Rate limit';
                console.error('Error fetching data:', xhr_rates.statusText);
            }
        }
    };

    xhr_rates.open('POST', '/json/rates');
    xhr_rates.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr_rates.send(params);
}

document.getElementById('get_rate_inferred_button').addEventListener('click', getRateInferred);

function set_swap_type_enabled(coin_from, coin_to, swap_type) {
    const adaptor_sig_only_coins = [
        '6',  /* XMR */
        '9',  /* WOW */
        '8',  /* PART_ANON */
        '7',  /* PART_BLIND */
        '13', /* FIRO */
        '18', /* DOGE */
        '17'  /* BCH */
    ];
    const secret_hash_only_coins = [
        '11', /* PIVX */
        '12'  /* DASH */
    ];
    
    let make_hidden = false;

    coin_from = String(coin_from);
    coin_to = String(coin_to);

    if (adaptor_sig_only_coins.indexOf(coin_from) !== -1 || adaptor_sig_only_coins.indexOf(coin_to) !== -1) {
        swap_type.disabled = true;
        swap_type.value = 'xmr_swap';
        make_hidden = true;
        swap_type.classList.add('select-disabled');
    } else if (secret_hash_only_coins.indexOf(coin_from) !== -1 || secret_hash_only_coins.indexOf(coin_to) !== -1) {
        swap_type.disabled = true;
        swap_type.value = 'seller_first';
        make_hidden = true;
        swap_type.classList.add('select-disabled');
    } else {
        swap_type.disabled = false;
        swap_type.classList.remove('select-disabled');
        swap_type.value = 'xmr_swap';
    }

    let swap_type_hidden = document.getElementById('swap_type_hidden');
    if (make_hidden) {
        if (!swap_type_hidden) {
            swap_type_hidden = document.createElement('input');
            swap_type_hidden.setAttribute('id', 'swap_type_hidden');
            swap_type_hidden.setAttribute('type', 'hidden');
            swap_type_hidden.setAttribute('name', 'swap_type');
            document.getElementById('form').appendChild(swap_type_hidden);
        }
        swap_type_hidden.setAttribute('value', swap_type.value);
    } else if (swap_type_hidden) {
        swap_type_hidden.parentNode.removeChild(swap_type_hidden);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const coin_from = document.getElementById('coin_from');
    const coin_to = document.getElementById('coin_to');
    
    if (coin_from && coin_to) {
        coin_from.addEventListener('change', function() {
            const swap_type = document.getElementById('swap_type');
            set_swap_type_enabled(this.value, coin_to.value, swap_type);
        });
        
        coin_to.addEventListener('change', function() {
            const swap_type = document.getElementById('swap_type');
            set_swap_type_enabled(coin_from.value, this.value, swap_type);
        });
    }
});

function set_rate(value_changed) {
    const coin_from = document.getElementById('coin_from').value;
    const coin_to = document.getElementById('coin_to').value;
    const amt_from = document.getElementById('amt_from').value;
    const amt_to = document.getElementById('amt_to').value;
    const rate = document.getElementById('rate').value;
    const lock_rate = rate == '' ? false : document.getElementById('rate_lock').checked;

    if (value_changed === 'coin_from' || value_changed === 'coin_to') {
        document.getElementById('rate').value = '';
        return;
    }

    const swap_type = document.getElementById('swap_type');
    set_swap_type_enabled(coin_from, coin_to, swap_type);

    if (coin_from == '-1' || coin_to == '-1') {
        return;
    }

    let params = 'coin_from=' + coin_from + '&coin_to=' + coin_to;

    if (value_changed == 'rate' || (lock_rate && value_changed == 'amt_from') || (amt_to == '' && value_changed == 'amt_from')) {
        if (rate == '' || (amt_from == '' && amt_to == '')) {
            return;
        } else if (amt_from == '' && amt_to != '') {
            if (value_changed == 'amt_from') {
                return;
            }
            params += '&rate=' + rate + '&amt_to=' + amt_to;
        } else {
            params += '&rate=' + rate + '&amt_from=' + amt_from;
        }
    } else if (lock_rate && value_changed == 'amt_to') {
        if (amt_to == '' || rate == '') {
            return;
        }
        params += '&amt_to=' + amt_to + '&rate=' + rate;
    } else {
        if (amt_from == '' || amt_to == '') {
            return;
        }
        params += '&amt_from=' + amt_from + '&amt_to=' + amt_to;
    }

    xhr_rate.open('POST', '/json/rate');
    xhr_rate.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr_rate.send(params);
}

document.addEventListener("DOMContentLoaded", function() {
    const coin_from = document.getElementById('coin_from').value;
    const coin_to = document.getElementById('coin_to').value;
    const swap_type = document.getElementById('swap_type');
    set_swap_type_enabled(coin_from, coin_to, swap_type);
});
</script>
</div>
<script src="static/js/new_offer.js"></script>
{% include 'footer.html' %}
</div>
</body>
</html>
