{% extends "template-base.html" %}

{% block bodyclasses %}page-tx-sender{% endblock %}

{% block right_sidebar %}
<div id="connection-status" class="card">
  <div class="card-header bg-dark">
    <h3 class="card-title">Status</h3>
  </div><!--/.card-header-->
  <div class="card-body">
    <ul class="list-group list-group-flush">
      <li class="list-group-item" id="connection-status-label">XRP Test Net:</li>
      <li class="list-group-item disabled" id="connection-status-item">Not Connected</li>
      <li class="list-group-item" id="sending-address-label">Sending Address:</li>
      <li class="list-group-item disabled sending-address-item">(None)</li>
      <li class="list-group-item" id="balance-label">Test XRP Available:</li>
      <li class="list-group-item disabled" id="balance-item">(None)</li>
    </ul>
    <div id="tx-sender-history">
      <h5 class="m-3">Transaction History</h5>
      <ul class="list-group list-group-flush">
      </ul>
    </div>
  </div>
</div>
{% endblock %}

{% block main %}
<section class="container-fluid p-3">
  <h1>Transaction Sender</h1>

  <div class="content">
    <p>This tool sends transactions to the <a href="xrp-test-net-faucet.html">XRP Test Net</a> address of your choice so you can test how you monitor and respond to incoming transactions.</p>

    <form>
      <div class="form-group">
        <label for="destination_address">Destination Address</label>
        <input type="text" class="form-control" id="destination_address" aria-describedby="destination_address_help" value="rUCzEr6jrEyMpjhs4wSdQdz4g8Y382NxfM" />
        <small id="destination_address_help" class="form-text text-muted">Send transactions to this XRP Test Net address</small>
      </div>

      <h3>Send Transaction</h3>

      <div class="form-group" id="send_xrp_payment">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
          </div>
          <button class="btn btn-primary form-control" type="button" id="send_xrp_payment_btn">Send XRP Payment</button>
          <input id="send_xrp_payment_amount" class="form-control" type="number" aria-describedby="send_xrp_payment_amount_help" value="100000" min="1" max="10000000000" />
          <div class="input-group-append">
            <span class="input-group-text" id="send_xrp_payment_amount_help">drops of XRP</span>
          </div>
          <!-- Future feature: Optional custom destination tag -->
        </div>
        <small class="form-text text-muted">Send a <a href="send-xrp.html">simple XRP-to-XRP payment</a>.</small>
      </div><!-- /#send_xrp_payment -->

      <hr />

      <div class="form-group" id="send_partial_payment">
        <div class="progress mb-1" id="pp_progress">
          <div class="progress-bar progress-bar-striped w-0">&nbsp;</div>
          <small class="justify-content-center d-flex position-absolute w-100">(Getting ready to send partial payments)</small>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
          </div>
          <button class="btn btn-primary form-control" type="button" id="send_partial_payment_btn" disabled="disabled" autocomplete="off" title="(Please wait for partial payments setup to finish)">Send Partial Payment</button>
        </div>
        <small class="form-text text-muted">Delivers a small amount of XRP with a large <code>Amount</code> value, to test your handling of <a href="partial-payments.html">partial payments</a>.</small>
      </div><!-- /.form group for partial payment -->

      <hr />

      <div class="form-group" id="create_escrow">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
          </div>
          <button class="btn btn-primary form-control" type="button" id="create_escrow_btn">Create Escrow</button>
          <input class="form-control" type="number" value="60" min="5" max="10000" id="create_escrow_duration_seconds" />
          <div class="input-group-append">
            <span class="input-group-text">seconds</span>
          </div>
          <span class="input-group-text">
            (
            <input type="checkbox" id="create_escrow_release_automatically" value="1" />
            <label class="form-check-label" for="create_escrow_release_automatically">Finish automatically</label>)
          </span>
        </div>
        <small class="form-text text-muted">Create a <a href="escrow.html">time-based escrow</a> of 1 XRP for the specified number of seconds.</small>
        <div class="progress mb-1" style="display:none" id="escrow_progress">
          <div class="progress-bar progress-bar-striped w-0">&nbsp;</div>
          <small class="justify-content-center d-flex position-absolute w-100">(Waiting to release Escrow when it's ready)</small>
        </div>
      </div><!-- /.form group for create escrow -->

      <hr />

      <div class="form-group" id="create_payment_channel">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
          </div>
          <button class="btn btn-primary form-control" type="button" id="create_payment_channel_btn">Create Payment Channel</button>
          <input id="create_payment_channel_amount" class="form-control" type="number" aria-describedby="create_payment_channel_amount_help" value="100000" min="1" max="10000000000" />
          <div class="input-group-append">
            <span class="input-group-text" id="create_payment_channel_amount_help">drops of XRP</span>
          </div>
        </div>
        <small class="form-text text-muted">Create a <a href="payment-channels.html">payment channel</a> and fund it with the specified amount of XRP.</small>
      </div><!-- /.form group for create paychan -->

      <hr />

      <div class="form-group" id="send_issued_currency">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
          </div>
          <button class="btn btn-primary form-control" type="button" id="send_issued_currency_btn">Send Issued Currency</button>
          <input id="send_issued_currency_amount" class="form-control" type="text" value="100" /><!-- Note: HTML limits "number" inputs to IEEE 764 double precision, which isn't enough for the full range of issued currency amounts -->
          <div class="input-group-append">
            <span class="input-group-text" id="send_issued_currency_code">FOO</span><!-- TODO: custom currency codes -->
          </div>
        </div>
        <small class="form-text text-muted">Your destination address needs a <a href="trust-lines-and-issuing.html">trust line</a> to <span class="sending-address-item">(the test sender)</span> for the currency in question. Otherwise, you'll get tecPATH_DRY.</small>
      </div><!-- /.form group for issued currency payment -->

      <hr />

      <div class="form-group" id="trust_for">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text loader" style="display: none"><img class="throbber" src="assets/img/rippleThrobber.png" /></span>
          </div>
          <button class="btn btn-primary form-control" type="button" id="trust_for_btn">Trust for</button>
          <input id="trust_for_amount" class="form-control disabled" type="number" value="100000" />
          <div class="input-group-append">
            <span class="input-group-text" id="trust_for_currency_code">FOO</span>
          </div>
        </div>
        <small class="form-text text-muted">The test sender creates a <a href="trust-lines-and-issuing.html">trust line</a> to your account for the given currency.</small>
      </div><!-- /.form group for create trust line -->

    </form>
  </div>
</section>
{% endblock %}

{% block endbody %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
  <script type="application/javascript" src="assets/js/ripple-lib-1.1.2-min.js"></script>
  <script type="application/javascript" src="assets/vendor/bootstrap-growl.jquery.js"></script>
  <script type='application/javascript' src='assets/js/tx-sender.js'></script>
{% endblock %}