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

{% block right_sidebar %}
  <aside class="p-3">
    <h2>API Methods</h2>
    <ul id='command_list'>
        <li class='selected'><a href='#server_info'>server_info</a></li>
        <li><a href='#server_state'>server_state</a></li>
        <li><a href='#ping'>ping</a></li>
        <br/>
        <li><a href='#subscribe'>subscribe</a></li>
        <li><a href='#unsubscribe'>unsubscribe</a></li>
        <br/>
        <li><a href='#ledger'>ledger</a></li>
        <li><a href='#ledger_closed'>ledger_closed</a></li>
        <li><a href='#ledger_current'>ledger_current</a></li>
        <li><a href='#ledger_entry'>ledger_entry</a></li>
        <br/>
        <li><a href='#account_info'>account_info</a></li>
        <li><a href='#account_lines'>account_lines</a></li>
        <li><a href='#account_offers'>account_offers</a></li>
        <li><a href='#account_tx'>account_tx</a></li>
        <li><a href='#account_currencies'>account_currencies</a></li>
        <br/>
        <li><a href='#transaction_entry'>transaction_entry</a></li>
        <li><a href='#tx'>tx</a></li>
        <li><a href='#tx_history'>tx_history</a></li>
        <br/>
        <li><a href='#sign'>sign</a></li>
        <li><a href='#submit'>submit</a></li>
        <br/>
        <li><a href='#ripple_path_find'>ripple_path_find</a></li>
        <li><a href='#path_find'>path_find</a></li>
        <li><a href='#book_offers'>book_offers</a></li>
    </ul>
  </aside>
{% endblock %}

{% block main %}
  <section class="container-fluid p-3">
    <h1>WebSocket Tool</h1>
    <div id='online_state'>Offline</div>
    <div id='command_wrapper'>
        <div id='command_table'>
            <div id='io_wrapper'>
                <div id='input' class='io'>
                    <div id='test_warning' class='alert alert-danger' style='display:none;'>
                        <h4>Test accounts only!</h4>
                        <p>Never submit account secrets to a server you do not control, unless you are prepared to lose ownership of the account!</p>
                    </div>
                    <div style="clear:both;"></div>
                    <h3 id='selected_command' title='Reference information'>server_info</h3>
                    <p id='description'></p>
                    <div id='invalid'>Invalid JSON</div>
                    <p>JSON</p>
                    <div id='request'></div>
                    <div id='request_options'>
                        <div class="button btn btn-primary api" id='request_button'>Send request</div>
                    </div>
                </div>
                <div id='output' class='io'>
                    <h2>Response</h2>
                    <div>
                        <img class="loader" src="assets/img/rippleThrobber.png" style="vertical-align: middle; display:none;"/>
                    </div>
                    <p id='info'></p>
                    <div id='response'></div>
                    <div id='tooltip'></div>
                    <div id='stream_output'>
                        <h3>Stream output</h3>
                        <ul class='toolbar'>
                            <li id='stream_show'>show</li>
                            <li id='stream_pause'>pause</li>
                        </ul>
                        <p id='status'></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </section>
{% endblock %}

{% block endbody %}
  <link rel='stylesheet' type='text/css' href='assets/css/api-tools.css'/>
  <link rel='stylesheet' type='text/css' href='assets/vendor/codemirror.css'/>
  <script type='text/javascript' src='assets/js/es5-shim.js'></script>
  <script type='text/javascript' src='assets/vendor/codemirror.min.js'></script>
  <script type='text/javascript' src='assets/vendor/cm-javascript.min.js'></script>
  <script type='text/javascript' src='assets/js/ripple-0.11.0-min.js'></script>
  <script type='text/javascript' src='assets/js/apitool-websocket.js'></script>
{% endblock %}