{%import "utils.js" as utils%}
{%import "commonExecuteCallback.js" as commons with context%}

<div class="container col-sm-12 well" id="datasets{{prefix}}">
    {%for f in args%} 
    <div class="row">
        <div class="form-group col-sm-10" style="padding-right:10px; margin-left:20px">
            <label for="{{f[1]+prefix}}">{{f[0]}}</label>
            <input type="text" class="form-control" id="{{f[1]+prefix}}" name="{{f[1]}}" value="{{this.options.get(f[1]) or f[2]}}">
        </div>
    </div>
    {%endfor%}
</div>

<script>
    $('#datasets{{prefix}} *').filter(':input').filter(function(){ return $(this).attr("name")})
    .change(function(){
        var options = {};
        options[$(this).attr("name")]=$(this).val();
        {%for f in args%}
            {% if not this.options.get(f[1]) and f[2] %}
            options['{{f[1]}}']='{{f[2]}}';
            {%endif%}
        {%endfor%}
        {{utils.savePixiedustOptions(this.options.get('cell_id'), 'options')}}
    });    
</script>