<!-- guiElements.form -->
<script type="text/x-just" data-just="guiElements.form">
    <!-- guiElements.form -->

    <%[ wrapper_classes %>
       col-lg-12 col-xs-12 col-sm-12 col-md-12
    <%] %>

    <%[ title %>
        <% if(value.title){ %><h2><%- opt.title || capitalizeString(opt.name) %></h2><% } %>
    <%] %>

    <%[ main_input %>
        <div class="form_content">
            <~ guiElement.realElements>
                <div id="gui<%- guiElement.element_id %>" class="row">
                    <% if(Object.keys(guiElement.realElements).length > 0) { %>
                        <% for(var i in guiElement.realElements) { %>
                            <%= guiElement.realElements[i].render() %>
                        <% } %>
                    <% } else { %>
                        <div class="col-lg-12 col-xs-12 col-sm-12 col-md-12">
                            <input type="text" class="form-control" readonly disabled  value="This form is empty">
                        </div>
                    <% } %>
                </div>
            <~>
        </div>
    <%] %>

    <%[ readonly_input %>
        <%* main_input %>
    <%] %>

    <%! guiElements.base %>
</script>

<!-- guiElements.ansible_json -->
<script type="text/x-just" data-just="guiElements.ansible_json">
    <!-- guiElements.ansible_json -->

    <% if(Object.keys(guiElement.realElements).length > 0) { %>
        <%[ wrapper_classes %>
           col-lg-12 col-xs-12 col-sm-12 col-md-12
        <%] %>
    <% } %>

    <%[ wrapper_style %>
            margin-bottom: 0px;
    <%] %>

    <%[ main_input %>
        <~ guiElement.realElements>
            <div id="gui<%- guiElement.element_id %>" class="row">
                <% if(Object.keys(guiElement.realElements).length > 0) { %>
                    <% for(var i in guiElement.realElements) { %>
                         <% if(opt.divider) { %>
                            <div class="form-group col-lg-12 col-xs-12 col-sm-12 col-md-12" style="margin-bottom:0px;">
                                <hr style='border-width:2px; margin-top:5px; margin-bottom:10px;'>
                            </div>
                        <% } %>
                        <%= guiElement.realElements[i].render() %>
                    <% } %>
                    <% if(opt.divider) { %>
                        <div class="form-group col-lg-12 col-xs-12 col-sm-12 col-md-12" style="margin-bottom:0px;">
                            <hr style='border-width:2px; margin-top:5px; margin-bottom:10px;'>
                        </div>
                    <% } %>
                <% } else { %>
                    <div class="col-lg-12 col-xs-12 col-sm-12 col-md-12">
                        <input type="text" class="form-control" readonly disabled  value="This field is empty">
                    </div>
                <% } %>
            </div>
        <~>
    <%] %>

    <%[ readonly_input %>
        <%* main_input %>
    <%] %>

    <%! guiElements.base %>
</script>