
<!-- widget template -->
<script type="text/x-just" data-just="pmwItemsCounter">
    <!--<div class="col-lg-2 col-sm-4 col-xs-6 dnd-block" id="pmw<%- model.nameInStats %>Counter">-->
    <div class="col-lg-2 col-6 dnd-block" id="pmw<%- model.nameInStats %>Counter">
        <div class="small-box bg-info cursor-move1">
            <div class="inner">
                <h3><%= model.justText('count') %>&nbsp;</h3>
                <p style="text-transform: capitalize"><%- model.nameInStats %></p>
            </div>
            <div class="icon hidden-xs" style="top: 0px;">
                <i class="fa fa-cog"></i>
            </div>
            <% if(model.path){ %>
                <a href="<%- vstMakeLocalUrl([model.path]) %>" onclick="return vstGO(this.href);" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            <% }else{ %>
                <i  class="small-box-footer" >&nbsp;</i>
            <% } %>
        </div>
    </div>
</script>

<!-- chart template widget -->
<script type="text/x-just" data-just="pmwChartWidget">
    <div>
        <div class="card card-info
        <% for(var j in guiDashboard.model.widgets[0]){  %>
            <% if(guiDashboard.model.widgets[0][j].name == 'pmwChartWidget' && guiDashboard.model.widgets[0][j].collapse) { %>
              collapsed-card
            <% } %>
        <% } %>
        ">
            <div class="card-header ui-sortable-handle cursor-move1">

                Tasks history

                <div class="pull-right">
                    <button type="button" class="btn btn-sm btn-light btn-icon" data-widget="collapse" id="collapse-chart" onclick="guiDashboard.setNewWidgetCollapseValue(this)">
                        <i
                            <% for(var j in guiDashboard.model.widgets[0]){  %>
                                <% if(guiDashboard.model.widgets[0][j].name == 'pmwChartWidget' && guiDashboard.model.widgets[0][j].collapse==true) { %>
                                   class="fa fa-plus"
                                <% } %>
                                <% if(guiDashboard.model.widgets[0][j].name == 'pmwChartWidget' && guiDashboard.model.widgets[0][j].collapse==false) { %>
                                   class="fa fa-minus"
                                <% } %>
                            <% } %>
                        ></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-light btn-icon" data-widget="remove"  onclick="guiDashboard.setNewWidgetActiveValue(this)">
                        <i class="fa fa-times"></i>
                    </button>
                </div>

                <div class="pull-right" id="period-list" style="width:215px; min-width:145px;
                    <% for(var j in guiDashboard.model.widgets[0]){  %>
                        <% if(guiDashboard.model.widgets[0][j].name == 'pmwChartWidget' && guiDashboard.model.widgets[0][j].collapse==true) { %>
                            display:none;
                        <% } %>
                    <% } %>
                ">
                  <div class="chart-period-select-wrapper">
                    <label style="float:left; margin-right:10px; line-height:26px;">Period</label>
                    <select id="chart-period" class="form-control" style="max-width:145px; height:30px; line-height:30px; padding:3px 12px; display:inline-block; float:left;" onchange="guiDashboard.updateStatsDataLast(this)">
                        <option value="1095">last 3 years</option>
                        <option value="365">last year</option>
                        <option value="90">last 3 months</option>
                        <option value="30">last month</option>
                        <option value="14">last 2 weeks</option>
                        <option value="7">last week</option>
                        <option value="3">last 3 days</option>
                    </select>
                  </div>
                </div>
            </div>
            <div class="card-body border-radius-none">
                <div class="row">
                    <div class="col-lg-8">
                        <div style="position: relative; margin: auto; height: 300px; width: 100%; overflow:hidden;">
                          <canvas id="chart_js_canvas"></canvas>
                        </div>
                    </div>
                    <div class="col-lg-4">
                       <div style="width=100%;" class="text-data" id="chart_progress_bars">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<!--template progress bars for chart -->
<script type="text/x-just" data-just="chart_progress_bars">
    <h5 class="text-center" style="margin-top:25px;">Statistic</h5>
    <% for(let i in opt.settings) { %>
        <% let line = opt.settings[i] %>
        <% if(line.name != 'all_tasks' && line.active) { %>
            <% let bool = false %>
            <% let all = 0 %>
            <% for(let j in opt.stats_data.jobs.year) { %>
                <% let stats = opt.stats_data.jobs.year[j] %>
                <% all = stats.all %>
                <% if(stats.status.toLowerCase() == line.name) { %>
                    <% bool = true %>
                    <div class="progress-group">
                        <%- line.name %>
                        <span class="float-right"><b> <%- stats.sum %> </b>/ <%- stats.all %> </span>
                         <div class="progress progress-sm">
                            <div class="progress-bar" style="width: <%- stats.sum / stats.all * 100 %>%; background-color: <%- guiDashboard.getChartLineColor(line) %>!important;"></div>
                         </div>
                    </div>
                 <% } %>
            <% } %>
            <% if(!bool) { %>
               <div class="progress-group">
                    <%- line.name %>
                    <span class="float-right"><b> 0 </b>/ <%- all %> </span>
                     <div class="progress progress-sm">
                        <div class="progress-bar" style="width: 0%; background-color: <%- guiDashboard.getChartLineColor(line) %>!important;"></div>
                     </div>
                </div>
            <% } %>
        <% } %>
    <% } %>
</script>

<!-- template of widget_settings_modal -->
<script type="text/x-just" data-just="widget_settings_modal">
     <%[ modal_content_block %>
        <%= spajs.just.render('widget_settings_modal_content') %>
    <%] %>
    <%! modal_content %>
</script>

<!-- template of widget_settings_modal_content -->
<script type="text/x-just" data-just="widget_settings_modal_content">
    <section class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <table class="table table-bordered" id="modal-table">
                        <tbody>
                            <tr>
                                <th>Name</th>
                                <th>Is active</th>
                                <th>Collapsed</th>
                            </tr>

                             <% for(var i in guiDashboard.model.widgets){ %>
                                <% for(var j in guiDashboard.model.widgets[i]){  %>
                                    <tr rowname="<%= guiDashboard.model.widgets[i][j].name %>">
                                        <% if(guiDashboard.model.widgets[i][j].title){ %>
                                            <td><%= guiDashboard.model.widgets[i][j].title %></td>
                                        <% } %>
                                        <td valuename="active">
                                        <div class="form-control boolean-select <% if(guiDashboard.model.widgets[i][j].active){ %> selected <% } %>" onclick="$(this).toggleClass('selected');" style="cursor: pointer;">
                                            <div class="ico-on fa fa-toggle-on"></div>
                                            <div class="ico-off fa  fa-toggle-off"></div>
                                         </div>
                                        </td>
                                        <td valuename="collapse">
                                            <div class="form-control boolean-select <% if(guiDashboard.model.widgets[i][j].collapse){ %> selected <% } %>" <% if(guiDashboard.model.widgets[i][j].type==0){ %> onclick="$(this).toggleClass('selected');" onselectstart="return false" onmousedown="return false" <% } %>>
                                                <div class="ico-on fa fa-toggle-on" <% if(guiDashboard.model.widgets[i][j].type==1){ %> style="cursor: not-allowed!important;"<% } %>></div>
                                                <div class="ico-off fa  fa-toggle-off" <% if(guiDashboard.model.widgets[i][j].type==1){ %> style="cursor: not-allowed!important;"<% } %>></div>
                                             </div>
                                        </td>
                                    </tr>
                                 <% } %>
                            <% } %>
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    <div class="pull-right">
                        <button type="button" class="btn btn-default" onclick="guiModal.modalClose()">Cancel</button>
                        <button type="button" class="btn btn-primary" onclick="spajs.showLoader(guiDashboard.saveWigdetsOptionsFromModal());  return false;">Save</button>
                    </div>
                </div>
            </div>
    </section>
</script>

<!-- dashboard page -->
<script type="text/x-just" data-just="pmDashboard">

    <%[ buttons_row %>
        <div class="row">
            <button class="btn btn-default btn-showWidgetSettings" onclick="guiDashboard.showWidgetSettingsModal();" style="margin-left: 10px; margin-top:-7px;">
               <i class="fa fa-cog"></i>
            </button>
            <button class="btn btn-default btn-toggleSortable" onclick="guiDashboard.toggleSortable(this);" style="margin-left: 5px; margin-top:-7px;">
               <i class="fa fa-lock"></i>
            </button>
        </div>

        <%* buttons %>
    <%] %>

    <%[ main_content_row %>

            <div class="container-fluid">
                <!-- render widgets -->
                <% for(var i in guiDashboard.model.widgets){ %>
                    <div class="row" id="dnd-container">

                            <% for(var j in guiDashboard.model.widgets[i]){  %>
                                <% if (guiDashboard.model.widgets[i][j].active) { %>
                                    <% if(guiDashboard.model.widgets[i][j].widget && guiDashboard.model.widgets[i][j].type==1){ %>
                                        <% if(guiDashboard.model.widgets[i][j].widget){ %>
                                            <%= guiDashboard.model.widgets[i][j].widget.render() %>
                                        <% } %>
                                    <% } %>
                                    <% if(guiDashboard.model.widgets[i][j].type==0){ %>
                                        <% if(guiDashboard.model.widgets[i][j].widget){ %>
                                            <div class="col-lg-12 dnd-block" id="<%= guiDashboard.model.widgets[i][j].name %>">
                                                <%= guiDashboard.model.widgets[i][j].widget.render() %>
                                            </div>
                                        <% } %>
                                    <% } %>
                                <% } %>
                            <% } %>

                    </div>
                <% } %>
            </div>
    <%] %>

    <%! guiDashboard %>
</script>

