{% extends "base.html.jinja" %}

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

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

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

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

    <form>
      <div class="form-group">
        <button class="btn btn-primary form-control" type="button" id="init_button">{% trans %}Initialize{% endtrans %}</button>
        <small class="form-text text-muted">{% trans %}Set up the necessary Testnet XRP addresses to send test payments.{% endtrans %}</small>
      </div><!--/.form-group-->

      <div class="form-group">
        <label for="destination_address">{% trans %}Destination Address{% endtrans %}</label>
        <input type="text" class="form-control" id="destination_address" aria-describedby="destination_address_help" value="rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe" />
        <small id="destination_address_help" class="form-text text-muted">{% trans %}Send transactions to this XRP Testnet address{% endtrans %}</small>
      </div>
      <p class="devportal-callout caution collapse" id="x-address-warning">{% trans %}<strong>Caution:</strong> This X-address is intended for use on Mainnet. Testnet addresses have a "T" prefix instead.{% endtrans %}</p>

      <h3>{% trans %}Send Transaction{% endtrans %}</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="{{currentpage.prefix}}assets/img/xrp-loader-96.png" alt="{% trans %}(loading){% endtrans %}"/></span>
          </div>
          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="send_xrp_payment_btn" disabled="disabled">{% trans %}Send XRP Payment{% endtrans %}</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">{% trans %}drops of XRP{% endtrans %}</span>
          </div>
          <!-- Future feature: Optional custom destination tag -->
        </div>
        <small class="form-text text-muted">{% trans %}Send a <a href="send-xrp.html">simple XRP-to-XRP payment</a>.{% endtrans %}</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">{% trans %}(Getting ready to send partial payments){% endtrans %}</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="{{currentpage.prefix}}assets/img/xrp-loader-96.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)">{% trans %}Send Partial Payment{% endtrans %}</button>
        </div>
        <small class="form-text text-muted">{% trans %}Deliver 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>.{% endtrans %}</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="{{currentpage.prefix}}assets/img/xrp-loader-96.png" /></span>
          </div>
          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="create_escrow_btn" disabled="disabled">{% trans %}Create Escrow{% endtrans %}</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">{% trans %}seconds{% endtrans %}</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">{% trans %}Finish automatically{% endtrans %}</label>)
          </span>
        </div>
        <small class="form-text text-muted">{% trans %}Create a <a href="escrow.html">time-based escrow</a> of 1 XRP for the specified number of seconds.{% endtrans %}</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">{% trans %}(Waiting to release Escrow when it's ready){% endtrans %}</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="{{currentpage.prefix}}assets/img/xrp-loader-96.png" /></span>
          </div>
          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="create_payment_channel_btn" disabled="disabled">{% trans %}Create Payment Channel{% endtrans %}</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">{% trans %}drops of XRP{% endtrans %}</span>
          </div>
        </div>
        <small class="form-text text-muted">{% trans %}Create a <a href="payment-channels.html">payment channel</a> and fund it with the specified amount of XRP.{% endtrans %}</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="{{currentpage.prefix}}assets/img/xrp-loader-96.png" /></span>
          </div>
          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="send_issued_currency_btn" disabled="disabled">{% trans %}Send Issued Currency{% endtrans %}</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">{% trans %}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.{% endtrans %}</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="{{currentpage.prefix}}assets/img/xrp-loader-96.png" /></span>
          </div>
          <button class="btn btn-primary form-control disabled needs-connection" type="button" id="trust_for_btn" disabled="disabled">{% trans %}Trust for{% endtrans %}</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">{% trans %}The test sender creates a <a href="trust-lines-and-issuing.html">trust line</a> to your account for the given currency.{% endtrans %}</small>
      </div><!-- /.form group for create trust line -->

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

{% block endbody %}
  <script type="application/javascript" src="{{currentpage.prefix}}assets/vendor/bootstrap-growl.jquery.js"></script>
  <script type="application/javascript" src="{{currentpage.prefix}}assets/js/submit-and-verify2.js"></script>
  <script type="application/javascript" src="{{currentpage.prefix}}assets/js/tx-sender.js"></script>
{% endblock %}

{% block analytics %}
    <script type="application/javascript">
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      "event": "page_info",
      "page_type": "Tool",
      "page_group": "Docs",
      "page_labels": {{currentpage.labels or []}}
    })
    </script>
{% endblock analytics %}
