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

    var dynamicConf = {};

    function initDynamicModalForm(modalId, formTemplateId = null, templateID = null){
        // read in all configurations into global variable (to skip naming issues)
        if (formTemplateId != null) {
            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()]);
            });
        }

        // Listen to click event

        $("#" + modalId).on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var modal = $(this);

            modal.find(" input, select").val('').change(); // Reset all inputs

            // Set dynamic form data
            $.each(button.attr(), function(fieldName, value) {
                if(fieldName.startsWith("data-")) {
                    fieldName = fieldName.substring(5); // remove prefix data-

                    // Case-insensitive search
                    var input = modal.find("input, select").filter(function() {
                        if (this.name.toLowerCase() == fieldName) {
                           if (this.type == "hidden" && modal.find("input[type=checkbox][name=" + fieldName + "]").length > 0)
                                return false; // Workaround for the default(false) boolean input
                           return true;
                       }
                       return false;
                    });

                    if (input.length > 0) {
                        if (input.prop("type") == "checkbox") { // special handling for checkboxes
                            input.prop("value", "true");
                            input.prop("checked", value == "true");

                            if (modal.find("input[type=hidden][name=" + fieldName + "]") == null) {
                                // Add default false value as a unchecked checkbox is not included in the post
                                input.parent().prepend("<input type='hidden' name='" + input.prop("name") + "' value='false' />");
                            }
                        } else {
                            input.val(value).change();
                        }
                    }
                }
            });
        });
    }
</script>

<div class="modal fade" id="actionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <div>
                        <label for="input-type" class="form-label">Type:</label>
                        <select id="input-type" class="form-control" name="type">
                            {{#availableActions}}
                            <option>{{.getName()}}</option>
                            {{/availableActions}}
                        </select>
                    </div>

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

<div id="action-conf-template" class="hidden">
    {{#actionConf}}
    <div id="{{.clazz.getName()}}">
        {{#.params}}
        <div class="form-group">
            <label for="input-{{.getName()}}" class="form-label">{{.getNiceName()}}:</label>

            {{#.isTypeString()}}<input type="text" class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">{{/#.isTypeString()}}
            {{#.isTypeNumber()}}<input type="number" class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">{{/#.isTypeNumber()}}
            {{#.isTypeBoolean()}}<input type="checkbox" id="input-{{.getName()}}" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
            {{#.isTypeSelection()}}
            <select class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">
                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
            </select>
            {{/#.isTypeSelection()}}

            {{#.getDescription()}}
            <div class="form-text">{{.getDescription()}}</div>
            {{/#.getDescription()}}
        </div>
        {{/.params}}
    </div>
    {{/actionConf}}
</div>