basicswap_miserver/basicswap/templates/wallet.html

{% include 'header.html' %}
{% from 'style.html' import select_box_arrow_svg, select_box_class, circular_arrows_svg, circular_error_svg, circular_info_svg, cross_close_svg, breadcrumb_line_svg, withdraw_svg, utxo_groups_svg, create_utxo_svg, red_cross_close_svg, blue_cross_close_svg, circular_update_messages_svg, circular_error_messages_svg %}
<script src="/static/js/libs//qrcode.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="/">Home</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="/wallets">Wallets</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="/wallet/{{ w.ticker }}">{{ w.ticker }}</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 dark:bg-blue-500 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="dots-red"> <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="wave">
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2">
            <h2 class="text-3xl font-bold text-white"> <span class="inline-block align-middle"><img class="mr-2 h-16" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}"></span>({{ w.ticker }}) {{ w.name }} Wallet </h2>
          </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"> <a class="rounded-full mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}"> {{ circular_arrows_svg | safe }}<span>Refresh</span> </a> </div>
        </div>
      </div>
    </div>
  </section>
  {% include 'inc_messages.html' %}
  {% if w.updating %}
<section class="py-4" id="messages_updating" role="alert">
  <div class="container px-4 mx-auto">
    <div class="p-6 text-green-800 rounded-lg bg-blue-50 border border-blue-500 dark:bg-gray-500 dark:text-blue-400 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">
            {{ circular_update_messages_svg | safe }}
            </div>
            <ul class="ml-4 mt-1">
                <li class="font-semibold text-sm text-blue-500 error_msg"><span class="bold">UPDATING:</span></li>
                <li class="font-medium text-sm text-blue-500">Please wait...</li>
            </ul>
           </div>
        </div>
        <div class="w-auto p-2">
          <button type="button" class="ms-auto bg-blue-50 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex items-center justify-center h-8 w-8 focus:outline-none dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700" data-dismiss-target="#messages_updating" aria-label="Close"><span class="sr-only">Close</span>
            {{ blue_cross_close_svg | safe }}
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
  {% endif %}
  {% if w.havedata %}
  {% if w.error %}
<section class="py-4" id="messages_error" role="alert">
  <div class="container px-4 mx-auto">
    <div class="p-6 text-green-800 rounded-lg bg-red-50 border border-red-400 dark:bg-gray-500 dark:text-red-400 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">
              {{ circular_error_messages_svg | safe }}
            </div>
            <ul class="ml-4 mt-1">
                <li class="font-semibold text-sm text-red-500 error_msg"><span class="bold">ERROR:</span></li>
                <li class="font-medium text-sm text-red-500 error_msg">{{ w.error }}</li>
            </ul>
      </div>
        </div>
        <div class="w-auto p-2">
          <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#messages_error" aria-label="Close">
            <span class="sr-only">Close</span>
            {{ red_cross_close_svg | safe }}
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
  {% else %}
  <form method="post" autocomplete="off">
    <section>
      <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
                  <div class="px-6">
                    <div class="w-full mt-6 pb-6 overflow-x-auto">
                      <table class="w-full min-w-max text-sm">
                        <thead class="uppercase">
                          <tr class="text-left">
                            <th class="p-0">
                              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Wallet</span> </div>
                            </th>
                            <th class="p-0">
                              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span> </div>
                            </th>
                          </tr>
                        </thead>
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold"> <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/{{ w.name }}.png" alt="{{ w.name }}"> </span>Balance: </td>
                          <td class="py-3 px-6 bold coinname-value" data-coinname="{{ w.name }}">{{ w.balance }} {{ w.ticker }} (<span class="usd-value"></span>)
                          {% if w.pending %}
                            <span class="inline-block py-1 px-2 rounded-full bg-green-100 text-green-500 dark:bg-gray-500 dark:text-green-500">Pending: +{{ w.pending }} {{ w.ticker }} </span>
                          {% endif %}
                        </td>
                        </tr> {% if w.cid == '1' %} {# PART #}
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold"> <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/{{ w.name }}.png" alt="{{ w.name }} Blind"> </span>Blind Balance: </td>
                          <td class="py-3 px-6 bold coinname-value" data-coinname="{{ w.name }}">{{ w.blind_balance }} {{ w.ticker }} (<span class="usd-value"></span>)
                          {% if w.blind_unconfirmed %}
                          <span class="inline-block py-1 px-2 rounded-full bg-green-100 text-green-500 dark:bg-gray-500 dark:text-green-500">Unconfirmed: +{{ w.blind_unconfirmed }} {{ w.ticker }}</span>
                          {% endif %}
                        </td>
                        </tr>
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold"> <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/{{ w.name }}.png" alt="{{ w.name }} Anon"> </span>Anon Balance: </td>
                          <td class="py-3 px-6 bold coinname-value" data-coinname="{{ w.name }}">{{ w.anon_balance }} {{ w.ticker }} (<span class="usd-value"></span>)
                            {% if w.anon_pending %}
                            <span class="inline-block py-1 px-2 rounded-full bg-green-100 text-green-500 dark:bg-gray-500 dark:text-green-500">Pending: +{{ w.anon_pending }} {{ w.ticker }}</span>
                          {% endif %}
                        </td>
                          <td class="usd-value"></td>
                        </tr>
                        {% endif %}
                        {# / PART #}
                        {% if w.cid == '3' %} {# LTC #}
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold"> <span class="pr-3 inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> <img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} MWEB"> </span>MWEB Balance: </td>
                          <td class="py-3 px-6 bold coinname-value" data-coinname="{{ w.name }}">{{ w.mweb_balance }} {{ w.ticker }} (<span class="usd-value"></span>)
                        {% if w.mweb_pending %}
                            <span class="inline-block py-1 px-2 rounded-full bg-green-100 text-green-500 dark:bg-gray-500 dark:text-green-500">Pending: +{{ w.mweb_pending }} {{ w.ticker }} </span>
                        {% endif %}
                        </td>
                        </tr>
                        {% endif %}
                        {# / LTC #}
                        {% if w.locked_utxos %}
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold">Locked Outputs:</td>
                          <td id='locked_utxos' class="py-3 px-6">{{ w.locked_utxos }}</td>
                        </tr>
                        {% endif %}
                        {# / locked_utxos #}
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold w-96">Last updated:</td>
                          <td class="py-3 px-6">{{ w.lastupdated }}</td>
                        </tr>
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold">{{ w.name }} Version:</td>
                          <td class="py-3 px-6">{{ w.version }}</td>
                        </tr>
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold">Blocks:</td>
                          <td class="py-3 px-6">{{ w.blocks }}
                          {% if w.known_block_count %} / {{ w.known_block_count }}
                        {% endif %}
                      </td>
                        </tr>
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold">Synced:</td>
                          <td class="py-3 px-6">{{ w.synced }}</td>
                        </tr>
                        {% if w.bootstrapping %}
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold">Bootstrapping:</td>
                          <td class="py-3 px-6">{{ w.bootstrapping }}</td>
                        </tr>
                        {% endif %}
                        {# / bootstrapping #}
                        {% if w.encrypted %}
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold">Locked:</td>
                          <td class="py-3 px-6">{{ w.locked }}</td>
                        </tr>
                        {% endif %}
                        {# / encrypted #}
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                          <td class="py-3 px-6 bold">Expected Seed:</td>
                          <td class="py-3 px-6">{{ w.expected_seed }}</td> {% if block_unknown_seeds and w.expected_seed != true %} {# Only show addresses if wallet seed is correct #}
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section 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">
                  {% if w.cid != '4' %} {# DCR #}
                  <div class="flex flex-wrap justify-end">
                    <div class="w-full md:w-auto p-1.5"> <input class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none cursor-pointer" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();"> </div>
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  {% else %}
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p-6">
  <div class="flex items-center">
    <h4 class="font-semibold text-2xl text-black dark:text-white">Deposit</h4>
  </div>
</section>
<form method="post" autocomplete="off">
  <section>
    <div class="pl-6 pr-6 pt-0 pb-0 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="pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
                <div class="px-6">
                  <div class="container mx-auto">
                    <div class="flex flex-wrap max-w-7xl mx-auto -m-3">
                      {% if w.cid == '1' %} {# PART #}
                      <div class="w-full md:w-1/2 p-3 flex justify-center items-center">
                        <div class="h-full">
                          <div class="flex flex-wrap -m-3">
                            <div class="w-full p-3">
                              <div class="mb-2 qrcode-container flex h-60 justify-center items-center">
                                <div class="qrcode-border flex">
                                  <div id="qrcode-stealth" class="qrcode"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">{{ w.name }} Stealth Address: </div>
                              <div class="relative flex justify-center items-center">
                                <div data-tooltip-target="tooltip-copy-particl-stealth" class="input-like-container 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-10 focus:ring-0" id="stealth_address"> {{ w.stealth_address }}
                                </div>
                              </div>
                              <div id="tooltip-copy-particl-stealth" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                                <p>Copy to clipboard</p>
                                <div class="tooltip-arrow" data-popper-arrow></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {# / PART #}
                      {% if w.cid in '6, 9' %}
                      {# XMR | WOW #}
                      <div class="w-full md:w-1/2 p-3 flex justify-center items-center">
                        <div class="h-full">
                          <div class="flex flex-wrap -m-3">
                            <div class="w-full p-3">
                              <div class="mb-2 qrcode-container flex h-60 justify-center items-center">
                                <div class="qrcode-border flex">
                                  <div id="qrcode-monero-main" class="qrcode"></div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">{{ w.name }} Main Address: </div>
                              <div class="relative flex justify-center items-center">
                                <div data-tooltip-target="tooltip-copy-monero-main" class="input-like-container 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 focus:ring-0" id="monero_main_address">{{ w.main_address }}</div>
                              </div>
                              <div id="tooltip-copy-monero-main" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                                <p>Copy to clipboard</p>
                                <div class="tooltip-arrow" data-popper-arrow></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="w-full md:w-1/2 p-3 flex justify-center items-center">
                        <div class="h-full">
                          <div class="flex flex-wrap -m-3">
                            <div class="w-full p-3">
                              <div class="mb-2 qrcode-container flex h-60 justify-center items-center">
                                <div class="qrcode-border flex">
                                  <div id="qrcode-monero-sub" class="qrcode"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">{{ w.name }} Sub Address: </div>
                              <div class="relative flex justify-center items-center">
                                <div data-tooltip-target="tooltip-copy-monero-sub" class="input-like-container 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 focus:ring-0" id="monero_sub_address">{{ w.deposit_address }}</div>
                              </div>
                              <div class="opacity-100 text-gray-500 dark:text-gray-100 flex justify-center items-center">
                                <div class="py-3 px-6 bold mt-5">
                                  <button type="submit" class="flex justify-center py-2 px-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" name="newaddr_{{ w.cid }}" value="New Subaddress"> {{ circular_arrows_svg }} New {{ w.name }} Deposit Address</button>
                                </div>
                              </div>
                              <div id="tooltip-copy-monero-sub" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                                <p>Copy to clipboard</p>
                                <div class="tooltip-arrow" data-popper-arrow></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      {% else %}
                      <div class="w-full md:w-1/2 p-3 flex justify-center items-center">
                        <div class="h-full">
                          <div class="flex flex-wrap -m-3">
                            <div class="w-full p-3">
                              <div class="mb-2 qrcode-container flex h-60 justify-center items-center">
                                <div class="qrcode-border flex">
                                  <div id="qrcode-deposit" class="qrcode"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">{{ w.name }} Deposit Address: </div>
                              <div class="relative flex justify-center items-center">
                                <div data-tooltip-target="tooltip-copy-default" class="input-like-container 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 focus:ring-0" id="main_deposit_address">{{ w.deposit_address }}</div>
                              </div>
                              <div class="opacity-100 text-gray-500 dark:text-gray-100 flex justify-center items-center">
                                <div class="py-3 px-6 bold mt-5">
                                  <button type="submit" class="flex justify-center py-2 px-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" name="newaddr_{{ w.cid }}" value="New Deposit Address"> {{ circular_arrows_svg }} New {{ w.name }} Deposit Address </button>
                                </div>
                              </div>
                              <div id="tooltip-copy-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                                <p>Copy to clipboard</p>
                                <div class="tooltip-arrow" data-popper-arrow></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {% if w.cid == '3' %}
                      {# LTC #}
                      <div class="w-full md:w-1/2 p-3 flex justify-center items-center">
                        <div class="h-full">
                          <div class="flex flex-wrap -m-3">
                            <div class="w-full p-3">
                              <div class="mb-2 qrcode-container flex h-60 justify-center items-center">
                                <div class="qrcode-border flex">
                                  <div id="qrcode-mweb" class="qrcode"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">{{ w.name }} MWEB Address: </div>
                              <div class="text-center relative">
                                <div data-tooltip-target="tooltip-copy-litecoin-mweb" class="input-like-container 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-2.5 focus:ring-0" id="stealth_address">{{ w.mweb_address }}</div>
                                <span class="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer" id="copyIcon"></span>
                              </div>
                              <div class="opacity-100 text-gray-500 dark:text-gray-100 flex justify-center items-center">
                                <div class="py-3 px-6 bold mt-5">
                                  <button type="submit" class="flex justify-center py-2 px-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" name="newmwebaddr_{{ w.cid }}" value="New MWEB Address"> {{ circular_arrows_svg }} New MWEB Address </button>
                                </div>
                              <div id="tooltip-copy-litecoin-mweb" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                                <p>Copy to clipboard</p>
                                <div class="tooltip-arrow" data-popper-arrow></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      {% endif %}
                      {# / LTC #}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  </section>
  {% if w.cid == '1' %}
  {# PART #}
  <script>
    // Particl Stealth
    var stealthAddress = "{{ w.stealth_address }}";

    var qrCodeStealth = new QRCode(document.getElementById("qrcode-stealth"), {
      text: stealthAddress,
      width: 170,
      height: 170,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.L
    });
  </script>
  {% endif %}
  {% if w.cid == '3' %}
  {# LTC #}
  <script>
    // Litecoin MWEB
    var mwebAddress = "{{ w.mweb_address }}";

    var qrCodeMWEB = new QRCode(document.getElementById("qrcode-mweb"), {
      text: mwebAddress,
      width: 170,
      height: 170,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.L
    });
  </script>
  {% endif %}
  {% if w.cid in '6, 9' %}
  {# XMR | WOW #}
  <script>
    // Monero Sub
    var moneroSubAddress = "{{ w.deposit_address }}";

    var qrCodeMoneroSub = new QRCode(document.getElementById("qrcode-monero-sub"), {
      text: moneroSubAddress,
      width: 170,
      height: 170,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.L
    });
  </script>
  <script>
    // Monero Main
    var moneroMainAddress = "{{ w.main_address }}";

    var qrCodeMoneroMain = new QRCode(document.getElementById("qrcode-monero-main"), {
      text: moneroMainAddress,
      width: 170,
      height: 170,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.L
    });
  </script>
  {% else %}
  <script>
    // Default
    var defaultAddress = "{{ w.deposit_address }}";

    var qrCodeDepost = new QRCode(document.getElementById("qrcode-deposit"), {
      text: defaultAddress,
       width: 170,
      height: 170,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.L
    });
</script>
{% endif %}
<script>
    function copyToClipboard(text) {
        const el = document.createElement('textarea');
        el.value = text;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
    }

    function copyAndShowMessage(elementId) {
        const addressElement = document.getElementById(elementId);
        if (!addressElement) return;
        const addressText = addressElement.innerText.trim();
        copyToClipboard(addressText);
        addressElement.innerText = 'Copied to clipboard';

        const originalWidth = addressElement.offsetWidth;

        addressElement.classList.add('copying');

        addressElement.parentElement.style.width = `${originalWidth}px`;

        setTimeout(function () {
            addressElement.innerText = addressText;
            addressElement.classList.remove('copying');
            addressElement.parentElement.style.width = '';
        }, 2000);
    }

    const stealthAddressElement = document.getElementById('stealth_address');
    if (stealthAddressElement) {
        stealthAddressElement.addEventListener('click', function () {
            copyAndShowMessage('stealth_address');
        });
    }

    const mainDepositAddressElement = document.getElementById('main_deposit_address');
    if (mainDepositAddressElement) {
        mainDepositAddressElement.addEventListener('click', function () {
            copyAndShowMessage('main_deposit_address');
        });
    }

    const moneroMainAddressElement = document.getElementById('monero_main_address');
    if (moneroMainAddressElement) {
        moneroMainAddressElement.addEventListener('click', function () {
            copyAndShowMessage('monero_main_address');
        });
    }

    const moneroSubAddressElement = document.getElementById('monero_sub_address');
    if (moneroSubAddressElement) {
        moneroSubAddressElement.addEventListener('click', function () {
            copyAndShowMessage('monero_sub_address');
        });
    }
  </script>
  <section class="p-6">
    <div class="flex items-center">
      <h4 class="font-semibold text-2xl text-black dark:text-white">Withdraw</h4>
    </div>
  </section>
  <section>
    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
      <div class="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="w-full mt-6 pb-6 overflow-x-auto">
                    <table class="w-full min-w-max text-sm">
                      <thead class="uppercase">
                        <tr class="text-left">
                          <th class="p-0">
                            <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span> </div>
                          </th>
                          <th class="p-0">
                            <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Input</span> </div>
                          </th>
                        </tr>
                      </thead>
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-4 pl-6 bold"> <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/{{ w.name }}.png" alt="{{ w.name }}"> </span> {{ w.name }} Balance: </td>
                        <td class="py-3 px-6" data-coinname="{{ w.name }}">{{ w.balance }} {{ w.ticker }} </td>
                        {% if w.cid == '3' %}
                        {# LTC #}
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-4 pl-6 bold w-1/4"> <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/{{ w.name }}.png" alt="{{ w.name }}"> </span> {{ w.name }} MWEB Balance: </td>
                        <td class="py-3 px-6" data-coinname="{{ w.name }}">{{ w.mweb_balance }} {{ w.ticker }} </td>
                        {% endif %}
                        {% if w.cid == '1' %}
                        {# PART #}
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-4 pl-6 bold"> <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/{{ w.name }}.png" alt="{{ w.name }}"> </span> {{ w.name }} Blind Balance: </td>
                        <td class="py-3 px-6" data-coinname="{{ w.name }}">{{ w.blind_balance }} {{ w.ticker }} </td>
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-4 pl-6 bold"> <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/{{ w.name }}.png" alt="{{ w.name }}"> </span> {{ w.name }} Anon Balance: </td>
                        <td class="py-3 px-6" data-coinname="{{ w.name }}">{{ w.anon_balance }} {{ w.ticker }} </td> {% endif %}
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-4 pl-6 bold"> {{ w.name }} Address: </td>
                        <td class="py-3 px-6"> <input placeholder="{{ w.ticker }} Address" 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-2.5 focus:ring-0" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}"> </td>
                      </tr>
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-4 pl-6 bold"> {{ w.name }} Amount:
                        <td class="py-3 px-6">
                          <div class="flex"> <input placeholder="{{ w.ticker }} Amount" 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-2.5 focus:ring-0" type="text" id="amount" name="amt_{{ w.cid }}" value="{{ w.wd_value }}">
                            <div class="ml-2 flex">
{% if w.cid == '1' %}
{# PART #}
<button type="button" class="py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(0.25, '{{ w.balance }}', {{ w.cid }}, '{{ w.blind_balance }}', '{{ w.anon_balance }}')">25%</button>
<button type="button" class="ml-2 py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(0.5, '{{ w.balance }}', {{ w.cid }}, '{{ w.blind_balance }}', '{{ w.anon_balance }}')">50%</button>
<button type="button" class="ml-2 py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(1, '{{ w.balance }}', {{ w.cid }}, '{{ w.blind_balance }}', '{{ w.anon_balance }}')">100%</button>
<script>
  function setAmount(percent, balance, cid, blindBalance, anonBalance) {
    var amountInput = document.getElementById('amount');
    var typeSelect = document.getElementById('withdraw_type');
    var selectedType = typeSelect.value;
    var floatBalance;
    var calculatedAmount;

    switch(selectedType) {
      case 'plain':
        floatBalance = parseFloat(balance);
        break;
      case 'blind':
        floatBalance = parseFloat(blindBalance);
        break;
      case 'anon':
        floatBalance = parseFloat(anonBalance);
        break;
      default:
        floatBalance = parseFloat(balance);
        break;
    }
    calculatedAmount = floatBalance * percent;
    amountInput.value = calculatedAmount.toFixed(8);

    var subfeeCheckbox = document.querySelector(`[name="subfee_${cid}"]`);
    if (subfeeCheckbox) {
      subfeeCheckbox.checked = (percent === 1);
    }
  }
</script>
{# / PART #}
{% elif w.cid == '3' %}
{# LTC #}
<button type="button" class="py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(0.25, '{{ w.balance }}', {{ w.cid }}, '{{ w.mweb_balance }}')">25%</button>
<button type="button" class="ml-2 py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(0.5, '{{ w.balance }}', {{ w.cid }}, '{{ w.mweb_balance }}')">50%</button>
<button type="button" class="ml-2 py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(1, '{{ w.balance }}', {{ w.cid }}, '{{ w.mweb_balance }}')">100%</button>
<script>
  function setAmount(percent, balance, cid, mwebBalance) {
    var amountInput = document.getElementById('amount');
    var typeSelect = document.getElementById('withdraw_type');
    var selectedType = typeSelect.value;
    var floatBalance;
    var calculatedAmount;

    switch(selectedType) {
      case 'plain':
        floatBalance = parseFloat(balance);
        break;
      case 'mweb':
        floatBalance = parseFloat(mwebBalance);
        break;
      default:
        floatBalance = parseFloat(balance);
        break;
    }
    calculatedAmount = floatBalance * percent;
    amountInput.value = calculatedAmount.toFixed(8);

    var subfeeCheckbox = document.querySelector(`[name="subfee_${cid}"]`);
    if (subfeeCheckbox) {
      subfeeCheckbox.checked = (percent === 1);
    }
  }
</script>
{# / LTC #}
{% else %}
<button type="button" class="py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(0.25, '{{ w.balance }}', {{ w.cid }})">25%</button>
<button type="button" class="ml-2 py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(0.5, '{{ w.balance }}', {{ w.cid }})">50%</button>
<button type="button" class="ml-2 py-1 px-2 bg-blue-500 text-white text-sm rounded-md focus:outline-none" onclick="setAmount(1, '{{ w.balance }}', {{ w.cid }})">100%</button>
<script>
  function setAmount(percent, balance, cid) {
    var amountInput = document.getElementById('amount');
    var floatBalance = parseFloat(balance);
    var calculatedAmount = floatBalance * percent;

    const specialCids = [6, 9];

    console.log("CID:", cid);
    console.log("Percent:", percent);
    console.log("Balance:", balance);
    console.log("Calculated Amount:", calculatedAmount);

    if (specialCids.includes(parseInt(cid)) && percent === 1) {
        amountInput.setAttribute('data-hidden', 'true');
        amountInput.placeholder = 'Sweep All';
        amountInput.value = '';
        amountInput.disabled = true;
        console.log("Sweep All activated for special CID:", cid);
    } else {
        amountInput.value = calculatedAmount.toFixed(8);
        amountInput.setAttribute('data-hidden', 'false');
        amountInput.placeholder = '';
        amountInput.disabled = false;
    }

    let sweepAllCheckbox = document.getElementById('sweepall');
    if (sweepAllCheckbox) {
        if (specialCids.includes(parseInt(cid)) && percent === 1) {
            sweepAllCheckbox.checked = true;
            console.log("Sweep All checkbox checked");
        } else {
            sweepAllCheckbox.checked = false;
            console.log("Sweep All checkbox unchecked");
        }
    }

    let subfeeCheckbox = document.querySelector(`[name="subfee_${cid}"]`);
    if (subfeeCheckbox) {
        subfeeCheckbox.checked = (percent === 1);
        console.log("Subfee checkbox status for CID", cid, ":", subfeeCheckbox.checked);
    }
  }
</script>

{% endif %}
</div>
 </td>
</tr>
<tr class="opacity-100 text-gray-500 dark:text-gray-100">
  {% if w.cid in '6, 9' %} {# XMR | WOW #}
  <td class="py-3 px-6 bold">Sweep All:</td>
  <td class="py-3 px-6">
    <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="sweepall" name="sweepall_{{ w.cid }}" {% if w.wd_sweepall==true %} checked=checked{% endif %}>
  </td>
  {% else %}
  <td class="py-3 px-6 bold">Subtract Fee:</td>
  <td class="py-3 px-6">
    <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" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}>
  </td>
  {% endif %}
  <td>
  </td>
</tr>
                      {% if w.cid == '1' %}
                      {# PART #}
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-3 px-6 bold">Type From:</td>
                        <td class="py-3 px-6">
                          <div class="w-full md:flex-1">
                            <div class="relative"> {{ select_box_arrow_svg | safe }} <select id="withdraw_type" class="{{ select_box_class }}" name="withdraw_type_from_{{ w.cid }}">
                                <option value="any" {% if w.wd_type_from==-1 %} selected{% endif %}>Select Type</option>
                                <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option>
                                <option value="blind" {% if w.wd_type_from=='blind' %} selected{% endif %}>Blind</option>
                                <option value="anon" {% if w.wd_type_from=='anon' %} selected{% endif %}>Anon</option>
                              </select> </div>
                          </div>
                        </td>
                      </tr>
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-3 px-6 bold">Type To:</td>
                        <td class="py-3 px-6">
                          <div class="w-full md:flex-1">
                            <div class="relative"> {{ select_box_arrow_svg }} <select class="{{ select_box_class }}" name="withdraw_type_to_{{ w.cid }}">
                                <option value="any" {% if w.wd_type_to==-1 %} selected{% endif %}>Select Type</option>
                                <option value="plain" {% if w.wd_type_to=='plain' %} selected{% endif %}>Plain</option>
                                <option value="blind" {% if w.wd_type_to=='blind' %} selected{% endif %}>Blind</option>
                                <option value="anon" {% if w.wd_type_to=='anon' %} selected{% endif %}>Anon</option>
                              </select> </div>
                          </div>
                        </td>
                      </tr>
                      {% endif %}
                      {# / PART #}
                      {% if w.cid == '3' %} {# LTC #}
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-3 px-6 bold">Type From:</td>
                        <td class="py-3 px-6">
                          <div class="w-full md:flex-1">
                            <div class="relative"> {{ select_box_arrow_svg }} <select id="withdraw_type" class="{{ select_box_class }}" name="withdraw_type_from_{{ w.cid }}">
                                <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option>
                                <option value="mweb" {% if w.wd_type_from=='mweb' %} selected{% endif %}>MWEB</option>
                              </select> </div>
                          </div>
                        </td>
                      </tr>
                      {% endif %}
                      {# / LTC #}
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-3 px-6 bold">Fee Rate:</td>
                        <td class="py-3 px-6">{{ w.fee_rate }}</td>
                      </tr>
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-3 px-6 bold">Estimate Fee:</td>
                        <td class="py-3 px-6"> {{ w.est_fee }} </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </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 ">
        <div class="flex flex-wrap items-center justify-between -m-2">
          <div class="w-full pt-2">
            <div class="container mx-auto">
              <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
                <div class="px-6">
                  <div class="flex flex-wrap justify-end">
                    {% if w.cid not in '6, 9' %}
                    {# !XMR | WOW #}
                    {% if w.show_utxo_groups %}
                    {% else %}
                    <div class="w-full md:w-auto p-1.5"> <button type="submit" class="flex flex-wrap justify-center 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" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups"> {{ utxo_groups_svg | safe }} Show UTXO Groups </button> </div>
                    {% endif %} {% endif %}
                    {% if w.cid in '6, 9' %}
                    {# XMR | WOW #}
                    <div class="w-full md:w-auto p-1.5 ml-2"> <button 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" name="estfee_{{ w.cid }}" value="Estimate Fee">Estimate {{ w.ticker }} Fee </button> </div>
                    {% endif %}
                    {# / XMR | WOW #} <div class="w-full md:w-auto p-1.5 ml-2"> <button 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" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();">{{ withdraw_svg | safe }} Withdraw {{ w.ticker }} </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </section>
  {% if w.cid not in '6, 9' %}
  {# !XMR | WOW #}
  {% if w.show_utxo_groups %}
  <section class="p-6">
    <div class="flex items-center">
      <h4 class="font-semibold text-2xl text-black dark:text-white">UTXO Groups</h4>
    </div>
  </section>
  <section>
    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
      <div class="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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
                <div class="px-6">
                  <div class="w-full mt-6 pb-6 overflow-x-auto">
                    <table class="w-full min-w-max text-sm">
                      <thead class="uppercase">
                        <tr class="text-left">
                          <th class="p-0">
                            <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span> </div>
                          </th>
                          <th class="p-0">
                            <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold p-10"></span> </div>
                          </th>
                        </tr>
                      </thead>
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-3 px-6 w-1/4 bold">UTXO Groups:</td>
                        <td class="py-3 px-6"> <textarea 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-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="tx_view" rows="10" readonly>{{ w.utxo_groups }} </textarea> </td>
                      </tr>
                      <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                        <td class="py-3 px-6"> <button type="submit" class="flex flex-wrap justify-center px-4 py-2 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" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();"> {{ create_utxo_svg | safe }}Create UTXO </button> </td>
                        <td class="py-3 px-6"> <input placeholder="Amount" 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-2.5 focus:ring-0" type="text" name="utxo_value" value="{{ w.utxo_value }}"> </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </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 ">
        <div class="flex flex-wrap items-center justify-between -m-2">
          <div class="w-full pt-2">
            <div class="container mx-auto">
              <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
                <div class="px-6">
                  <div class="flex flex-wrap justify-end"> <button type="submit" class="flex flex-wrap justify-center 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" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups"> {{ utxo_groups_svg | safe }} Close UTXO Groups </button> </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  {% else %}
  {% endif %}
  {% endif %}
  {% endif %}
  {% endif %}
  {% endif %}
  <input type="hidden" name="formid" value="{{ form_id }}">
</form>
<script>
const coinNameToSymbol = {
  'Bitcoin': 'BTC',
  'Particl': 'PART',
  'Particl Blind': 'PART',
  'Particl Anon': 'PART',
  'Monero': 'XMR',
  'Wownero': 'WOW',
  'Litecoin': 'LTC',
  'Firo': 'FIRO',
  'Dash': 'DASH',
  'PIVX': 'PIVX',
  'Decred': 'DCR',
  'Zano': 'ZANO',
};

const getUsdValue = (cryptoValue, coinSymbol) => {
  if (coinSymbol === 'WOW') {
    return fetch(`https://api.coingecko.com/api/v3/simple/price?ids=wownero&vs_currencies=usd`)
      .then(response => response.json())
      .then(data => {
        const exchangeRate = data.wownero.usd;
        if (!isNaN(exchangeRate)) {
          return cryptoValue * exchangeRate;
        } else {
          throw new Error(`Invalid exchange rate for ${coinSymbol}`);
        }
      });
  } else {
    return fetch(`https://min-api.cryptocompare.com/data/price?fsym=${coinSymbol}&tsyms=USD`)
      .then(response => response.json())
      .then(data => {
        const exchangeRate = data.USD;
        if (!isNaN(exchangeRate)) {
          return cryptoValue * exchangeRate;
        } else {
          throw new Error(`Invalid exchange rate for ${coinSymbol}`);
        }
      });
  }
};

  const updateUsdValue = async (cryptoCell, coinFullName, usdValueSpan) => {
    const coinSymbol = coinNameToSymbol[coinFullName] || '';
    if (!coinSymbol) {
      console.error(`Coin symbol not found for full name: ${coinFullName}`);
      return;
    }

    const cryptoValue = parseFloat(cryptoCell.textContent);

    if (!isNaN(cryptoValue) && cryptoValue !== 0) {
      try {
        const usdValue = await getUsdValue(cryptoValue, coinSymbol);
        if (usdValueSpan) {
          usdValueSpan.textContent = `$${usdValue.toFixed(2)}`;
        }
      } catch (error) {
        console.error('Error in updateUsdValue:', error);
        if (usdValueSpan) {
          usdValueSpan.textContent = 'Error retrieving exchange rate';
        }
      }
    } else {
      if (usdValueSpan) {
        usdValueSpan.textContent = `$0.00`;
      }
    }
  };

  const calculateTotalUsdValue = async () => {
    const coinNameValues = document.querySelectorAll('.coinname-value');
    let totalUsdValue = 0;

    for (const coinNameValue of coinNameValues) {
      const coinFullName = coinNameValue.getAttribute('data-coinname');
      const cryptoValue = parseFloat(coinNameValue.textContent);
      const coinSymbol = coinNameToSymbol[coinFullName];

      if (coinSymbol) {
        const usdValueSpan = coinNameValue.querySelector('.usd-value');

        if (!isNaN(cryptoValue) && cryptoValue !== 0) {
          try {
            const usdValue = await getUsdValue(cryptoValue, coinSymbol);
            totalUsdValue += usdValue;
            if (usdValueSpan) {
              usdValueSpan.textContent = `$${usdValue.toFixed(2)}`;
            }
          } catch (error) {
            console.error(`Error retrieving exchange rate for ${coinFullName}`);
          }
        } else {
          if (usdValueSpan) {
            usdValueSpan.textContent = `$0.00`;
          }
        }
      } else {
        console.error(`Coin symbol not found for full name: ${coinFullName}`);
      }
    }

    const totalUsdValueElement = document.getElementById('total-usd-value');
    if (totalUsdValueElement) {
      totalUsdValueElement.textContent = `$${totalUsdValue.toFixed(2)}`;
    }
  };

  document.addEventListener('DOMContentLoaded', () => {
    const coinNameValues = document.querySelectorAll('.coinname-value');

    for (const coinNameValue of coinNameValues) {
      const coinFullName = coinNameValue.getAttribute('data-coinname');
      const usdValueSpan = coinNameValue.querySelector('.usd-value');
      updateUsdValue(coinNameValue, coinFullName, usdValueSpan);
    }

    calculateTotalUsdValue();

  function set_sweep_all(element) {
  let input = document.getElementById('amount');
  if (element.checked) {
    input.disabled = true;
  } else {
    input.disabled = false;
  }
  }

  let cb_sweepall = document.getElementById('sweepall');
  if (cb_sweepall) {
  set_sweep_all(cb_sweepall);
  cb_sweepall.addEventListener('change', (event) => {
    set_sweep_all(event.currentTarget);
  });
  }

  });

  function confirmReseed() {
   return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
  }

  function confirmWithdrawal() {
   return confirm("Are you sure?");
  }

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