{% 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 %}

<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 p-3">
          <h2 class="text-4xl font-bold text-white tracking-tighter">
            <span class="inline-block align-middle"><img class="mr-2 h-16" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}"></span>{{ w.name }} Wallet - <span id="total-usd-value"></span>
          </h2>
          <p class="font-normal text-coolGray-200 dark:text-white pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
        </div>
        <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
          <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="updating" role="alert">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-blue-100 border border-blue-200 rounded-md">
      <div class="flex flex-wrap justify-between items-center -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
            <div class="w-auto p-1">
            {{ circular_info_svg | safe }}
            </div>
            </div>
            <div class="flex-1 p-1">
              <h3 class="font-medium text-sm text-blue-900">Updating, please wait...</h3>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close">
            <span class="sr-only">Close</span>
            {{ cross_close_svg | safe }}
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
{% endif %}

{% if w.havedata %}

{% if w.error %}
<section class="py-4" id="error" role="alert">
  <div class="container px-4 mx-auto">
   <div class="p-6 bg-red-100 border border-red-200 rounded-md">
    <div class="flex flex-wrap justify-between items-center -m-2">
     <div class="flex-1 p-2">
      <div class="flex flex-wrap -m-1">
       <div class="w-auto p-1">
      {{ circular_error_svg | safe }}
       </div>
       <div class="flex-1 p-1">
        <h3 class="font-medium text-sm text-red-900 error_msg">
         <p class="error_msg">Error: {{ w.error }}</p>
        </h3>
       </div>
      </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" data-dismiss-target="#error" aria-label="Close">
            <span class="sr-only">Close</span>
            {{ 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 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">
                        <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.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.unconfirmed }} {{ 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="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">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">
              <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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% else %}

{% 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">Stealth Address</td>
  <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.stealth_address }}</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">
    <button type="submit" class="flex flex-wrap 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>
  </td>
  <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.mweb_address }}</td>
</tr>
{% endif %} {# / LTC #}

{% if w.cid == '6' %} {# XMR #}
<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">Main Address</td>
  <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.main_address }}</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">
    <button type="submit" class="flex flex-wrap 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.ticker }} Sub Address </button>
  </td>
  <td colspan=2 class="py-3 px-6 monospace select-all">{{ w.deposit_address }}</td>
</tr>

{% else %}
<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">
    <button type="submit" class="flex flex-wrap 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.ticker }} Deposit Address</button>
  </td>
  <td colspan=2 class="py-3 px-6 monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td>
</tr>
{% endif %}

         </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">Withdraw</h4>
  </div>
</section>

<section>
  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
    <div class="pb-6 border-coolGray-100">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-full pt-2">
          <div class="container mt-5 mx-auto">
            <div class="pt-6 pb-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 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>
                        <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-4 pl-6 bold w-1/4">
                        <button type="submit" class="flex flex-wrap 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="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();">{{ withdraw_svg | safe }} Withdraw {{ w.ticker }}</button>
                      </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>
                      <td class="py-3 px-6">
                        <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" name="amt_{{ w.cid }}" value="{{ w.wd_value }}">
                      </td>
                    </tr>
                    <tr class="opacity-100 text-gray-500 dark:text-gray-100">
                      <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>
                      <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 -> To:</td>
                      <td class="py-3 px-6">
                        <div class="w-full md:flex-1">
                          <div class="relative">
                            {{ select_box_arrow_svg | safe }}
                            <select 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="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>
                      <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="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 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 hover:bg-coolGray-200 dark:hover:bg-gray-600">
                      <td class="py-3 px-6 bold">Fee Rate:</td>
                      <td class="py-3 px-6 bold">{{ w.fee_rate }}</td>
                      <td class="py-3 px-6">
                        <b>Est Fee:</b> {{ w.est_fee }}
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% if w.cid != '6' %} {# !XMR #}
{% 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="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">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 border-coolGray-100">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-full pt-2">
          <div class="container mt-5 mx-auto">
            <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
              <div class="px-6">
                <div class="flex flex-wrap justify-end">
                  <div class="w-full md:w-auto p-1.5">
                    <button 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>
  </div>
</section>

{% else %}

<section>
  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
    <div class="pb-6 border-coolGray-100">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-full pt-2">
          <div class="container mt-5 mx-auto">
            <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
              <div class="px-6">
                <div class="flex flex-wrap justify-end">
                  <div class="w-full md:w-auto p-1.5">
                    <button 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>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

<script>
const coinNameToSymbol = {
  'Bitcoin': 'BTC',
  'Particl': 'PART',
  'Particl Blind': 'PART',
  'Particl Anon': 'PART',
  'Monero': 'XMR',
  'Litecoin': 'LTC',
  'Firo': 'FIRO',
  'Dash': 'DASH',
  'PIVX': 'PIVX'
};

const getUsdValue = (cryptoValue, coinSymbol) => 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) => {
  console.log('updateUsdValue called with:', cryptoCell, coinFullName);
  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);
      console.log('usdValue:', usdValue);
      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)}`;
  }
};

// Call the function to calculate the USD values and total USD value when the DOM content is loaded
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();
});
</script>

{% include 'footer.html' %}

<script>
 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>

</body>
</html>