{% 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, withdraw_svg, utxo_groups_svg, create_utxo_svg, red_cross_close_svg, blue_cross_close_svg, circular_update_messages_svg, circular_error_messages_svg, love_svg %}
{% from 'macros.html' import page_header %}
<script src="/static/js/libs//qrcode.js"></script>
<script src="/static/js/modules/qrcode-manager.js"></script>

{{ page_header('(' ~ w.ticker ~ ') ' ~ w.name ~ ' Wallet', icon=w.name, title_size='text-3xl', title_extra_class='', dots_style='all') }}

{% include 'inc_messages.html' %}

{% if w.updating %}
<section class="py-4 px-6" id="messages_updating" role="alert">
  <div class="lg:container 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-lg lg:text-sm text-blue-500 error_msg"><span class="bold">UPDATING:</span></li>
                <li class="font-medium text-lg lg: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 px-6" id="messages_error" role="alert">
  <div class="lg:container 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-lg lg:text-sm text-red-500 error_msg"><span class="bold">ERROR:</span></li>
                <li class="font-medium text-lg lg: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 %}

{% if w.cid == '18' %} {# DOGE #}
<section class="py-4 px-6" id="messages_notice">
  <div class="lg:container mx-auto">
    <div class="p-6 rounded-lg bg-coolGray-100 dark:bg-gray-500 shadow-sm">
      <div class="flex items-start">
        <div class="flex flex-wrap -m-1">
          <ul class="ml-4">
            <li class="font-medium text-gray-600 dark:text-white leading-relaxed">
              NOTICE: This version of DOGE Core is experimental and has been custom-built for compatibility with BasicSwap. As a result, it may not always be fully aligned with upstream changes, features unrelated to BasicSwap might not work as expected, and its code may differ from the official release.
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
{% endif %}

{% if legacy_funds_info and legacy_funds_info.has_legacy_funds %}
<section class="py-4 px-6" id="legacy_funds_warning">
  <div class="lg:container mx-auto">
    <div class="p-6 rounded-lg bg-yellow-50 border border-yellow-400 dark:bg-yellow-900/30 dark:border-yellow-700">
      <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="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
              </svg>
            </div>
            <div class="ml-3 flex-1">
              <p class="font-semibold text-lg lg:text-sm text-yellow-700 dark:text-yellow-300">Legacy Address Funds</p>
              <p class="mt-1 text-sm text-yellow-600 dark:text-yellow-400">
                {{ legacy_funds_info.legacy_balance }} {{ legacy_funds_info.coin }} on legacy addresses won't be visible in external Electrum wallet.
                To use funds with external wallets, transfer to a new address.
              </p>
              <p class="mt-2 text-xs text-yellow-500 dark:text-yellow-500">
                Use the withdraw function below to send funds to a new <code class="bg-yellow-100 dark:bg-yellow-800/50 px-1 rounded">{{ w.ticker | lower }}1...</code> address.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endif %}

<section>
    <form method="post" autocomplete="off">
      <div class="px-6 py-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="lg: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 pb-6 overflow-x-auto">
                      <table class="w-full text-lg lg: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-md lg: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-md lg: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">
                            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.balance }} {{ w.ticker }}</span>
                            (<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 %}
                            {% if w.pending_out %}
                              <span class="inline-block py-1 px-2 rounded-full bg-yellow-100 text-yellow-600 dark:bg-gray-500 dark:text-yellow-400">Unconfirmed: -{{ w.pending_out }} {{ 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">
                            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.blind_balance }} {{ w.ticker }}</span>
                            (<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">
                            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.anon_balance }} {{ w.ticker }}</span>
                            (<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>
                        </tr>
                        {# / PART #}
                        {% elif 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="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">
                            {% if is_electrum_mode %}
                            <span class="text-gray-400 dark:text-gray-300">Not available in light mode</span>
                            {% else %}
                            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.mweb_balance }} {{ w.ticker }}</span>
                            (<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 %}
                            {% endif %}
                          </td>
                        </tr>
                        {% elif w.cid == '13' %} {# FIRO #}
                        <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 }} Spark"> </span>Spark Balance: </td>
                          <td class="py-3 px-6 bold">
                            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.spark_balance }} {{ w.ticker }}</span>
                            (<span class="usd-value"></span>)
                            {% if w.spark_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.spark_pending }} {{ w.ticker }} </span>
                            {% endif %}
                          </td>
                        </tr>
                        {% elif w.cid == '13' %} {# FIRO #}
                        <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 }} Spark"> </span>Spark Balance: </td>
                          <td class="py-3 px-6 bold">
                            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.spark_balance }} {{ w.ticker }}</span>
                            (<span class="usd-value"></span>)
                            {% if w.spark_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.spark_pending }} {{ w.ticker }} </span>
                            {% endif %}
                          </td>
                        </tr>
                        {% endif %}
                        {# / LTC #}
                        {# / FIRO #}
                        {% 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">Wallet Mode:</td>
                          <td class="py-3 px-6">
                            {% if w.connection_type == 'electrum' %}
                            <span class="inline-block py-1 px-2 rounded-full bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300">Light Wallet (Electrum)</span>
                            {% else %}
                            <span class="inline-block py-1 px-2 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">Full Node</span>
                            {% endif %}
                            {% if use_tor %}
                            <span class="inline-block py-1 px-2 ml-2 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300" title="Electrum connections routed through TOR">TOR</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">Blockheight:</td>
                          <td class="py-3 px-6">{{ w.blocks }}
                          {% if w.known_block_count %} / {{ w.known_block_count }}
                        {% endif %}
                      </td>
                        </tr>
                        {% if w.wallet_blocks %}
                        <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">Wallet Blocks:</td>
                          <td class="py-3 px-6">{{ w.wallet_blocks }}{% if w.known_block_count %} / {{ w.known_block_count }}{% endif %}</td>
                        </tr>
                        {% endif %}
                        <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">
                            {% if is_electrum_mode %}
                              {% if w.electrum_synced %}
                            <span class="text-green-600 dark:text-green-400">Electrum Wallet Synced ({{ w.electrum_height }})</span>
                              {% else %}
                            <span class="text-yellow-600 dark:text-yellow-400">Waiting for Electrum Server...</span>
                              {% endif %}
                            {% else %}
                            {{ w.synced }}
                            {% endif %}
                          </td>
                        </tr>
                        {% if is_electrum_mode and w.electrum_server %}
                        <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">Server:</td>
                          <td class="py-3 px-6 font-mono text-sm">
                            {{ w.electrum_server }}
                            {% if w.electrum_status == 'connected' %}
                            <span class="ml-2 inline-flex items-center">
                              <span class="text-xs text-green-600 dark:text-green-400">(Connected)</span>
                            </span>
                            {% elif w.electrum_status == 'all_failed' %}
                            <span class="ml-2 inline-flex items-center">
                              <span class="text-xs text-red-600 dark:text-red-400">(All Servers Failed)</span>
                            </span>
                            {% elif w.electrum_status == 'disconnected' %}
                            <span class="ml-2 inline-flex items-center">
                              <span class="text-xs text-red-600 dark:text-red-400">(Disconnected - Reconnecting...)</span>
                            </span>
                            {% elif w.electrum_status == 'error' %}
                            <span class="ml-2 inline-flex items-center">
                              <span class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></span>
                              <span class="text-xs text-yellow-600 dark:text-yellow-400">(Connection Error)</span>
                            </span>
                            {% endif %}
                          </td>
                        </tr>
                        {% endif %}
                        {% if is_electrum_mode and w.electrum_all_failed and w.electrum_using_defaults %}
                        <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                          <td colspan="2" class="py-3 px-6">
                            <div class="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 rounded-lg">
                              <p class="text-sm font-medium text-red-800 dark:text-red-200 mb-1">
                                <svg class="inline w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                                Default Electrum Servers Unavailable
                              </p>
                              <p class="text-xs text-red-700 dark:text-red-300">
                                All default servers failed to connect. Please configure custom Electrum servers in
                                <a href="/settings" class="underline font-medium hover:text-red-900 dark:hover:text-red-100">Settings</a>
                                under the {{ w.name }} section.
                              </p>
                              {% if w.electrum_last_error %}
                              <p class="text-xs text-red-600 dark:text-red-400 mt-1 font-mono">Last error: {{ w.electrum_last_error }}</p>
                              {% endif %}
                            </div>
                          </td>
                        </tr>
                        {% endif %}
                        {% if is_electrum_mode and w.electrum_version %}
                        <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">Server Version:</td>
                          <td class="py-3 px-6">{{ w.electrum_version }}</td>
                        </tr>
                        {% endif %}
                        {% 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 #}
                        {% if w.expected_seed != true %}
                        <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>
                        </tr>
                        {% endif %}
                        {% if w.account_key %}
                        <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">Extended Private Key:</td>
                          <td class="py-3 px-6">
                            <span id="account-key-hidden" class="font-mono text-sm">••••••••••••••••</span>
                            <span id="account-key-value" class="font-mono text-sm hidden break-all">{{ w.account_key }}</span>
                            <button type="button" id="toggle-account-key" onclick="var h=document.getElementById('account-key-hidden'),v=document.getElementById('account-key-value');if(v.classList.contains('hidden')){v.classList.remove('hidden');h.classList.add('hidden');this.textContent='Hide';}else{v.classList.add('hidden');h.classList.remove('hidden');this.textContent='Show';}" class="ml-2 px-2 py-1 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded">Show</button>
                          </td>
                        </tr>
                        {% endif %}
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
</section>

{% if block_unknown_seeds and w.expected_seed != true %} {# Only show addresses if wallet seed is correct #}
    <section class="px-6 py-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="lg:container mt-5 mx-auto">
              <div class="py-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-lg lg: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" data-confirm-reseed> </div>
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  <input type="hidden" name="formid" value="{{ form_id }}">
</form>
{% else %}

<section class="p-6">
 <div class="lg:container mx-auto">
  <div class="flex items-center">
    <h4 class="font-semibold text-2xl text-black dark:text-white">Deposit</h4>
  </div>
 </div>
</section>

<form method="post" autocomplete="off">
  <section>
    <div class="px-6 py-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="lg:container mt-5 mx-auto">
              <div class="pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
                <div class="px-6">
                  <div class="flex flex-wrap max-w-7xl mx-auto justify-center -m-3">
                    <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">
                               {% if w.cid in '6, 9' %}
                               {# XMR | WOW #}
                                  <div id="qrcode-monero-main" class="qrcode" data-qrcode data-address="{{ w.main_address }}"></div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">Main Address: </div>
                              <div class="relative flex justify-center items-center">
                                <div 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-lg lg: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>
                               {% else %}
                                  <div id="qrcode-deposit" class="qrcode" data-qrcode data-address="{{ w.deposit_address }}"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">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-lg lg: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>
                               {% endif %}
                            </div>
                          </div>
                        </div>
                      </div>
                     {% if w.cid in '1, 3, 6, 9, 13' %}
                     {# PART | LTC | XMR | WOW | FIRO #}
                      <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">
                               {% if w.cid in '6, 9' %}
                               {# XMR | WOW #}
                                  <div id="qrcode-monero-sub" class="qrcode" data-qrcode data-address="{{ w.deposit_address }}"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">Subaddress: </div>
                              <div class="relative flex justify-center items-center">
                                <div 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-lg lg: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>
                              {% elif w.cid == '1' %}
                              {# PART #}
                                  <div id="qrcode-stealth" class="qrcode" data-qrcode data-address="{{ w.stealth_address }}"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">Stealth Address: </div>
                              <div class="relative flex justify-center items-center">
                                <div  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-lg lg: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>
                              {# / PART #}
                              {% elif w.cid == '3' %}
                              {# LTC - MWEB not available in light mode #}
                              {% if not is_electrum_mode %}
                                <div id="qrcode-mweb" class="qrcode" data-qrcode data-address="{{ w.mweb_address }}"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">MWEB Address: </div>
                              <div class="text-center relative">
                                <div 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-lg lg: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>
                              {% endif %}
                              {# / LTC #}
                              {% elif w.cid == '13' %}
                             {# FIRO #}
                                  <div id="qrcode-spark" class="qrcode" data-qrcode data-address="{{ w.spark_address }}"> </div>
                                </div>
                              </div>
                              <div class="font-normal bold text-gray-500 text-center dark:text-white mb-5">Spark Address: </div>
                              <div class="text-center relative">
                                <div 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-lg lg: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.spark_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="newsparkaddr_{{ w.cid }}" value="New Spark Address"> {{ circular_arrows_svg }} New Spark Address </button>
                                </div>
                              </div>
                              {# / FIRO #}
                              {% endif %}
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </div>
  </section>

<section class="p-6">
   <div class="lg:container mx-auto">
    <div class="flex items-center">
      <h4 class="font-semibold text-2xl text-black dark:text-white">Withdraw</h4>
    </div>
  </div>
</section>

<section>
 <div class="px-6 py-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="lg:container mt-5 mx-auto">
      <div class="py-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
       <div class="px-6">
        <div class="w-full pb-6 overflow-x-auto">
         <table class="w-full text-lg lg: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-md lg: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-md lg: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>Balance: </td>
           <td class="py-3 px-6">
            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.balance }} {{ w.ticker }}</span>
            (<span class="usd-value"></span>)
           </td>
          </tr>
          {% 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>MWEB Balance: </td>
           <td class="py-3 px-6">
            {% if is_electrum_mode %}
            <span class="text-gray-400 dark:text-gray-300">Not available in light mode</span>
            {% else %}
            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.mweb_balance }} {{ w.ticker }}</span>
            (<span class="usd-value"></span>)
            {% endif %}
           </td>
          </tr>
          {% elif w.cid == '13' %}
          {# FIRO #}
          <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>Spark Balance: </td>
           <td class="py-3 px-6">
            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.spark_balance }} {{ w.ticker }}</span>
            (<span class="usd-value"></span>)
           </td>
          </tr>
          {% elif w.cid == '13' %}
          {# FIRO #}
          <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>Spark Balance: </td>
           <td class="py-3 px-6">
            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.spark_balance }} {{ w.ticker }}</span>
            (<span class="usd-value"></span>)
           </td>
          </tr>
          {% elif 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>Blind Balance: </td>
           <td class="py-3 px-6">
            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.blind_balance }} {{ w.ticker }}</span>
            (<span class="usd-value"></span>)
           </td>
          </tr>
          <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>Anon Balance: </td>
           <td class="py-3 px-6">
            <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.anon_balance }} {{ w.ticker }}</span>
            (<span class="usd-value"></span>)
           </td>
          </tr>
          {% endif %}
          {% if debug_ui and donation_info %}
          <tr>
           <td colspan="2" class="py-3 px-6">
             <div class="p-4 bg-coolGray-100 dark:bg-gray-500 border border-coolGray-200 dark:border-gray-400 rounded-lg">
               <div class="flex items-start">
                 <div class="flex-shrink-0 mt-1">
                   {{ love_svg | safe }}
                 </div>
                 <div class="ml-3 flex-1">
                   <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Support BasicSwap Development!</h4>
                   <p class="text-sm text-gray-700 dark:text-gray-200 mb-3">
                     Consider donating {{ donation_info.coin_name }} to help fund development.
                   </p>

                   {% if donation_info.mweb_address %}
                   <div class="space-y-2">
                     <div class="flex flex-wrap gap-2">
                       <button type="button" data-fill-donation data-address="{{ donation_info.address }}" data-coin-type="LTC"
                               class="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-md transition-colors focus:ring-0 focus:outline-none">
                         Use LTC Address
                       </button>
                       <button type="button" data-fill-donation data-address="{{ donation_info.mweb_address }}" data-coin-type="MWEB"
                               class="px-3 py-1 bg-purple-500 hover:bg-purple-600 text-white text-xs rounded-md transition-colors focus:ring-0 focus:outline-none">
                         Use MWEB Address
                       </button>
                     </div>
                     <div class="text-xs text-gray-600 dark:text-gray-300">
                       Current type: <span id="donation-type-indicator">LTC</span>
                     </div>
                   </div>
                   {% else %}
                   <button type="button" data-fill-donation data-address="{{ donation_info.address }}" data-coin-type="{{ donation_info.coin_name }}"
                           class="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-md transition-colors focus:ring-0 focus:outline-none">
                     Auto-fill Donation Address
                   </button>
                   {% endif %}

                   <div class="mt-3 pt-2 border-t border-coolGray-200 dark:border-gray-400">
                     <a href="/donation" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">
                       Learn more about donations ->
                     </a>
                   </div>
                 </div>
               </div>
             </div>
           </td>
          </tr>
          {% 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-lg lg: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-lg lg: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="hidden md:block py-1 px-2 bg-blue-500 text-white text-lg lg: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="hidden md:block ml-2 py-1 px-2 bg-blue-500 text-white text-lg lg: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-lg lg:text-sm rounded-md focus:outline-none" onclick="setAmount(1, '{{ w.balance }}', {{ w.cid }}, '{{ w.blind_balance }}', '{{ w.anon_balance }}')">100%</button>

{# / PART #}

{% elif w.cid == '3' %}
{# LTC #}
<button type="button" class="hidden md:block py-1 px-2 bg-blue-500 text-white text-lg lg:text-sm rounded-md focus:outline-none" onclick="setAmount(0.25, '{{ w.balance }}', {{ w.cid }}, '{{ w.mweb_balance }}')">25%</button>
<button type="button" class="hidden md:block ml-2 py-1 px-2 bg-blue-500 text-white text-lg lg: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-lg lg:text-sm rounded-md focus:outline-none" onclick="setAmount(1, '{{ w.balance }}', {{ w.cid }}, '{{ w.mweb_balance }}')">100%</button>

{# / LTC #}

{% elif w.cid == '13' %}
{# FIRO #}
<button type="button" class="hidden md:block py-1 px-2 bg-blue-500 text-white text-lg lg:text-sm rounded-md focus:outline-none" onclick="setAmount(0.25, '{{ w.balance }}', {{ w.cid }}, '{{ w.spark_balance }}')">25%</button>
<button type="button" class="hidden md:block ml-2 py-1 px-2 bg-blue-500 text-white text-lg lg:text-sm rounded-md focus:outline-none" onclick="setAmount(0.5, '{{ w.balance }}', {{ w.cid }}, '{{ w.spark_balance }}')">50%</button>
<button type="button" class="ml-2 py-1 px-2 bg-blue-500 text-white text-lg lg:text-sm rounded-md focus:outline-none" onclick="setAmount(1, '{{ w.balance }}', {{ w.cid }}, '{{ w.spark_balance }}')">100%</button>

{# / FIRO #}
{% else %}
<button type="button" class="hidden md:block py-1 px-2 bg-blue-500 text-white text-lg lg:text-sm rounded-md focus:outline-none" onclick="setAmount(0.25, '{{ w.balance }}', {{ w.cid }})">25%</button>
<button type="button" class="hidden md:block ml-2 py-1 px-2 bg-blue-500 text-white text-lg lg: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-lg lg:text-sm rounded-md focus:outline-none" onclick="setAmount(1, '{{ w.balance }}', {{ w.cid }})">100%</button>
           {% endif %}
            </div>
            </div>
            </td>
           </td>
          </tr>
          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
           {% if w.cid in '6, 9' %} {# XMR | WOW #}
           <td class="hidden py-3 px-6 bold">Sweep All:</td>
           <td class="hidden 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>
          {# / PART #}
          {% elif w.cid == '3' and not is_electrum_mode %} {# LTC - only show in full node mode #}
          <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>
          {% elif w.cid == '13' %} {# FIRO #}
          <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="spark" {% if w.wd_type_from=='spark' %} selected{% endif %}>Spark</option>
               <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option>
              </select> </div>
            </div>
           </td>
          </tr>
          {% endif %}
          {# / LTC #}
          {# / FIRO #}
          {% if w.cid not in '6,9' %} {# Not XMR WOW #}
          <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">Fee Estimate:</td>
           <td class="py-3 px-6">
           <span class="coinname-value" data-coinname="{{ w.name }}">{{ w.est_fee }}</span>
          (<span class="usd-value fee-estimate-usd" data-decimals="8"></span>)
          </td>
          </tr>
          {% endif %}
         </table>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>

<section>
    <div class="px-6 py-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="lg:container mx-auto">
              <div class="py-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 in '6, 9' %}
                    {# XMR | WOW #}
                    <div class="w-full md:w-auto p-1.5 mx-1"> <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-lg lg: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>
                    {# / XMR | WOW #}
                    {% elif w.show_utxo_groups %}
                    {% elif is_electrum_mode %}
                    {# Hide UTXO Groups button in electrum/lite wallet mode #}
                    {% else %}
                    <div class="w-full md:w-auto p-1.5 mx-1"> <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-lg lg: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 %}
                    <div class="w-full md:w-auto p-1.5 mx-1"> <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-lg lg:text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="withdraw_{{ w.cid }}" value="Withdraw" data-confirm-withdrawal>{{ withdraw_svg | safe }} Withdraw {{ w.ticker }} </button></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>

{% if w.show_utxo_groups %}
  <section class="p-6">
   <div class="lg:container mx-auto">
    <div class="flex items-center">
      <h4 class="font-semibold text-2xl text-black dark:text-white">UTXO Groups</h4>
    </div>
   </div>
  </section>

  <section>
    <div class="px-6 py-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="lg: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 pb-6 overflow-x-auto">
                    <table class="w-full text-lg lg: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-md lg: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-md lg: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-lg lg: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-lg lg: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" data-confirm-utxo> {{ 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-lg lg: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="px-6 py-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="lg:container mx-auto">
              <div class="py-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-lg lg: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>
  {% endif %}

  {% endif %}
  {% endif %}
  {% endif %}
  <input type="hidden" name="formid" value="{{ form_id }}">
</form>

{% if w.havedata and not w.error %}
<section class="p-6">
  <div class="lg:container mx-auto">
    <div class="flex items-center">
      <h4 class="font-semibold text-2xl text-black dark:text-white">Transaction History</h4>
    </div>
  </div>
</section>

<section>
  <div class="px-6 py-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="lg:container mt-5 mx-auto">
            <div id="transaction-history-section" class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
              <div class="px-6">
                {% if is_electrum_mode %}
                <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                  Transaction history is not available in Light Wallet mode.
                </div>
                {% else %}
                <div id="tx-container" class="space-y-3 pb-6">
                  <div class="text-center py-8 text-gray-500 dark:text-gray-400">Loading transactions...</div>
                </div>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  {% if not is_electrum_mode %}
  <section id="tx-pagination-section" style="display: none;">
    <div class="px-6 py-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="lg:container mx-auto">
              <div class="py-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 items-center space-x-4">
                    <button id="prevPageTx" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-green-600 rounded-md transition duration-200 focus:ring-0 focus:outline-none">
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                      </svg>
                      Previous
                    </button>
                    <p class="text-sm font-heading dark:text-white">
                      Page <span id="currentPageTx">1</span> of <span id="totalPagesTx">1</span>
                    </p>
                    <button id="nextPageTx" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-green-600 rounded-md transition duration-200 focus:ring-0 focus:outline-none">
                      Next
                      <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  {% endif %}

  {% if is_electrum_mode %}
  <section id="tx-pagination-section">
    <div class="px-6 py-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="lg:container mx-auto">
              <div class="py-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  {% endif %}

{% endif %}

<div id="confirmModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
  <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-out"></div>
  <div class="relative z-50 min-h-screen px-4 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-500 rounded-lg max-w-md w-full p-6 shadow-lg transition-opacity duration-300 ease-out">
      <div class="text-center">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4" id="confirmTitle">Confirm Action</h2>
        <p class="text-gray-600 dark:text-gray-200 mb-6 whitespace-pre-line" id="confirmMessage">Are you sure?</p>
        <div class="flex justify-center gap-4">
          <button type="button" id="confirmYes"
                  class="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">
            Confirm
          </button>
          <button type="button" id="confirmNo"
                  class="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">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/static/js/pages/wallet-page.js"></script>

{% include 'footer.html' %}
</body>
</html>