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

    <!-- copy code button -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
    <script>
        $(document).ready(function() {
            new ClipboardJS('.clipboard-btn');
        });
    </script>

{% endblock %}

{% block right_sidebar %}
  <div class="command-list-wrapper">
      <div class="toc-header">
        <h4>API Methods</h4>
      </div>
      <ul class="command-list" id="command_list"></ul>
  </div>
{% endblock %}

{% block main %}
  <section class="container-fluid pt-3 p-md-3 websocket-tool" id="wstool-1">
    <h1>WebSocket Tool</h1>
    <div class="api-method-description-wrapper">
      <h3><a href="server_info.html" class="selected_command">server_info</a></h3>
      <p class="blurb">Get information about the state of the server, formatted for human consumption.</p>
      <a class="btn btn-outline-secondary api-readmore" href="server_info.html">Read more</a>
    </div><!--/.api-method-description-wrapper-->

    <div class="api-input-area pt-4">
      <h4>Request</h4>
      <div class="request-body"></div>
      <div class="btn-toolbar justify-content-between" role="toolbar">
        <div class="btn-group mr-3" role="group">
          <button class="btn btn-outline-secondary send-request">Send request</button>
          <div class="input-group loader send-loader" style="display:none;">
            <span class="input-group-append">
              <img src="{{currentpage.prefix}}assets/img/xrp-loader-96.png" height="24" width="24" />
            </span><!--/.input-group-append-->
          </div><!--/.input-group.loader-->
        </div><!--/.btn-group-->
        <div class="btn-group request-options" role="group">
          <button class="btn btn-outline-secondary connection" data-toggle="modal" data-target="#wstool-1-connection-settings">Offline (Mainnet)</button>
          <div class="input-group loader connect-loader" style="display:none;">
            <span class="input-group-append">
              <img src="{{currentpage.prefix}}assets/img/xrp-loader-96.png" height="24" width="24" />
            </span><!--/.input-group-append-->
          </div><!--/.input-group.loader-->
          <button class="btn btn-outline-secondary permalink" data-toggle="modal" data-target="#wstool-1-permalink" title="Permalink"><i class="fa fa-link"></i></button>
          <button class="btn btn-outline-secondary curl" data-toggle="modal" data-target="#wstool-1-curl" title="cURL syntax"><i class="fa fa-terminal"></i></button>
        </div><!--/.request-options.btn-group-->
      </div><!--/.btn-toolbar-->
    </div><!--/.api-input-area-->

    <div class="api-response-area pt-4">
      <h4>Responses</h4>

      <div class="btn-toolbar justify-content-between response-options" role="toolbar">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text" id="wstool-1-keep-last-label">Keep last:</div>
          </div><!--/.input-group-prepend-->
          <input type="number" value="50" min="1" aria-label="Number of responses to keep at once" aria-describedby="wstool-1-keep-last-label" class="form-control keep-last">
        </div><!--/.input-group-->

        <div class="btn-group" role="group">
          <button class="btn btn-outline-secondary stream-pause" title="Pause Subscriptions">
            <i class="fa fa-pause"></i>
          </button>
          <button class="btn btn-outline-secondary stream-unpause" title="Unpause Subscriptions" style="display:none;">
            <i class="fa fa-play"></i>
          </button>
          <button class="btn btn-outline-secondary wipe-responses" title="Delete All Responses">
            <i class="fa fa-trash"></i>
          </button>
        </div><!--/.btn-group-->

      </div><!--/.btn-toolbar.response-options-->

      <div class="response-body-wrapper">
      </div>
    </div><!--/.api-response-area-->

  </section>

{% endblock %}

{% block endbody %}
  <!-- Modals for settings -->
  <div class="modal fade" id="wstool-1-connection-settings" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Connection Settings</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          {% for conn in [
            {
              "id": "wstool-1-connection-s1",
              "ws_url": "wss://s1.ripple.com/",
              "jsonrpc_url": "https://s1.ripple.com:51234/",
              "shortname": "Mainnet s1",
              "longname": "s1.ripple.com (Mainnet Public Cluster)"
            },
            {
              "id": "wstool-1-connection-xrplcluster",
              "ws_url": "wss://xrplcluster.com/",
              "jsonrpc_url": "https://xrplcluster.com/",
              "shortname": "Mainnet xrplcluster",
              "longname": "xrplcluster.com (Mainnet Full History Cluster)"
            },
            {
              "id": "wstool-1-connection-s2",
              "ws_url": "wss://s2.ripple.com/",
              "jsonrpc_url": "https://s2.ripple.com:51234/",
              "shortname": "Mainnet s2",
              "longname": "s2.ripple.com (Mainnet Full History Cluster)"
            },
            {
              "id": "wstool-1-connection-testnet",
              "ws_url": "wss://s.altnet.rippletest.net:51233/",
              "jsonrpc_url": "https://s.altnet.rippletest.net:51234/",
              "shortname": "Testnet",
              "longname": "s.altnet.rippletest.net (Testnet Public Cluster)"
            },
            {
              "id": "wstool-1-connection-devnet",
              "ws_url": "wss://s.devnet.rippletest.net:51233/",
              "jsonrpc_url": "https://s.devnet.rippletest.net:51234/",
              "shortname": "Devnet",
              "longname": "s.devnet.rippletest.net (Devnet Public Cluster)"
            },
            {
              "id": "wstool-1-connection-ammdevnet",
              "ws_url": "wss://amm.devnet.rippletest.net:51233/",
              "jsonrpc_url": "https://amm.devnet.rippletest.net:51234/",
              "shortname": "AMM-Devnet",
              "longname": "amm.devnet.rippletest.net (XLS-30d AMM Devnet)"
            },
            {
              "id": "wstool-1-connection-localhost",
              "ws_url": "ws://localhost:6006/",
              "jsonrpc_url": "http://localhost:5005/",
              "shortname": "Local server",
              "longname": "localhost:6006 (Local <code>rippled</code> Server on port 6006) <br/>\n              <small>(Requires that you <a href=\"install-rippled.html\">run <code>rippled</code></a> on this machine with default WebSocket settings)</small>"
            }
          ] %}
          <div class="form-check">
            <input class="form-check-input" type="radio" name="wstool-1-connection" id="{{conn.id}}" value="{{conn.ws_url}}" data-jsonrpcurl="{{conn.jsonrpc_url}}" data-shortname="{{conn.shortname}}"{% if loop.index == 1 %} checked{% endif %}>
            <label class="form-check-label" for="{{conn.id}}">
              {{conn.longname}}
            </label>
          </div>
          {% endfor %}

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
        </div><!--/.modal-footer-->
      </div><!--/.modal-content-->
    </div><!--/.modal-dialog-->
  </div><!--/.modal-->

  <div class="modal fade" id="wstool-1-permalink" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Permalink</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form><div class="form-group">
            <label for="permalink-box-1">Share the following link to load this page with the currently-loaded inputs:</label>
            <textarea id="permalink-box-1" class="form-control">https://xrpl.org/websocket-api-tool.html?server=wss%3A%2F%2Fs1.ripple.com%2F&req=%7B%22id%22%3A1%2C%22command%22%3A%22server_info%22%7D</textarea>
          </div></form>

        </div><!--/.modal-body-->
        <div class="modal-footer">
          <button alt="Copy to clipboard" class="btn btn-outline-secondary clipboard-btn" data-clipboard-target="#permalink-box-1" id="permalink-box-1button"><i class="fa fa-clipboard"></i></button>
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
        </div><!--/.modal-footer-->
      </div><!--/.modal-content-->
    </div><!--/.modal-dialog-->
  </div><!--/.modal-->

  <div class="modal fade" id="wstool-1-curl" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">cURL Syntax</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form><div class="form-group">
            <label for="curl-box-1">Use the following syntax to make the equivalent JSON-RPC request using <a href="https://curl.se/">cURL</a> from a commandline interface:</label>
            <textarea id="curl-box-1" class="form-control" rows="8">curl -H 'Content-Type: application/json' -d '{"method":"server_info","params":[{}]}' https://s1.ripple.com:51234/</textarea>
          </div></form>

        </div><!--/.modal-body-->
        <div class="modal-footer">
        <button alt="Copy to clipboard" class="btn btn-outline-secondary clipboard-btn" data-clipboard-target="#curl-box-1" id="curl-box-1button"><i class="fa fa-clipboard"></i></button>
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
        </div><!--/.modal-footer-->
      </div><!--/.modal-content-->
    </div><!--/.modal-dialog-->
  </div><!--/.modal-->

  <script type="text/javascript" src="{{currentpage.prefix}}assets/vendor/jsonlint.js"></script>
  <script type="text/javascript" src="{{currentpage.prefix}}assets/vendor/codemirror-js-json-lint.min.js"></script>
  <script type="text/javascript" src="{{currentpage.prefix}}assets/js/apitool-websocket.js"></script>
  <script type="text/javascript" src="{{currentpage.prefix}}assets/js/apitool-methods-ws.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 %}