
<!-- crontabEditor -->
<script type="text/x-just" data-just="crontabEditor">

        <div class="row" >
            <div class="col-lg-12">
                <div class="input-group">
                    <input type="text"
                            class="form-control"
                            value="<%- crontabEditor.model.string %>"
                            id="crontabEditorString"
                            onchange="crontabEditor.parseCronString(this.value);"
                            onpaste="crontabEditor.parseCronString(this.value);"  >
                    <span class="input-group-addon" onclick="$('#crontabEditor-gui').toggle();" >
                        <span class="glyphicon glyphicon-pencil"></span>
                    </span>
                </div>
                <div class="help-block">
                    Time must be specified according to <%= window.timeZone %> time zone
                </div>
            </div>
        </div>

        <div class="row crontabEditor" id="crontabEditor-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" style="width: 100%;">
                    <button type="button" style="width: 100%;" 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-right">
                        <li>
                            <a href="#" onclick="crontabEditor.setMinutes('*'); return false;">All</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMinutes('*/2'); return false;">*/2</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMinutes('*/3'); return false;">*/3</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMinutes('*/5'); return false;">*/5</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMinutes('*/10'); return false;">*/10</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMinutes('*/15'); return false;">*/15</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMinutes('*/20'); return false;">*/20</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMinutes('0'); return false;">At the beginning</a>
                        </li>
                    </ul>
                </div>

                <div class="control-label " style="margin-top:15px;">
                    <% for(var i = 0; i< 60; i+=1){ %>
                        <button class="btn btn-default <%- crontabEditor.model.Minutes.justClass(i, 'selected') %>"
                                style="width: calc(20% - 4px);"
                                onclick="crontabEditor.model.Minutes[<%- i %>] = !crontabEditor.model.Minutes[<%- i %>]; crontabEditor.updateCronString(); "
                                ><%- 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" style="width: 100%;">
                    <button type="button" style="width: 100%;" 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-right">
                        <li>
                            <a href="#" onclick="crontabEditor.setHours('*'); return false;">All</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setHours('*/2'); return false;">*/2</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setHours('*/3'); return false;">*/3</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setHours('*/4'); return false;">*/4</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setHours('*/5'); return false;">*/5</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setHours('*/6'); return false;">*/6</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setHours('*/8'); return false;">*/8</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setHours('0'); return false;">At the beginning</a>
                        </li>
                    </ul>
                </div>

                <div class="control-label " style="margin-top:15px;">
                    <% for(var i = 0; i<= 23; i++){ %>
                        <button class="btn btn-default <%- crontabEditor.model.Hours.justClass(i, 'selected') %>"
                                style="width: calc(20% - 4px);"
                                onclick="crontabEditor.model.Hours[<%- i %>] = !crontabEditor.model.Hours[<%- i %>]; crontabEditor.updateCronString(); "
                                ><%- 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" style="width: 100%;">
                    <button type="button" style="width: 100%;" 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-right">
                        <li>
                            <a href="#" onclick="crontabEditor.setDayOfMonth('*'); return false;">All</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDayOfMonth('*/2'); return false;">*/2</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDayOfMonth('*/3'); return false;">*/3</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDayOfMonth('*/4'); return false;">*/4</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDayOfMonth('*/5'); return false;">*/5</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDayOfMonth('*/7'); return false;">*/7</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDayOfMonth('1'); return false;">At the beginning</a>
                        </li>
                    </ul>
                </div>

                <div class="control-label " style="margin-top:15px;">
                    <% for(var i = 1; i<= 31; i++){ %>
                        <button class="btn btn-default <%- crontabEditor.model.DayOfMonth.justClass(i, 'selected') %>"
                                onclick="crontabEditor.model.DayOfMonth[<%- i %>] = !crontabEditor.model.DayOfMonth[<%- i %>]; crontabEditor.updateCronString(); "
                                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" style="width: 100%;">
                    <button type="button" style="width: 100%;" 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-right">
                        <li>
                            <a href="#" onclick="crontabEditor.setMonths('*'); return false;">All</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMonths('*/2'); return false;">*/2</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMonths('*/3'); return false;">*/3</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMonths('*/4'); return false;">*/4</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMonths('*/6'); return false;">*/6</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setMonths('1'); return false;">At the beginning</a>
                        </li>
                    </ul>
                </div>
                <div class="control-label " style="margin-top:15px;">
                    <% for(var i = 1; i<= 12; i++){ %>
                        <button
                                class="btn btn-default col-xs-6 col-lg-6 <%- crontabEditor.model.Months.justClass(i, 'selected') %>"
                                onclick="crontabEditor.model.Months[<%- i %>] = !crontabEditor.model.Months[<%- i %>]; crontabEditor.updateCronString(); " >
                                <%- crontabEditor.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" style="width: 100%;">
                    <button type="button" style="width: 100%;" 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-right">
                        <li>
                            <a href="#" onclick="crontabEditor.setDaysOfWeek('*'); return false;">All</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDaysOfWeek('*/2'); return false;">*/2</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDaysOfWeek('*/3'); return false;">*/3</a>
                        </li>
                        <li>
                            <a href="#" onclick="crontabEditor.setDaysOfWeek('1'); return false;">At the beginning</a>
                        </li>
                    </ul>
                </div>

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