{% extends "layout.html" %}
{% block title %}{{title}}{% endblock %}
{% block head %}
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            var socket = get_socket()

            // the data is displayed in the "Received" section of the page
            account = {{ account|tojson|safe }}
            balance = {{ balance|tojson|safe }}
            update_limit = function () {
                asset = document.getElementById("asset").value
                document.getElementById("amount").placeholder = "Available "+balance[asset]
            }
            update_limit()
            socket.on('user.'+account+'.balance', function(msg) {
                //console.log(JSON.stringify(msg))
                balance = msg
                update_limit()
            });
        });
    </script>
  {{ super() }}
{% endblock %}

{% block page %}{{title}}{% endblock %}
{% block heading %}
  {{ super() }}
{% endblock %}

{% block content %}
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">{{ _("Transfer") }}</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            {{ _("Transfer") }}
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                {% if msg %}
                            <div class="alert alert-danger alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                {{ (msg) }}
                            </div>
                                {% endif %}
                                <div class="col-lg-6">
                                    <form role="form" method="post" action="">
                                        <div class="form-group">
                                            <label>{{ _("Receiver") }}</label>
                                            <select name="receiver" class="form-control">
                                                {% for contact in contacts %}
                                                <option>{{ contact }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{{_("Asset")}}</label>
                                            <select name="asset" id="asset" class="form-control" onchange="update_limit()">
                                                {% for asset in balance %}
                                                <option>{{ asset }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>{{ _("Amount") }}</label>
                                            <input name="amount" id="amount" class="form-control" placeholder="Available 0.0">
                                        </div>
                                        <div class="form-group">
                                            <label>{{ _("Memo") }}</label>
                                            <input name="memo" class="form-control" placeholder="memo">
                                        </div>
                                        <button type="submit" class="btn btn-success">Submit Button</button>
                                        <button type="reset" class="btn btn-default">Reset Button</button>
                                    </form>
                                </div>
                                <!-- /.col-lg-6 (nested) -->
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->

{% endblock %}

