{% extends "base.html" %}
{% block title %} {{ block.super }} - Balances{% endblock %}
{% block content %}
{% load humanize %}
<button style="position:absolute;top:50px;right:50px;" id="open" class="open-button" onclick="openForm()">Broadcast Transaction</button>
<div style="display:none;position:absolute;top:30px;right:30px;padding:30px;z-index:11;background-color:rgb(225, 145, 50);border-style:solid;border-width:3px;" id="tx" class="w3-round w3-container">
    <h1>Broadcast A Raw Transaction</h1>
    <textarea id="raw_tx" type="text" placeholder="Raw TX Data" name="raw_tx"></textarea>
    <button style="margin-left: 10px;" type="button" class="btn" onclick="broadcastTx()">Broadcast</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</div>
<div style="display:none;position:absolute;top:30px;right:30px;padding:30px;z-index:11;background-color:rgb(225, 145, 50);border-style:solid;border-width:3px;" id="calc" class="w3-round w3-container">
  <h1>Estimate A Fee Bump</h1>
  <input title="Desired Fee Rate" id="desired" type="number" placeholder="Desired Fee Rate" name="desired">
  <input title="Parent TX Fees" id="fees_paid" type="number" placeholder="Parent TX Fees" name="fees_paid">
  <input title="Parent TX Size" id="parent_size" type="number" placeholder="Parent TX Size" name="parent_size">
  <button type="button" class="btn" onclick="calcFee()">Estimate</button>
  <button type="button" class="btn cancel" onclick="closeCalcForm()">Close</button>
  <h2 style="display:none" id="estimated"></h2>
</div>
{% if pending_sweeps %}
<div class="w3-container w3-padding-small">
  <h2>Pending Sweeps</h2>
  <table class="w3-table-all w3-centered w3-hoverable">
    <tr>
      <th width=40%>Outpoint</th>
      <th>Amount</th>
      <th>Type</th>
      <th>Requested Rate</th>
      <th>Target Rate</th>
      <th>Conf Target</th>
      <th>Total Attempts</th>
      <th>Next Attempt</th>
      <th>Force</th>
    </tr>
    {% for sweep in pending_sweeps %}
    <tr>
      <td><a href="{{ network_links }}/{{ network }}tx/{{ sweep.txid_str }}" target="_blank">{{ sweep.txid_str }}</a></td>
      <td>{{ sweep.amount_sat|intcomma }}</td>
      <td>{% if sweep.witness_type == 0 %}Unknown{% elif sweep.witness_type == 1 %}Commitment Time Lock{% elif sweep.witness_type == 13 %}Commitment Anchor{% else %}{{ sweep.witness_type }}{% endif %}</td>
      <td>{% if sweep.requested_sat_per_vbyte == 0 %}---{% else %}{{ sweep.requested_sat_per_vbyte|intcomma }}{% endif %}</td>
      <td>{{ sweep.sat_per_vbyte|intcomma }}</td>
      <td>{{ sweep.requested_conf_target|intcomma }}</td>
      <td>{{ sweep.broadcast_attempts|intcomma }}</td>
      <td>{{ sweep.next_broadcast_height|intcomma }}</td>
      <td>{% if sweep.force %}Yes{% else %}No{% endif %}</td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endif %}
{% if utxos %}
<div class="w3-container w3-padding-small">
  <h2>Balances</h2>
  <table class="w3-table-all w3-centered w3-hoverable">
    <tr>
      <th width=30%><a href="/addresses" target="_blank">Addresses</a></th>
      <th>Amount</th>
      <th width=40%>Outpoint</th>
      <th>Confirmations</th>
      <th>Fee Bumps <span onclick="calcForm()" style="font-size:40px; float: right; margin-right: 10px;cursor: pointer;">🖩</span></th>
    </tr>
    {% for utxo in utxos %}
    <tr>
      <td><a href="{{ network_links }}/{{ network }}address/{{ utxo.address }}" target="_blank">{{ utxo.address }}</a></td>
      <td>{{ utxo.amount_sat|intcomma }}</td>
      <td><a href="{{ network_links }}/{{ network }}tx/{{ utxo.outpoint.txid_str }}" target="_blank">{{ utxo.outpoint.txid_str }}</a></td>
      <td>{{ utxo.confirmations|intcomma }}</td>
      <td>
        {% if utxo.confirmations == 0 %}
          <form onsubmit="bumpFee(this,'{{ utxo.outpoint.txid_str }}','{{ utxo.outpoint.output_index }}'); return false">
            <span style="float:none" class="input" data-unit="sats/vbyte" title="Fee bump an unconfirmed tx">
              <input style="width:225px" id="target_fee" type="number" min="1" max="100" placeholder="New Fee Rate" name="target_fee">
            </span>
          </form>
        {% else %}
          ---
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endif %}
{% if transactions %}
<div class="w3-container w3-padding-small">
  <h2>Transactions</h2>
  <table class="w3-table-all w3-centered w3-hoverable">
    <tr>
      <th width=35%>TX Hash</th>
      <th>Amount</th>
      <th>Block Height</th>
      <th>Fees</th>
      <th width=25%>Label</th>
    </tr>
    {% for transaction in transactions %}
    <tr>
      <td><a href="{{ network_links }}/{{ network }}tx/{{ transaction.tx_hash }}" target="_blank">{{ transaction.tx_hash }}</a></td>
      <td>{{ transaction.amount|intcomma }}</td>
      <td>{% if transaction.block_height == 0 %}---{% else %}<a href="{{ network_links }}/{{ network }}block/{{ transaction.block_height }}" target="_blank">{{ transaction.block_height|intcomma }}</a>{% endif %}</td>
      <td>{{ transaction.fee|intcomma }}</td>
      <td>{{ transaction.label }}</td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endif %}
{% if not utxos and not transactions %}
<div class="w3-container w3-padding-small">
  <center><h1>No wallet transactions found!</h1></center>
</div>
{% endif %}
<script>
  async function bumpFee(form, txid, index){
    var target_fee = form.target_fee.value
    await POST('bumpfee', {body: {"target_fee":target_fee,"txid":txid,"index":index}})
    showBannerMsg('Fee rate for tx '+txid, target_fee)
    form.innerHTML = 'Updating...'
  }
  function openForm(){
    byId("tx").style.display = "block";
    byId("open").style.display = "none";
  }
  function closeForm(){
    byId("open").style.display = "block";
    byId("tx").style.display = "none";
  }
  function broadcastTx(){
    tx_data = byId("raw_tx").value
    byId("raw_tx").value = ''
    Sync.POST('broadcast_tx', {body:{"raw_tx":tx_data}}, returnMsg)
  }
  function returnMsg(msg){
    if(msg.error) showBannerMsg('', msg.error, true)
    if(msg.message) showBannerMsg('', msg.message, true)
    closeForm()
  }
  function calcForm(){
    byId("calc").style.display = "block";
  }
  function closeCalcForm(){
    byId("calc").style.display = "none";
    byId('estimated').style.display = "none";
  }
  function calcFee(){
    const sweep_size = 111
    desired = Number(byId("desired").value)
    fees_paid = Number(byId("fees_paid").value)
    parent_size = Number(byId("parent_size").value)
    target_rate = (((parent_size+sweep_size)*desired)-fees_paid)/sweep_size
    byId('estimated').innerHTML = "Fee Rate Estimate: " + target_rate.toFixed(2) + " or ~" + (Math.floor(target_rate)+1) + " sats/vB"
    byId('estimated').style.display = "block";
  }
</script>
{% endblock %}