{%extends "basedialog.html"%}
{%import "commonExecuteCallback.js" as commons%}

{%block title %}Stash data to Cloudant{%endblock%}

{%block body%}
<form role="form">
    <div class="form-group">
        <div class="input-group">
            <label for="service-connection">Cloudant Connection</label>
            <select id="service-connection" class="form-control" style="margin:0;" required>
                <option disabled style="display: none;">Select or add a new Service Connection</option>
                {%for connection in connections%}
                <option>{{connection.name|escape}}</option>
                {%endfor%}
            </select>
            <span class="input-group-btn" style="vertical-align:bottom;display:table-cell;">
                <button id="add-service-connection" class="btn btn-default" type="button">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="dbName">Database</label>
        <input type="text" class="form-control" id="dbName" readonly value="{{dbName}}">
    </div>
</form>
{%endblock%}

{%block onOK%}
if ( !global.selectedConn){
    alert("you must select a cloudant connection");
    return false;
}
{% call(results) commons.ipython_execute(this._genDisplayScript(addOptionDict={'dbName':dbName}),prefix,extraCommandOptions="{'connection':global.selectedConn}") %}
    $('#results{{prefix}}').html({{results["error"] or results}});
    $('#loading{{prefix}}').css('display','none');
{% endcall %};
{%endblock%}

{%block onDialogShown%}
$("#service-connection").on('change', function() {
    global.selectedConn = htmlDecode($(this).val());
});
$("#add-service-connection").click(function(){
    var addNewConnCallback=function(newConn){
        newConn = newConn.trim()
        global.selectedConn = newConn;
        $('#service-connection').append('<option>' + htmlEncode(newConn) + '</option>');
        $('#service-connection :last-child').prop('selected', true);
    }
    {%include module + ":addNewConnection.dialog" %}
});
global.selectedConn = htmlDecode($('#service-connection').val());
{%endblock%}

{%block cellOuputHTML%}
<script>
    var htmlEncode = function(str) {
        return !str ? str : str
            .replace(/"/g, "&#34;")
            .replace(/&/g, "&#38;")
            .replace(/'/g, "&#39;")
            .replace(/</g, "&#60;")
            .replace(/>/g, "&#62;");
    }
    var htmlDecode = function(str) {
        return !str ? str : str
            .replace(/&#34;/g, "\"")
            .replace(/&#38;/g, "&")
            .replace(/&#39;/g, "'")
            .replace(/&#60;/g, "<")
            .replace(/&#62;/g, ">");
    }
</script>
<div id="loading{{prefix}}" style="display:none">
    <div style="width:100px;height:60px;left:47%;position:relative">
        <i class="fa fa-circle-o-notch fa-spin" style="font-size:48px"></i>
    </div>
    <div style="text-align:center">Stashing your data in Cloudant. Please wait...</div>
</div>
<div id="results{{prefix}}"></div>
{%endblock%}