{% extends "base.html" %}
{% block title %} {{ block.super }} - Batch Open{% endblock %}
{% block content %}
{% load humanize %}
<script>
  const channelsList = GET('channels', {data: {is_open:true} })
  async function check_pubkey(input, num_line){
    if(input.value.trim().length != '66') {
        byId("pubkey_tag_"+num_line).innerHTML = '❌'
        byId("pubkey_tag_"+num_line).title = 'Invalid pubkey.'   
        return     
    }
    for (ch of (await channelsList).results){
      if (ch.remote_pubkey == input.value.trim()){
        byId("pubkey_tag_"+num_line).innerHTML = '⚠️'
        byId("pubkey_tag_"+num_line).title = 'You already have a channel with this peer.'
        return
      }
    }
    console.log(input.value.trim().length)
    console.log(input.value.trim().length != 66)
    byId("pubkey_tag_"+num_line).innerHTML = ''
  }
  function update_total(input){
    let total = [...document.querySelectorAll('[id^="amt"]')].map(i => parseInt(i.value) || 0).reduce((prev, curr) => prev + curr)
    document.getElementById("remaining").innerHTML = "Remaining Onchain Balance: " + ({{balances.total_balance}} - total).toLocaleString()
    document.getElementById("total").innerHTML = "Total: " + total.toLocaleString()
  }
</script>
<div class="w3-container w3-padding-small">
  <h2>Batch Open Up To 10 Channels</h2>
  <form action="/batchopen/" method="post">
    {% csrf_token %}
    <table class="w3-table-all w3-centered w3-hoverable">
      <tr>
        <th>ID</th>
        <th></th>
        <th>Pubkey</th>
        <th>Amount (sats)</th>
      </tr>
      {% for num in iterator %}
      <tr>
        <td>{{ num }}</td>
        <td id="pubkey_tag_{{ num }}"></td>
        <td><input style="text-align:center;min-width:800px" oninput="check_pubkey(this, {{ num }})" id="pubkey{{ num }}" name="pubkey{{ num }}" value=""></td>
        <td><input style="text-align:center" oninput="update_total(this)" id="amt{{ num }}" type="number" min="0" step="1" name="amt{{ num }}" value=""></td>
      </tr>
      {% endfor %}
      <tr><td>#</td><td></td><td id="remaining" style="min-width:800px">Remaining Onchain Balance: {{balances.total_balance|intcomma}}</td><td id="total">Total: 0</td></tr>
    </table>
    <ul>
      Opening Fee Rate (sats/vbyte): <input style="text-align:center" id="fee_rate" type="number" min="1" name="fee_rate" value="">
      <input type="submit" value="OK">
    </ul>
  </form>
</div>
{% endblock %}