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

    <%[ element %>
        <div class="form-group

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

            gui-element
            gui-element-<%- guiElement.name %>
            gui-field-<%- opt.name %>
            <%- opt.css_class || '' %>
            <%- guiElement.css_class || '' %>

            <% if(opt.hidden){ %> hidden-field <% } %>

            <% if(opt.required){ %>gui-required<% }else{ %>gui-not-required<% } %> "

            style="
            <%[ wrapper_style %> <%] %>
            <%* wrapper_style %>
            "

            data-title="<%- opt.title || capitalizeString(opt.name) %>"
            id="gui<%- guiElement.element_id %>"
        >

            <%[ title %>
                 <% if(!opt.hide_title) { %>
                    <label class="control-label"><%- opt.title || capitalizeString(opt.name) %></label>
                 <% } %>
            <%] %>
            <%* title %>

            <%[ main_input_group %>
                    <%[ main_input %>
                        <div>guiElements.base</div>
                    <%] %>
                    <%[ readonly_input %>
                        <~ guiElement.db_value>
                            <input type="text"
                                class="form-control"
                                <%= set_api_options(opt, guiElement) %>
                                id="<%- guiElement.element_id %>"
                                value="<%- guiElement.insertValue(guiElement.db_value)  %>">
                        <~>
                    <%] %>

                    <% if(opt.readOnly){ %>
                        <div class="readonly " >
                            <%* readonly_input %>
                        </div>
                    <% }else{ %>
                        <%* main_input %>
                    <% } %>
            <%] %>
            <%* main_input_group %>

            <%[ description %>
                <div class="help-block"><%- opt.description || opt.help || '' %></div>
            <%] %>
            <%* description %>
        </div>
    <%] %>

    <%[ input_addons %>
        <% if(guiElement.opt.hidden_button && !guiElement.isRequired()) { %>
            <div class="input-group-append guiElement-revert-addon" style="cursor: pointer;"
                <%= justOn('click', function()
                    {
                        guiElement.setHidden(true);
                    })
                %>
             >
                <span class="input-group-text">
                    <span class='fa fa-eye-slash' ></span>
                </span>
            </div>
        <% } %>
        <% if(guiElement.opt.default){ %>
            <div class="input-group-append guiElement-revert-addon" onclick="$('#<%- guiElement.element_id %>').val('<%- guiElement.opt.default %>'); $('#<%- guiElement.element_id %>').trigger('change');" style="cursor: pointer;" >
                <span class="input-group-text">
                    <span class='fa fa-repeat' ></span>
                </span>
            </div>
        <% } %>
        <div class="input-group-append guiElement-clear-addon" onclick="$('#<%- guiElement.element_id %>').val(''); $('#<%- guiElement.element_id %>').trigger('change');" style="cursor: pointer;" >
            <span class="input-group-text">
                <span class='fa fa-times' ></span>
            </span>
        </div>
    <%] %>

    <%* element %>
</script>

<!-- guiElements.dynamic -->
<script type="text/x-just" data-just="guiElements.dynamic">
    <!-- guiElements.dynamic -->
    <div id="gui<%- guiElement.element_id %>" style="display: contents;">
    <%= guiElement.realElement.render(opt) %>
    </div>
</script>

<!-- guiElements.inner_api_object -->
<script type="text/x-just" data-just="guiElements.inner_api_object">
    <!-- guiElements.inner_api_object -->
    <%[ wrapper_classes %>
       col-lg-12 col-xs-12 col-sm-12 col-md-12
    <%] %>
    <%[ main_input %>
        <div id="gui<%- guiElement.element_id %>" class="row">
            <% for(var i in guiElement.realElements) { %>
                <% if(Object.keys(guiElement.realElements[i]).length > 1) { %>
                    <div class="col-lg-12 col-xs-12 col-sm-12 col-md-12">
                        <div>
                            <label class="control-label"><%- capitalizeString(i) %></label>
                        </div>
                        <div class="row">
                            <% for(var j in guiElement.realElements[i]) { %>
                                    <%= guiElement.realElements[i][j].render() %>
                            <% } %>
                        </div>
                    </div>
                <% } else { %>
                        <% for(var j in guiElement.realElements[i]) { %>
                                <%= guiElement.realElements[i][j].render() %>
                        <% } %>
                <% } %>
            <% } %>
        </div>
    <%] %>
    <%! guiElements.base %>
</script>

<!-- guiElements.json -->
<script type="text/x-just" data-just="guiElements.json">
    <!-- guiElements.json -->
    <% if(Object.keys(guiElement.realElements).length > 0) { %>
        <%[ wrapper_classes %>
           col-lg-12 col-xs-12 col-sm-12 col-md-12
        <%] %>
    <% } %>
    <%[ 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) { %>
                        <%= 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 field is empty">
                    </div>
                <% } %>
            </div>
        <~>
    <%] %>

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

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

<!-- guiElements.string -->
<script type="text/x-just" data-just="guiElements.string">
    <!-- guiElements.string [type=<%- opt.type %>, format=<%- opt.format %>] -->
    <%[ input_type %>text<%] %>
    <%[ main_input %>
        <div class="input-group">
            <~ guiElement.db_value>
                <% if(guiElement.isRendered() && !guiElement.isEqual(guiElement.db_value)){ %>
                    <span class="input-group-prepend db_value_input">
                        <div class="input-group-text"
                         data-toggle="tooltip" title="Previous value: <%- guiElement.insertValue(guiElement.db_value) %>" >
                            <%- guiElement.insertValue(sliceLongString(guiElement.db_value, 5)) %>
                            <i class="fa fa-arrow-right"></i>
                        </div>
                    </span>
                <% } %>
            <~>
            <input type="<%* input_type %>"
                    class="form-control"
                    <%= set_api_options(opt, guiElement) %>
                    id="<%- guiElement.element_id %>"
                    value="<%- guiElement.insertValue(value) %>">
            <%* input_addons %>
        </div>
    <%] %>
    <%! guiElements.base %>
</script>

<!-- guiElements.json -->
<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) { %>

                            <%= guiElement.renderAllRealElements() %>

                    <% } 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.integer -->
<script type="text/x-just" data-just="guiElements.integer">
    <!-- guiElements.integer [type=<%- opt.type %>, format=<%- opt.format %>] -->
    <%[ input_type %>number<%] %>
    <%! guiElements.string %>
</script>

<!-- guiElements.hidden -->
<script type="text/x-just" data-just="guiElements.hidden">
    <!-- guiElements.hidden [type=<%- opt.type %>, format=<%- opt.format %>] -->
    <div style="display:none;">
        <%[ main_input %>
            <input type="text"
            class="form-control"
            <%- set_api_options(opt, guiElement) %>
            id="<%- guiElement.element_id %>"
            value="<%- guiElement.insertValue(value) %>">
        <%] %>
        <%! guiElements.base %>
    </div>
</script>

<!-- guiElements.null -->
<script type="text/x-just" data-just="guiElements.null">
    <!-- guiElements.null [type=<%- opt.type %>, format=<%- opt.format %>] -->
</script>

<!-- guiElements.prefetch -->
<script type="text/x-just" data-just="guiElements.prefetch">
    <!-- guiElements.prefetch -->
    <%[ main_input %>
        <~ guiElement.db_value>
            <div class="form-control disabled" disabled="" maxlength="255" id="<%- guiElement.element_id %>" attr-value="<%- guiElement.insertValue(value) %>">
              <% if(opt[opt.name + '_info']){ %>
                  <a href="<%- vstMakeLocalApiUrl([opt[opt.name + '_info']['prefetch_path'], value], guiElement.parent_object.url_vars)%>"
                     class="item-name revers-color" onclick="return vstGO(this.href);">
                      <% if(!opt.prefetch || !opt.prefetch.field_name || opt[opt.name + '_info'][opt.prefetch.field_name] === undefined ){ %>
                          <%- opt[opt.name + '_info'].name || opt[opt.name + '_info'].username %>
                      <%}else{ %>
                          <%- opt[opt.name + '_info'][opt.prefetch.field_name] %>
                      <%} %>
                  </a>
              <%}else{ %>
                  <%- value %>
              <%} %>
            </div>
        <~>
    <%] %>

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

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

<!-- guiElements.date -->
<script type="text/x-just" data-just="guiElements.date">
    <!-- guiElements.date -->
    <%[ main_input %>
        <input type="date" class="form-control" <%- set_api_options(opt, guiElement) %> id="<%- guiElement.element_id %>"
        value="<%- moment(value).tz(window.timeZone).format("YYYY-MM-DD") || '' %>">
    <%] %>

    <%[ readonly_input %>
        <~ guiElement.db_value>
            <input type="date"
                    class="form-control"
                    <%- set_api_options(opt, guiElement) %>
                    id="<%- guiElement.element_id %>
                    class="form-control"
                    value="<%- moment(guiElement.db_value).tz(window.timeZone).format("YYYY-MM-DD") || '' %>">
        <~>
    <%] %>

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

<!-- guiElements.date_time -->
<script type="text/x-just" data-just="guiElements.date_time">
    <!-- guiElements.date_time -->
    <%[ main_input %>
        <input type="datetime-local" class="form-control" <%- set_api_options(opt, guiElement) %> id="<%- guiElement.element_id %>"
        value="<%- moment(value).tz(window.timeZone).format("YYYY-MM-DD") + 'T' + moment(value).tz(window.timeZone).format("HH:mm")  || '' %>">
    <%] %>

    <%[ readonly_input %>
        <~ guiElement.db_value>
            <input type="datetime-local" class="form-control" <%- set_api_options(opt, guiElement) %> id="<%- guiElement.element_id %>"
            value="<%- moment(guiElement.db_value).tz(window.timeZone).format("YYYY-MM-DD") + 'T' + moment(guiElement.db_value).tz(window.timeZone).format("HH:mm")  || '' %>">

        <~>
    <%] %>

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

<!-- guiElements.uptime -->
<script type="text/x-just" data-just="guiElements.uptime">
    <!-- guiElements.uptime -->
    <%[ main_input %>
        <div class="input-group">
            <input type="text" class="form-control" sec-value="<%- value || 0 %>" <%- set_api_options(opt) %> id="<%- guiElement.element_id %>"
            value="<%- guiElement.getTimeInUptimeFormat(value)  || '' %>"
                <%= justOn('change', guiElement.changeOnChangeByHands, guiElement.element_id)
                %>
            >
            <div class="input-group-append" id="uptime-down">
                <span class="input-group-text"><span class="fa fa-chevron-left"></span></span>
            </div>
            <div class="input-group-append" id="uptime-up">
                <span class="input-group-text"><span class="fa fa-chevron-right"></span></span>
            </div>
        </div>
    <%] %>

    <%[ readonly_input %>
        <~ guiElement.db_value>
            <input type="text" class="form-control" <%- set_api_options(opt) %> id="<%- guiElement.element_id %>"
                    value="<%- guiElement.getTimeInUptimeFormat(guiElement.db_value)  || '' %>">
        <~>
    <%] %>

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

<!-- guiElements.password -->
<script type="text/x-just" data-just="guiElements.color">
    <!-- guiElements.color -->
    <%[ input_type %>color<%] %>


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

    <%[ input_addons %>
        <% if(guiElement.opt.default){ %>
            <div class="input-group-append guiElement-revert-addon" onclick="$('#<%- guiElement.element_id %>').val('<%- guiElement.opt.default %>'); $('#<%- guiElement.element_id %>').trigger('change');" style="cursor: pointer;" >
                <span class="input-group-text">
                    <span class='fa fa-repeat' ></span>
                </span>
            </div>
        <% } %>
    <%] %>


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

<!-- guiElements.password -->
<script type="text/x-just" data-just="guiElements.password">
    <!-- guiElements.password -->
    <%[ input_type %>password<%] %>
    <%! guiElements.string %>
</script>

<!-- guiElements.button -->
<script type="text/x-just" data-just="guiElements.button">
    <!-- guiElements.button -->
    <button
        id="<%- guiElement.element_id %>"
        type="button"
        class="
                gui-element
                gui-element-<%- guiElement.name %>
                <% if(typeof opt.class == 'function'){ %>
                    <%- opt.class.apply(guiElement, [opt]) %>
                <% }else{ %>
                    <%- opt.class %>
                <% } %>
                <%- addCssClassesToElement('btn', opt.title).replace(/[^A-z0-9 _\/\-]/g, '_') %>"

        title="<%- opt.title || '' %>"
        >
            <% if(typeof opt.text == 'function'){ %>
                <%= opt.text.apply(guiElement, [opt]) %>
            <% }else{ %>
                <%= opt.text %>
            <% } %>
    </button>
</script>

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

    <%[ title %><%] %>
    <%[ description %><%] %>

    <%[ main_input %>
        <%= this.partial('guiElements.button', {guiElement:guiElement, opt:opt}) %>
    <%] %>
    <%! guiElements.base %>
</script>

<!-- guiElements.enum -->
<script type="text/x-just" data-just="guiElements.enum">
    <!-- guiElements.enum -->
    <%[ main_input %>
        <select id="<%- guiElement.element_id %>"  class="form-control" >
            <% for(var i in opt.enum){ %>
                <% if(typeof opt.enum[i] == "object" && opt.enum[i].id !== undefined){ %>
                    <option value='<%- opt.enum[i].id %>' <% if(value == opt.enum[i].id) { %>selected<% } %> ><%- (opt.enum[i].name || opt.enum[i].id) %></option>
                <% }else{ %>
                    <option value='<%- opt.enum[i] %>' <% if(value == opt.enum[i]) { %>selected<% } %> ><%- opt.enum[i] %></option>
                <% } %>
            <% } %>
        </select>
    <%] %>

    <%[ readonly_input %>
        <~ guiElement.db_value>
            <input type="text"
                style="width: 100%;"
                class="form-control  <%- addCssClassesToElement('field', guiElement.db_value, opt.name) %> "
                <%- set_api_options(opt, guiElement) %>
                id="<%- guiElement.element_id %>"
                value="<%- guiElement.insertValue(guiElement.db_value)  %>">
        <~>
    <%] %>

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

<!-- guiElements.select2 -->
<script type="text/x-just" data-just="guiElements.select2">
    <!-- guiElements.select2 -->
    <%[ main_input %>
        <select id="<%- guiElement.element_id %>"  class="form-control select2" ></select>
    <%] %>

    <%[ readonly_input %>
        <select id="<%- guiElement.element_id %>"  class="form-control select2 disabled" disabled></select>
    <%] %>
    <%! guiElements.base %>
</script>

<!-- guiElements.apiObject -->
<script type="text/x-just" data-just="guiElements.apiObject">
    <!-- guiElements.apiObject -->
    <%[ readonly_input %>
        <~ guiElement.db_value>
            <div
                class="form-control"
                <%- set_api_options(opt, guiElement) %>
                id="<%- guiElement.element_id %>"
            >
                <a href="<%- guiElement.getLink() %>" class="revers-color" onclick="return vstGO(this.href);" ><%- guiElement.getName() %></a>
            </div>
        <~>
    <%] %>

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

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

<!-- guiElements.apiData -->
<script type="text/x-just" data-just="guiElements.apiData">
    <!-- guiElements.apiData [type=<%- opt.type %>, format=<%- opt.format %>] -->
    <%! guiElements.string %>
</script>

<!-- guiElements.boolean -->
<script type="text/x-just" data-just="guiElements.boolean">
    <!-- guiElements.boolean -->
    <%[ main_input %>
        <div class="input-group">
            <div class="form-control <% if (guiElement.setSelectedOrNot(value, opt)) { %> selected <% } %> boolean-select"
                    onclick="$(this).toggleClass('selected');"
                    onselectstart="return false"
                    onmousedown="return false"
                    style="cursor: pointer;"
                    id="<%- guiElement.element_id %>" >
                <div class="ico-on fa fa-toggle-on" ></div>
                <div class="ico-off fa  fa-toggle-off" ></div>
                <div class="boolean-title" >Boolean value</div>
            </div>
            <% if(guiElement.opt.hidden_button && !guiElement.isRequired()) { %>
                <div class="input-group-append">
                    <div class="input-group-text" style="float:right; z-index: 9999;"
                        <%= justOn('click', function()
                            {
                                guiElement.setHidden(true);
                            })
                        %>
                    >
                        <span >
                            <span class='fa fa-eye-slash' ></span>
                        </span>
                    </div>
                </div>
            <% } %>
        </div>
    <%] %>

     <%[ readonly_input %>
        <div class="form-control <% if (guiElement.setSelectedOrNot(value, opt)) { %> selected <% } %> boolean-select"
                onselectstart="return false"
                onmousedown="return false"
                style="cursor: not-allowed!important;"
                id="<%- guiElement.element_id %>" >
            <div class="ico-on fa fa-toggle-on" style="cursor: not-allowed!important;" ></div>
            <div class="ico-off fa  fa-toggle-off" style="cursor: not-allowed!important;" ></div>
            <div class="boolean-title" style="cursor: not-allowed!important;">Boolean value</div>
        </div>
    <%] %>

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


<!-- guiElements.autocomplete -->
<script type="text/x-just" data-just="guiElements.autocomplete">
    <!-- guiElements.autocomplete -->
    <%[ main_input %>
        <div class="input-group">
            <input
            type="text"
            value="<%- guiElement.insertValue(value) %>"
            class="form-control"
            <%- set_api_options(opt, guiElement) %>
            id="<%- guiElement.element_id %>">

            <%* input_addons %>
        </div>
    <%] %>
    <%! guiElements.base %>
</script>

<!-- guiElements.hybrid_autocomplete -->
<script type="text/x-just" data-just="guiElements.hybrid_autocomplete">
    <!-- guiElements.hybrid_autocomplete -->
    <%[ main_input %>
        <div class="input-group">
            <input
            type="text"
            value="<% if(opt.enable_button_tooltip && guiElement.insertValue(value) == "") { %><%- opt.enable_button_tooltip %><% } else { %><%- guiElement.insertValue(value) %><% } %>"
            class="form-control"
            <%= set_api_options(opt, guiElement) %>
            id="<%- guiElement.element_id %>"
            onkeydown="$('#<%- guiElement.element_id %>').attr('value','');"
            <% if(opt.enable_button && guiElement.insertValue(value) == "") { %>
                disabled
            <% } %>
            >
            <% if(opt.enable_button) { %>
                <div class="input-group-append">
                    <span class="input-group-text  <% if(!(opt.enable_button && guiElement.insertValue(value) == "")) { %> power-on <% } %>  cursor-pointer" id="<%- guiElement.element_id %>_toggle_disabled"
                        <%= justOn('click', function()
                            {
                                $(this).toggleClass('power-on');
                                $('#' + guiElement.element_id + '_open_modal').toggleClass('cursor-not-allowed');
                                $('#' + guiElement.element_id + '_clean_value').toggleClass('cursor-not-allowed');
                                if($('#' + guiElement.element_id).attr('disabled')) {
                                    $('#' + guiElement.element_id).removeAttr('disabled');
                                    $('#' + guiElement.element_id).val('');
                                    $('#' + guiElement.element_id).attr('value', '');
                                } else {
                                    $('#' + guiElement.element_id).attr('disabled', true);
                                    $('#' + guiElement.element_id).val(window.disabled_inv_text);
                                    $('#' + guiElement.element_id).attr('value',window.disabled_inv_text);
                                }

                            }, guiElement.element_id + '_toggle_disabled' )
                        %>
                    >
                        <span class='fa fa-power-off' ></span>
                    </span>
                </div>
            <% } %>
            <% if(guiElement.opt.hidden_button && !guiElement.isRequired()) { %>
                <div class="input-group-append guiElement-revert-addon" style="cursor: pointer;"
                    <%= justOn('click', function()
                        {
                            guiElement.setHidden(true);
                        })
                    %>
                 >
                    <span class="input-group-text">
                        <span class='fa fa-eye-slash' ></span>
                    </span>
                </div>
            <% } %>
            <div class="input-group-append">
                <span class="input-group-text cursor-pointer <% if(opt.enable_button && guiElement.insertValue(value) == "") { %> cursor-not-allowed <% } %>" id="<%- guiElement.element_id %>_open_modal"
                    <%= justOn('click', function()
                        {
                            if(!$('#' +  guiElement.element_id).attr('disabled')) {
                                return spajs.showLoader(guiElement.renderModal(opt));
                            }
                        }, guiElement.element_id + '_open_modal' )
                    %>
                >
                    <span class='fa fa-chevron-down' ></span>
                </span>
            </div>
            <div class="input-group-append">
                <span class="input-group-text cursor-pointer <% if(opt.enable_button && guiElement.insertValue(value) == "") { %> cursor-not-allowed <% } %>"  id="<%- guiElement.element_id %>_clean_value"
                    <%= justOn('click', function()
                        {
                            if(!$('#' +  guiElement.element_id).attr('disabled')) {
                                $('#' + guiElement.element_id).val('');
                                $('#' + guiElement.element_id).attr('value','');
                            }
                        }, guiElement.element_id + '_clean_value' )
                    %>
                >
                    <span class='fa fa-times' ></span>
                </span>
            </div>
        </div>
    <%] %>
    <%! guiElements.base %>
</script>


<!-- guiElements.file -->
<script type="text/x-just" data-just="guiElements.file">
    <!-- guiElements.file -->
    <%[ main_input %>

        <span id="deleteFileId_<%- guiElement.element_id %>" onclick="$('#fileContent_<%- guiElement.element_id %>').val('');" class='btn btn-default btn-right textfile'  style='float: right; margin-left: 10px; margin-bottom:10px;'>
            <span class='fa fa-times'>
            </span>
        </span>

        <span id="<%- guiElement.element_id %>" class='btn btn-default btn-right textfile' style='float: right; margin-left: 10px;  margin-bottom:10px;'>
            <input type='file' class='input-file' <%= justOn('change', ()=>{ guiElement.readFile(event, '#fileContent_' + guiElement.element_id); return false; }, guiElement.element_id) %> >
            <span class='fa fa-file-text-o'>
            </span>
        </span>

        <% if(guiElement.opt.hidden_button && !guiElement.isRequired()) { %>
                <span class='btn btn-default btn-right textfile'  style='float: right; margin-left: 10px; margin-bottom:10px;'
                     <%= justOn('click', function()
                        {
                            guiElement.setHidden(true);
                        })
                    %>
                >
                <span class='fa fa-eye-slash' ></span>
                </span>
        <% } %>
        <textarea placeholder='Enter value' <%- set_api_options(opt, guiElement) %>  id="fileContent_<%- guiElement.element_id %>" class='form-control' style="resize:vertical;"><%= value || '' %></textarea>
    <%] %>
    <%! guiElements.base %>
</script>

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

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

<!-- guiElements.textarea -->
<script type="text/x-just" data-just="guiElements.textarea">
    <!-- guiElements.textarea -->
    <%[ main_input %>
        <textarea rows="3" cols="50" <%= set_api_options(opt, guiElement) %>  id="<%- guiElement.element_id %>" class='form-control' style="resize:vertical;"><%= value || '' %></textarea>
    <%] %>
    <%[ readonly_input %>
        <~ guiElement.db_value>
            <textarea rows="3" cols="50" <%= set_api_options(opt, guiElement) %>  id="<%- guiElement.element_id %>" class='form-control' style="resize:vertical;"><%= guiElement.insertValue(guiElement.db_value)%></textarea>
        <~>
    <%] %>

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


<!-- guiElements.text_paragraph -->
<script type="text/x-just" data-just="guiElements.text_paragraph">
    <!-- guiElements.text_paragraph [type=<%- opt.type %>, format=<%- opt.format %>] -->

     <% if(opt.readOnly) { %>
        <%[ wrapper_classes %>
           col-lg-12 col-xs-12 col-sm-12 col-md-12
        <%] %>
    <% } %>

    <%[ main_input %>
        <textarea rows="3" cols="50" <%= set_api_options(opt, guiElement) %>  id="<%- guiElement.element_id %>" class='form-control' style="resize:vertical;"><%= guiElement.insertValue(value) %></textarea>
    <%] %>

    <%[ readonly_input %>
       <~ guiElement.db_value>
           <div>
                <p id="<%- guiElement.element_id %>"><%= guiElement.insertValue(guiElement.db_value)%></p>
           </div>
       <~>
    <%] %>

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

<!-- guiElements.html -->
<script type="text/x-just" data-just="guiElements.html">
    <!-- guiElements.html -->
    <%[ wrapper_classes %>
       col-lg-12 col-xs-12 col-sm-12 col-md-12
    <%] %>

    <%[ main_input %>
         <div class="html_content rounded" id="<%- guiElement.element_id %>"> <%= value || opt.default || '' %> </div>
    <%] %>

    <%[ readonly_input %>
        <~ guiElement.db_value>
            <div class="html_content rounded" id="<%- guiElement.element_id %>"> <%= guiElement.db_value || opt.default || '' %> </div>
        <~>
    <%] %>

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

<!-- guiElements.crontab -->
<script type="text/x-just" data-just="guiElements.crontab">
    <!-- guiElements.crontab -->
     <%[ wrapper_classes %>
       col-lg-12 col-xs-12 col-sm-12 col-md-12
    <%] %>

    <%[ main_input %>
        <div class="row" >
            <div class="col-lg-12">
                <div class="input-group">
                    <input type="text"
                            class="form-control"
                            value="<%- guiElement.insertValue(value) %>"
                            id="<%- guiElement.element_id %>"
                            >
                    <span class="input-group-append" onclick="$('#guiElement-gui').toggle();" >
                        <div class="input-group-text"><span class="fa fa-pencil"></span></div>
                    </span>
                </div>
            </div>
        </div>

        <div class="row crontabEditor" id="guiElement-gui" style="margin-top: 15px; display:none;" >

            <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 col-xs-12 col-md-6 col-sm-6">

                <div class="btn-group" role="group" >
                    <button type="button"  class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Minutes
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li>
                            <a href="#"  <%= justOn('click', ()=>{ guiElement.setMinutes('*'); return false; }) %>  >All</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMinutes('*/2'); return false; }) %> >*/2</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMinutes('*/3'); return false; }) %> >*/3</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMinutes('*/5'); return false; }) %> >*/5</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMinutes('*/10'); return false; }) %> >*/10</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMinutes('*/15'); return false; }) %> >*/15</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMinutes('*/20'); return false; }) %> >*/20</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMinutes('0'); return false; }) %> >At the beginning</a>
                        </li>
                    </ul>
                </div>

                <div class="control-label " style="margin-top:15px;">
                    <% for(let i = 0; i< 60; i+=1){ %>
                        <button class="btn btn-default <%- guiElement.model.Minutes.justClass(i, 'selected') %>"
                                style="width: calc(20% - 4px);"
                                <%= justOn('click', ()=>{ guiElement.model.Minutes[i] = !guiElement.model.Minutes[i]; guiElement.setValue(); }) %>
                                ><%- i %></button>
                    <% } %>
                </div>
            </div>

            <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 col-xs-12 col-md-6 col-sm-6">

                <div class="btn-group" role="group" >
                    <button type="button"  class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Hours
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setHours('*'); return false; }) %> >All</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setHours('*/2'); return false; }) %> >*/2</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setHours('*/3'); return false; }) %> >*/3</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setHours('*/4'); return false; }) %> >*/4</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setHours('*/5'); return false; }) %> >*/5</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setHours('*/6'); return false; }) %> >*/6</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setHours('*/8'); return false; }) %> >*/8</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setHours('0'); return false; }) %> >At the beginning</a>
                        </li>
                    </ul>
                </div>

                <div class="control-label " style="margin-top:15px;">
                    <% for(let i = 0; i<= 23; i++){ %>
                        <button class="btn btn-default <%- guiElement.model.Hours.justClass(i, 'selected') %>"
                                style="width: calc(20% - 4px);"
                                <%= justOn('click', ()=>{ guiElement.model.Hours[i] = !guiElement.model.Hours[i]; guiElement.setValue(); }) %>
                                ><%- i %></button>
                    <% } %>
                </div>
            </div>

            <div class="form-group col-lg-4 col-xs-12 col-sm-6 col-md-6 col-xs-12 col-md-6 col-sm-6">

                <div class="btn-group" role="group" >
                    <button type="button"  class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Day of Month
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDayOfMonth('*'); return false; }) %> >All</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDayOfMonth('*/2'); return false; }) %> >*/2</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDayOfMonth('*/3'); return false; }) %> >*/3</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDayOfMonth('*/4'); return false; }) %> >*/4</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDayOfMonth('*/5'); return false; }) %> >*/5</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDayOfMonth('*/7'); return false; }) %> >*/7</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDayOfMonth('1'); return false; }) %> >At the beginning</a>
                        </li>
                    </ul>
                </div>

                <div class="control-label " style="margin-top:15px;">
                    <% for(let i = 1; i<= 31; i++){ %>
                        <button class="btn btn-default <%- guiElement.model.DayOfMonth.justClass(i, 'selected') %>"
                                <%= justOn('click', ()=>{ guiElement.model.DayOfMonth[i] = !guiElement.model.DayOfMonth[i]; guiElement.setValue(); }) %>
                                style="width: calc(20% - 4px);"
                                ><%- i %></button>
                    <% } %>
                </div>
            </div>

            <div class="form-group col-lg-3 col-xs-12 col-md-6 col-sm-6">

                <div class="btn-group" role="group" >
                    <button type="button"  class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Months
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMonths('*'); return false; }) %> >All</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMonths('*/2'); return false; }) %> >*/2</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMonths('*/3'); return false; }) %> >*/3</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMonths('*/4'); return false; }) %> >*/4</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMonths('*/6'); return false; }) %> >*/6</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setMonths('1'); return false; }) %> >At the beginning</a>
                        </li>
                    </ul>
                </div>
                <div class="control-label " style="margin-top:15px;">
                    <% for(let i = 1; i<= 12; i++){ %>
                        <button
                                class="btn btn-default col-xs-6 col-lg-6 <%- guiElement.model.Months.justClass(i, 'selected') %>"
                                <%= justOn('click', ()=>{ guiElement.model.Months[i] = !guiElement.model.Months[i]; guiElement.setValue(); }) %>
                                > <%- guiElement.model.MonthsNames[i-1] %></button>
                    <% } %>
                </div>
            </div>

            <div class="form-group col-lg-3 col-xs-12 col-md-6 col-sm-6">

                <div class="btn-group" role="group" >
                    <button type="button"  class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Days of Week
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDaysOfWeek('*'); return false; }) %> >All</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDaysOfWeek('*/2'); return false; }) %> >*/2</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDaysOfWeek('*/3'); return false; }) %> >*/3</a>
                        </li>
                        <li>
                            <a href="#" <%= justOn('click', ()=>{ guiElement.setDaysOfWeek('1'); return false; }) %> >At the beginning</a>
                        </li>
                    </ul>
                </div>

                <div class="control-label " style="margin-top:15px;">
                    <% for(let i = 0; i<= 6; i++){ %>
                        <button class="btn btn-default col-xs-6 col-lg-6 <%- guiElement.model.DaysOfWeek.justClass(i, 'selected') %>"
                                <%= justOn('click', ()=>{ guiElement.model.DaysOfWeek[i] = !guiElement.model.DaysOfWeek[i]; guiElement.setValue(); }) %>
                                ><%- guiElement.model.DaysOfWeekNames[i] %></button>
                    <% } %>
                </div>
            </div>
        </div>
    <%] %>

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

<!-- guiElements.time_interval -->
<script type="text/x-just" data-just="guiElements.time_interval">
    <%[ main_input %>
        <div class="row" >
            <div class="col-lg-12">
                <div class="input-group">
                    <input type="number"
                            class="form-control"
                            value="<%- guiElement.insertValue(value) %>"
                            id="<%- guiElement.element_id %>"
                            <%= set_api_options(opt, guiElement) %>
                            >
                    <span class="input-group-append">
                        <div class="input-group-text">sec</div>
                    </span>
                </div>
            </div>
        </div>
    <%] %>

     <%[ readonly_input %>
        <~ guiElement.db_value>
            <div class="row" >
                <div class="col-lg-12">
                    <div class="input-group">
                        <input type="number"
                                class="form-control"
                                value="<%- guiElement.insertValue(guiElement.db_value) %>"
                                id="<%- guiElement.element_id %>"
                                <%= set_api_options(opt, guiElement) %>
                                >
                        <span class="input-group-append">
                            <div class="input-group-text">sec</div>
                        </span>
                    </div>
                </div>
            </div>
        <~>
    <%] %>

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