<script>
    $(function(){
        initDynamicModalForm("actionModal", "action-data-conf", "data-conf-template");
    });


    var dynamicConf = {};

    function initDynamicModalForm(modalId, formTemplateId, templateID){
        // read in all configurations into global variable (to skip naming issues)
        dynamicConf[formTemplateId] = [];
        $("#"+templateID+" div").each(function(){
            dynamicConf[formTemplateId][$(this).attr("id")] = $(this).html();
        });
        // Update dynamic inputs
        $("#"+modalId+" select[name=type]").change(function(){
            $("#"+modalId+" #"+formTemplateId).html(dynamicConf[formTemplateId][$(this).val()]);
        });
        // click event
        $("#"+modalId).on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var modal = $(this);
            // Reset all inputs
            modal.find("#"+formTemplateId).empty(); // clear form div

            // select dynamic form
            var selector = modal.find("select[name=type]");
            selector.val(button.data("type"));
            selector.change(); // Update dynamic inputs
            // set dynamic form data
            $.each(button.attr(), function(fieldName, value) {
                if(fieldName.startsWith("data-")) {
                    fieldName = fieldName.substring(5);
                    // case insensitive search
                    input = modal.find("input").filter(function() {
                           return this.name.toLowerCase() == fieldName;
                    });
                    if (input.attr("type") == "checkbox") { // special handling for checkboxes
                        input.attr("value", "true");
                        if (value=="true") input.attr("checked", "true");
                        else               input.removeAttr("checked");
                        // Add default false value as a unchecked checkbox is not included in the post
                        input.parent().prepend("<input type='hidden' name='"+input.attr("name")+"' value='false' />");
                    } else {
                        input.val(value);
                    }
                }
            });
        });
    }
</script>

<div class="modal fade" id="actionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Action</h4>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label">Type:</label>
                        <select class="form-control" name="type">
                            {{#availableActions}}
                            <option>{{.getName()}}</option>
                            {{/availableActions}}
                        </select>
                    </div>

                    <hr>
                    <div id="action-data-conf">
                        <!-- Dynamic form -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="data-conf-template" class="hidden">
    {{#actionConf}}
    <div id="{{.clazz.getName()}}">
        {{#.params}}
        <div class="form-group">
            <label class="control-label">{{.getNiceName()}}:</label>
            {{#.isTypeString()}}<input type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
            {{#.isTypeInt()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeInt()}}
            {{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
            {{#.isTypeEnum()}}
            <select class="form-control" name="{{.getName()}}">
                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
            </select>
            {{/#.isTypeEnum()}}
        </div>
        {{/.params}}
    </div>
    {{/actionConf}}
</div>