{% load humanize %}
<div id="rebalances_div_{{count}}" class="w3-container w3-padding-small">
    <h2>Last {{count}} {{title}}</h2>
    <table class="w3-table-all w3-centered w3-hoverable">
      <tr>
        <th>Requested</th>
        <th>Start</th>
        <th>Stop</th>
        <th>Scheduled for</th>
        <th>Elapsed</th>
        <th>Value</th>
        <th>Fee Limit</th>
        <th>Target PPM</th>
        <th>Fees Paid</th>
        <th>Last Hop</th>
        <th>Status</th>
        <th>Hash</th>
        <th>Action</th>
      </tr>
      <tbody id="rebalances_{{count}}">
      </tbody>
    </table>
  </div>
  <script>
    function formatDuration(duration){
      return `${duration} minute${duration === 1 ? 's':''}`
    }
    statuses = {0: 'Pending', 1: 'In-Flight', 2: 'Successful', 3: 'Timeout', 4: 'No-Route', 5: 'Error', 6: 'Incorrect-Payment-Details', 7: 'Insufficient-Balance', 400: 'Rebalancer-Request-Failed', 406: 'No-Sources', 408: 'Rebalancer-Request-Timeout', 499: 'Cancelled'}
    transformations = {
      'requested': rebalance => ({innerHTML: formatDate(rebalance.requested), title: adjustTZ(rebalance.requested)}),
      'start': rebalance => ({innerHTML: formatDate(rebalance.start), title: rebalance.start ? adjustTZ(rebalance.start) : '---'}),
      'stop': rebalance => ({innerHTML: formatDate(rebalance.stop), title: rebalance.stop ? adjustTZ(rebalance.stop) : '---'}),
      'duration': rebalance => ({innerHTML: formatDuration(rebalance.duration)}),
      'elapsed': rebalance => ({innerHTML: formatDate(rebalance.start, rebalance.stop).replace(" ago", "")}),
      'value': rebalance => ({innerHTML: Number(rebalance.value).toLocaleString()}),
      'fee_limit': rebalance => ({innerHTML: Number(rebalance.fee_limit).toLocaleString()}),
      'ppm': rebalance => ({innerHTML: Math.round(rebalance.fee_limit*1000000/rebalance.value).toLocaleString()}),
      'fees_paid': rebalance => ({innerHTML: rebalance.status == 2 ? Number(rebalance.fees_paid).toLocaleString() : '---'}),
      'target_alias': rebalance => ({innerHTML: rebalance.target_alias !== '' ? rebalance.target_alias : '---'}),
      'status': rebalance => ({innerHTML: statuses[rebalance.status], title: rebalance.status}),
      'payment_hash': rebalance => ({innerHTML: (rebalance.payment_hash || '').length == 0 ? '---' :
           `<a href="/route?=${rebalance.payment_hash}" target="_blank">${rebalance.payment_hash.substring(0,7)}</a>`}),
      'action': rebalance => {
        const input = document.createElement("button")
        if (rebalance.status != 0){
          input.innerHTML = "🔂"
          input.title="Repeat this request" 
          input.onclick = async function(){
            const {value, fee_limit, outgoing_chan_ids, last_hop_pubkey, duration, target_alias} = rebalance
            const new_rebal = {value, fee_limit, outgoing_chan_ids, last_hop_pubkey, duration, target_alias}
            const response = await POST('rebalancer', {body: new_rebal})
            const table = input.parentElement.parentElement.parentElement
            table.prepend(use(transformations).render(response))
          } 
        }
        else {
          input.innerHTML = "❌"
          input.title="Cancel this request" 
          input.onclick = async function(){
            const response = await PUT(`rebalancer/${rebalance.id}`, {body: {status: 499}})
            
            const table = input.parentElement.parentElement.parentElement
            const index = input.parentElement.parentElement.rowIndex -1
            table.deleteRow(index)
            use(transformations).render(response, table.insertRow(index))
          }
        } 
        return {innerHTML: input}
      } 
    };
    document.addEventListener('DOMContentLoaded', async () => {
      const res = await GET('rebalancer', {data: {limit: '{{count}}', status: '{{status}}', payment_hash: '{{payment_hash}}', last_hop_pubkey:'{{last_hop_pubkey}}' }})
      if(res.errors) return
      if(res.results.length == 0){
        document.getElementById("rebalances_div_{{count}}").innerHTML = `<center><h1>You dont have any ${statuses['{{status}}']} rebalances yet.</h1></center>`
        return
      }

      const table = document.getElementById("rebalances_{{count}}"), template = use(transformations)
      res.results.forEach(rebalance => table.append(template.render(rebalance)));
    });
  </script>