{% extends 'template.html' %}

{% block title %}Provisioning{% end %}

{% block body %}
<h2>Download configuration</h2>
{% if loading %}
<div id="response"></div>
<div id="progress">
    <div class="progress progress-striped active" id="loading">
      <div class="progress-bar"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
</div>
{% end %}

<div id="key-form" {% if loading %}style="display: none" {% end %}>
    <form class="form-horizontal" action="/" method="post">
        <div class="form-group{% if error %} has-error{% end %}">
            <label class="col-sm-1 control-label" for="node-key">Key</label>
            <div class="col-sm-11">
                <input id="node-key" name="node-key" class="form-control" type="text" placeholder="1234-5678-9ABC-DEFG" value="{{ key }}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-1 col-sm-11">
                <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-cloud-download"></span> Download configuration</button>
            </div>
            <div class="hidden">
                <input id="insecure-checkbox" type="checkbox" name="insecure"/>
            </div>
        </div>
    </form>
</div>

<div id="node-config"></div>

{% end %}


{% block scripts %}
{% if loading %}
<script>
    "use strict";
    // Do a POST, and wait for some results
    $.post('/results', {key: $('#node-key').val()})
            .done(function(data) {
                $('#loading').hide();
                $('#response').html(create_message(
                        data['type'],
                        data['icon'],
                        data['content'])
                );
                // If we got an error, show the form again
                if (data['type'] == 'danger') {
                    $('#key-form').show();
                }

                /*
                   Show some information about what we are using. It's safer to
                   do this than redirect because node may have restarted by the
                   time a redirect takes place and cause this IP to not be
                   accessible.
                */
                else if (data['type'] == 'success') {
                    var node_config_div = $('#node-config');

                    if('legs' in data && data['legs'].length) {
                        node_config_div.append('<h3>Legs</h3>');
                        data['legs'].forEach(function(l) {
                           node_config_div.append(display_leg_info(l));
                        });
                    }

                    if ('connected_ips' in data && data['connected_ips'].length) {
                        node_config_div.append('<h3>Connected IPs</h3>');
                        data['connected_ips'].forEach(function(c) {
                           node_config_div.append(display_connected_ip(c));
                        });
                    }

                    if ('cpe_nat_ips' in data && data['cpe_nat_ips'].length) {
                        node_config_div.append('<h3>CPE NAT IPs</h3>');
                        data['cpe_nat_ips'].forEach(function(c) {
                           node_config_div.append(display_cpe_nat_ip(c));
                        });
                    }
                    if ('routes' in data && data['routes'].length) {
                        node_config_div.append('<h3>Routes</h3>');
                        data['routes'].forEach(function(r) {
                           node_config_div.append(display_route_info(r));
                        });
                   }
                }
                else if (data['type'] == 'warning') {
                    // we need to re-send the download request
                    $('#insecure').click(function() {
                        $('#insecure-checkbox').prop('checked', true);
                        $('#key-form form').submit();
                        return false;
                    });
                }
            })
            .fail(function(xhr, status, error) {
                // Our request was terminated for some reason. This could be
                // due to bonding starting and trashing our current connection
                // to this website, or we could have legitimately lost it.
                $('#loading').hide();
                $('#key-form').show();
                var data = xhr.responseJSON;
                $('#response').html(create_message(data.type, data.icon, data.content));
            });
</script>
{% end %}
{% end %}