<!DOCTYPE html>
<html lang="en">

  {% include 'head.html' %}

  <body id="page-top">

    {% include 'navbar.html' %}

    <section class="section2">
      <div class="container-slim">
        <div class="section-heading text-center">
          <h2>Wallet Info</h2>
          <h4>Address:</h4>
          <p class="slim small">{{ address }}</p>
          <br>
          <img src="data:image/png;base64,{{ qrcode }}" width=200 class="center">
          <hr><br>
          <h4>Balance</h4>
          <p class="inline">{{ balances[1] | from_atomic }} WOW ({{ (balances[0] - balances[1]) | from_atomic }} locked)</p><br />
          <p class="inline">Wallet height: {{ wallet_height['height'] }}</p><br />
          <p class="inline">Node height: {{ node_height['height'] }}</p><br />
          <p class="inline">Node address: {{ node_addr }}</p>
          <span class="dashboard-buttons">
            <div class="col-sm-6 dashboard-button">
              <a class="btn btn-lg btn-link btn-outline btn-xl js-scroll-trigger" href="#transfers">See Txes</a>
            </div>
            <div class="col-sm-6 dashboard-button">
              <a class="btn btn-lg btn-link btn-outline btn-xl js-scroll-trigger" href="#send">Send Tx</a>
            </div>
            <div class="col-sm-6 dashboard-button">
              <a class="btn btn-lg btn-link btn-outline btn-xl js-scroll-trigger" href="#secrets">See Secrets</a>
            </div>
          </span>
        </div>
      </div>
    </section>

    <section class="section1" id="transfers">
      <div class="container">
        <div class="section-heading text-center">
          <h2>Transfers</h2>
          <div style="width: 70%; text-align: center; margin: 0 auto;">
            <canvas id="wow_wallet"></canvas>
            <canvas id="wow_wallet_scatter"></canvas>
          </div>

          <script src="/static/js/Chart.bundle.min.js"></script>
          <link rel="stylesheet" href="/static/css/Chart.min.css"/>
          <script>
          var wownero = '#ff2ad4';
          var set_title = function(t){
            return {
              display: true,
              text: t,
              fontColor: 'white',
            }
          }

          var ctx = document.getElementById('wow_wallet').getContext('2d');
          new Chart(ctx, {
            type: 'line',
            data: {
              labels: [0, {% for i in sorted_txes %}'{{ sorted_txes[i].timestamp | datestamp  }}',{% endfor %}],
              datasets: [{
                label: 'Balance',
                backgroundColor: wownero,
                borderColor: wownero,
                data: [0, {% for i in sorted_txes %}{{ sorted_txes[i].total | from_atomic }},{% endfor %}],
                fill: false,
              }]
            },
            options: {
              title: set_title('Wownero Wallet Balance')
            }
          });
          </script>
          <table class="table table-striped table-hover table-responsive table-responsive-sm tx-table">
            <tr>
              <th>Date</th>
              <th>Type</th>
              <th>Tx ID</th>
              <th>Amount</th>
              <th>Confirmations</th>
              <th>Height</th>
              <th>Fee</th>
            </tr>
            {% if transfers %}
            {% for tx in transfers | sort(attribute='timestamp', reverse=True) %}
              {% if tx.type == 'pool' %}<tr class="table-warning">{% else %}<tr>{% endif %}
                <td>{{ tx.timestamp | datestamp }}</td>
                <td>{{ tx.type }}</td>
                <td><a href="https://wownero.club/transaction/{{ tx.txid }}" target="_blank">{{ tx.txid | truncate(12) }}</a></td>
                <td>{{ tx.amount | from_atomic }} WOW</td>
                <td>{{ tx.confirmations }}</td>
                <td>{{ tx.height }}</td>
                <td>{{ tx.fee | from_atomic }} WOW</td>
              </tr>
            {% endfor %}
            {% endif %}
          </table>
        </div>
      </div>
    </section>

    <section class="section2" id="send">
      <div class="container-slim">
        <div class="section-heading text-center">
          <h2>Send</h2>
          <i class="fa fa-qrcode fa-2x" id="startVideo"></i><br /><br />
          <div class="hidden" id="preview">
            <p>Show me a QR code!</p>
            <video id="video" width="300" height="200"></video>
            <br /><button id="stopVideo">Cancel</button>
          </div>
          <form method="POST" action="{{ url_for('wallet.send') }}" class="send-form">
              {{ send_form.csrf_token }}
              <div class="form-group">
                {{ send_form.address.label }}
                {{ send_form.address }}
              </div>
              <div class="form-group">
                {{ send_form.amount.label }}
                {{ send_form.amount }}
              </div>
              <ul>
                {% for field, errors in send_form.errors.items() %}
                    <li>{{ send_form[field].label }}: {{ ', '.join(errors) }}</li>
                {% endfor %}
              </ul>
              <input type="submit" value="Send" class="btn btn-link btn-outline btn-xl">
          </form>
        </div>
      </div>
    </section>

    <section class="section1" id="secrets">
      <div class="container">
        <div class="section-heading text-center">
          <h2>Secrets</h2>
          <p>You need to save the secrets below; write them down on a physical medium and keep it in a safe location. These can be used to restore your funds to another device in the future when you decide to quit being a bitch and use a real wallet.</p>
          <hr><br>
          <h3>Mnemonic Seed</h3>
          <p class="small">{{ seed }}</p>
          <br>
          <h3>Spend Key</h3>
          <p class="small">{{ spend_key }}</p>
          <br>
          <h3>View Key</h3>
          <p class="small">{{ view_key }}</p>
        </div>
      </div>
    </section>

    <section class="section2" id="send">
      <div class="container-slim">
        <div class="section-heading text-center">
          <h2>Delete Account</h2>
          <p>You can and should delete your wallet from the server. Please ensure you have copied the mnemonic seed from the secrets above if there are still funds associated with the keys.</p>
          <p>I highly recommend making a new wallet on your own and transferring funds there to ensure only you have full ownership and visibility into the private keys / seed. Not your keys, not your crypto!</p>
          <form method="POST" action="{{ url_for('auth.delete') }}" class="send-form">
              {{ delete_form.csrf_token }}
              {% for f in delete_form %}
                {% if f.name != 'csrf_token' %}
                  <div class="form-group">
                    {{ f.label }}
                    {{ f }}
                  </div>
                {% endif %}
              {% endfor %}
              <ul>
              {% for field, errors in delete_form.errors.items() %}
                  <li>{{ send_form[field].label }}: {{ ', '.join(errors) }}</li>
              {% endfor %}
              </ul>
              <input type="submit" value="Delete" class="btn btn-link btn-outline btn-xl">
          </form>
        </div>
      </div>
    </section>

    {% include 'footer.html' %}

    {% include 'scripts.html' %}

  </body>

</html>
