npm - dotnetreport-ng - Versions diffs - 5.2.0 → 5.3.2 - Mend

dotnetreport-ng 5.2.0 → 5.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/bundles/dotnetreport-ng.umd.js +9 -7
package/bundles/dotnetreport-ng.umd.js.map +1 -1
package/dotnetreport-ng-5.3.2.tgz +0 -0
package/esm2015/lib/dotnetdashboard/dotnetdashboard.component.js +505 -340
package/esm2015/lib/dotnetreport/dotnetreport.component.js +505 -339
package/esm2015/lib/dotnetsetup/dotnetsetup.component.js +1531 -1352
package/fesm2015/dotnetreport-ng.js +2556 -2046
package/fesm2015/dotnetreport-ng.js.map +1 -1
package/package.json +2 -2
package/dotnetreport-ng-5.2.0.tgz +0 -0

package/bundles/dotnetreport-ng.umd.js CHANGED Viewed

@@ -104,7 +104,7 @@
             this.ngOnInit();
         };
         DotnetreportComponent.prototype.renderKOTemplates = function () {
-            this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n    <!-- Dotnet Report HTML Templates -->\n    <script type=\"text/html\" id=\"report-filter\">\n        <div class=\"form-group\">\n            <!-- ko if: !hasForeignKey-->\n            <!-- ko if: fieldType=='DateTime'-->\n            <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n            <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n            <!-- /ko -->\n            <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n            From\n            <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n            to\n            <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n            <!-- /ko -->\n            <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n            <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n                <option value=\"\"></option>\n                <option>Today</option>\n                <option>Today +</option>\n                <option>Today -</option>\n                <option>Yesterday</option>\n                <option>This Week</option>\n                <option>Last Week</option>\n                <option>This Month</option>\n                <option>Last Month</option>\n                <option>This Year</option>\n                <option>Last Year</option>\n                <option>This Month To Date</option>\n                <option>This Year To Date</option>\n                <option>Last 30 Days</option>\n                <optgroup label=\"Comparison Options\">\n                    <option>>= Today</option>\n                    <option><= Today</option>\n                    <option>>= Today +</option>\n                    <option><= Today +</option>\n                    <option>>= Today -</option>\n                    <option><= Today -</option>\n                </optgroup>\n            </select>\n            <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n                <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n            </div>\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n            <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n            <!-- /ko -->\n            <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n            From\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n            to\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n                <option value=\"1\">Yes</option>\n                <option value=\"0\">No</option>\n            </select>\n            <!-- /ko -->\n            <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: hasForeignKey && $parent.Operator() != 'all' -->\n            <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n            <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n            <!-- /ko -->\n            <!-- ko if: $parent.Operator()=='='-->\n            <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n            <!-- /ko -->\n            <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n            <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n            <!-- /ko -->\n            <!-- /ko -->\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"pager-template\">\n        <div class=\"pager-container\">\n            <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a>&nbsp;\n            <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n            <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n            <span class=\"pager-pageinfo\">\n                <span>Page</span>&nbsp;\n                <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n                                    value: currentPage,\n                                    attr: { max: pages() }\" />&nbsp;\n                <span>of</span>&nbsp;\n                <span data-bind=\"text: pages\"></span>\n            </span>&nbsp;\n    \n            <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a>&nbsp;\n            <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-column-header\">\n        <!-- ko foreach: Columns -->\n        <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n            <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n            <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n            <!-- /ko -->\n            <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false)  -->\n            <a href=\"\" data-bind=\"click: function(){ $parents[3].pager ? $parents[3].changeSort(SqlField) : $parents[5].changeSort(SqlField); }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n                <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n                <span data-bind=\"text: ($parents[3].pager ? $parents[3].pager.sortColumn() : $parents[5].pager.sortColumn()) === SqlField ? (($parents[3].pager ? $parents[3].pager.sortDescending() : $parents[5].pager.sortDescending()) ? '&#9660;' : '&#9650;') : ''\"></span>\n            </a>\n            <!-- /ko -->\n    \n            <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n                <div class=\"dropup\">\n                <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                    <span class=\"fa fa-ellipsis-v\"></span>\n                </a>\n                    <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n                        <li class=\"dropdown-item small\">\n                            <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n                                <span class=\"fa fa-clone\"></span> Outer Group\n                            </a>\n                        </li>\n                        <li class=\"dropdown-item small\">\n                            <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n                                <span class=\"fa fa-gear\"></span> Field Settings\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n    \n        </th>\n        <!-- /ko -->\n    </script>\n    \n    <script type=\"text/html\" id=\"report-column\">\n        <!-- ko foreach: Items -->\n        <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n            <div data-bind=\"style: {'width': fieldWidth }\">\n            <!-- ko if: LinkTo-->\n            <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: FormattedValue\"></span></a>\n            <!-- /ko-->\n            <!-- ko ifnot: LinkTo-->\n            <span data-bind=\"html: FormattedValue\"></span>\n            <!-- /ko-->\n            </div>\n        </td>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-pivot\">\n            <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n            <table class=\"table table-hover table-condensed\">\n                <thead>\n                    <tr>\n                        <th></th>\n                        <!-- ko foreach: Rows -->\n                        <th>\n                            <span data-bind=\"text: Items[0].FormattedValue\"></span>\n                        </th>\n                        <!-- /ko -->\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Columns\">\n                    <tr>\n                    <!-- ko if: $index() > 0 -->\n                    <td>\n                        <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n                    </td>\n                    <!-- ko foreach: $parent.Rows -->\n                    <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold() ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n                        <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n                    </td>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                    </tr>\n                </tbody>\n            </table>\n    \n        </div>\n    \n    </script>\n    \n    <script type=\"text/html\" id=\"report-table\">\n            <div class=\"table-responsive\" >\n            <table class=\"table table-hover table-condensed\">\n                <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n                    <tr class=\"no-highlight\">\n                        <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() -->\n                        <th style=\"width: 30px; border-left: 1px solid;\"></th>\n                        <!-- /ko -->\n                        <!-- ko template: 'report-column-header', data: $data -->\n                        <!-- /ko-->\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                        <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                            <!-- ko if: $parents[2].ReportType()=='Single' -->\n                            <div style=\"text-align: center; width: 100%\">\n                            <span style=\"font-size: 48px\" title=\"No data found\">/</span>\n                            </div>\n                            <!-- /ko -->\n                            <!-- ko if: $parents[2].ReportType()!='Single' -->\n                            No records found\n                            <!-- /ko -->\n                        </td>\n                    </tr>\n                    <!-- ko foreach: $parent.rows  -->\n                    <tr>\n                        <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n                        <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n                        <!-- /ko -->\n                        <!-- ko template: 'report-column', data: $data -->\n                        <!-- /ko-->\n                    </tr>\n                    <!-- ko if: isExpanded -->\n                    <tr>\n                        <td style=\"width: 30px;\"></td>\n                        <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n                            <!-- ko if: DrillDownData -->\n                            <table class=\"table table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n                                <thead>\n                                    <tr class=\"no-highlight\">\n                                        <!-- ko template: 'report-column-header', data: $data -->\n                                        <!-- /ko-->\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n                                        <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                            No records found\n                                        </td>\n                                    </tr>\n                                    <!-- ko foreach: Rows  -->\n                                    <tr>\n                                        <!-- ko template: 'report-column', data: $data -->\n                                        <!-- /ko-->\n                                    </tr>\n                                    <!-- /ko -->\n                                </tbody>\n                            </table>\n                            <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                                <div class=\"form-inline small text-muted\">\n                                    <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                        <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                                    </div>\n                                    <div class=\"pull-left\">\n                                        <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                                    </div>\n                                    <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                        <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                                    </div>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                        </td>\n                    </tr>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </tbody>\n                <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n                <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n                    <tr>\n                        <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n                        <td></td>\n                        <!-- /ko -->\n                        <!-- ko foreach: Items -->\n                        <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n                        <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n                            <span data-bind=\"html: FormattedValue, css: {'right-align': true}\"></span>\n                        </td>\n                        <!-- /ko -->\n                        <!-- /ko -->\n                    </tr>\n                </tfoot>\n                <!-- /ko -->\n            </table>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-template\">\n        <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n        <!-- ko if: $parent.ReportType() == 'Pivot' -->\n        <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n        <!-- /ko -->\n    \n        <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n        <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n            <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n            </a>\n            <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n                <li class=\"dropdown-item small\">\n                    <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n                        <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n                    </a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"clear-fix\"></div>\n    \n        <div data-bind=\"foreach: outerGroupData\">\n            <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n            <h6 data-bind=\"html: display\"></h6>\n            <div class=\"\" style=\"padding-top: 5px;\"></div>\n            <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n            <!-- /ko -->\n        </div>\n        <!-- /ko -->\n    </script>\n    <script type=\"text/html\" id=\"admin-mode-template\">\n        <div class=\"row\" style=\"padding: 10px 10px\">\n            <div class=\"material-switch pull-right\">\n                <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n                <label for=\"admin-mode\" class=\"label-primary\"></label>\n            </div>\n            <div class=\"pull-right\">Admin Mode</div>\n        </div>\n    \n        <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n            <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"manage-access-template\">\n        <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n        <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n    \n            <div class=\"form-group row\">\n                <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n                <div class=\"col-md-3 col-sm-3\">\n                    <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n                </div>\n                <div class=\"col-md-1 col-sm-1\">\n                    <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n                </div>\n            </div>\n            <div class=\"alert alert-info\">\n                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n            </div>\n    \n            <div class=\"row small\">\n                <div class=\"col-md-6\">\n                    <b>Manage by User</b> (allow edit)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.users -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <b>View only by User</b> (no edit/delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.viewOnlyUsers -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                        <b>Delete by User</b> (allow delete)\n                        <div class=\"row container-fluid\">\n                            <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n                            <div class=\"pull-left\">\n                                <div class=\"checkbox\">\n                                    <label class=\"label label-info\">\n                                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                    </label>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                            <div data-bind=\"if: manageAccess.users.length == 0\">\n                                Users list not populated or not applicable\n                            </div>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <b>Manage by User Role</b> (allow edit)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.userRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <b>View only by User Role</b> (no edit/delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                        <br />\n                        <b>Delete by User Role</b> (allow delete)\n                        <div class=\"row container-fluid\">\n                            <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n                            <div class=\"pull-left\">\n                                <div class=\"checkbox\">\n                                    <label class=\"label label-info\">\n                                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                    </label>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                            <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                                User Roles list not populated or not applicable\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"filter-group\">\n        <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n            <div class=\"rules-group-container\">\n                <div class=\"rules-group-header\">\n                    <div data-bind=\"visible: !isRoot\">\n                        <div class=\"pull-left\">\n                            <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n                            <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n                                <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n                            </label>\n                            <label class=\"btn btn-primary\">\n                                <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n                            </label>\n                            </div>\n                        </div>\n                        <div class=\"pull-right\">\n                            <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button>&nbsp;\n                        </div>\n                    </div>\n                    <div data-bind=\"visible: isRoot\">\n                        <div class=\"btn-group btn-group-sm\">\n                            <label class=\"btn btn-primary\">Filter Conditions</label>\n                        </div>\n                    </div>\n                    <div class=\"clearfix\"></div>\n                </div>\n    \n                <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n            </div>\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"fly-filter-template\">\n        <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n            <div class=\"card-header\">\n                <h5 class=\"card-title\">\n                    <a data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#filter-panel-' + ReportID() }\" href=\"#\">\n                        <i class=\"fa fa-filter\"></i>Choose filter options\n                    </a>\n                </h5>\n            </div>\n            <div data-bind=\"attr: {id: 'filter-panel-' + ReportID() }\" class=\"card-body collapse collapsed\">\n                <div>\n                    <!-- ko foreach: FlyFilters -->\n                    <div class=\"row\">\n                        <div class=\"col-sm-5 col-xs-4\">\n                            <div data-bind=\"with: Field\" class=\"checkbox\">\n                                <div class=\"checkbox\">\n                                    <label>\n                                        <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /><span data-bind=\"text: selectedFilterName\"></span>\n                                    </label>\n                                </div>\n                            </div>\n                        </div>\n                        <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n                            <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n                                <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                            </div>\n                        </div>\n                        <div data-bind=\"with: Field\" class=\"col-sm-5 col-xs-5\">\n                            <div data-bind=\"if: $parent.Apply\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <!-- /ko -->\n                    <button class=\"btn btn-primary\" data-bind=\"click: RunReport\">Refresh Report</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"filter-inner\">\n        <div class=\"rules-list\" >\n            <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n            <table class=\"table table-hover table-borderless\">\n                <thead>\n                    <tr>\n                        <th class=\"row\">\n                            <div class=\"col-md-1\"></div>\n                            <div class=\"col-md-4\">Field</div>\n                            <div class=\"col-md-2\"></div>\n                            <div class=\"col-md-4\">Filter</div>\n                            <div class=\"col-md-1\"></div>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Filters\">\n                    <tr class=\"rule-container\">\n                        <td class=\"row\">\n                            <div class=\"col-md-1\">\n                            <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n                                <option>And</option>\n                                <option>Or</option>\n                            </select>\n                            </div>\n                            <div class=\"col-md-3\">\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: $parents[$parents.length-2].selectedFieldsCanFilter, optionsText: 'selectedFieldName', optionsCaption: 'Please Choose', value: Field, attr: {required: Field()==null?'required':false}, disable: Field() && Field().forced\"></select>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2\">\n                                <div data-bind=\"with: Field\">\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                                </div>\n                                </div>\n                            </div>\n                            <div class=\"col-md-5\">\n                                <div data-bind=\"with: Field\">\n                                    <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                                </div>\n                                <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $parents[$parents.length-2].canAddSeries() && $index()==0 -->\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parents[$parents.length-2].AddSeries.bind($data)\">Add Comparison</button>\n                                <!--/ko -->\n                                <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n                            </div>\n                            <div class=\"col-md-1\">\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n                            </div>\n                        </td>\n                    </tr>\n                    <!-- ko foreach: compareTo -->\n                    <tr>\n                        <td class=\"row\">\n                            <div class=\"col-md-6\">&nbsp;</div>\n                            <div class=\"col-md-2\">\n                            <span style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></span>\n                            <span>Compare To</span>\n                            </div>\n                            <div class=\"col-md-4\">\n                                <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n                            </div>\n                        </td>\n                    </tr>\n                    <!-- /ko -->\n                </tbody>\n            </table>\n            </div>\n    \n            <div class=\"rule-container\" >\n                <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                <div>\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n                </div>\n            </div>\n        </div>\n    \n    </script>\n    \n    <script type=\"text/html\" id=\"filter-parameters\">\n        <div class=\"table-responsive card\">\n            <div class=\"card-body\">\n                <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n                <table class=\"table  table-hover table-borderless\" data-bind=\"visible: showParameters\">\n                    <thead>\n                        <tr>\n                            <th style=\"width: 30%\">Filter</th>\n                            <th style=\"width: 20%\"></th>\n                            <th style=\"width: 30%\">Value</th>\n                            <th></th>\n                        </tr>\n                    </thead>\n                    <tbody data-bind=\"foreach: Parameters\">\n                        <tr data-bind=\"ifnot: Hidden\">\n                            <td data-bind=\"text: DisplayName\">\n                            </td>\n                            <td>\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n                                </div>\n                            </td>\n                            <td data-bind=\"with: Field\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </td>\n                            <td></td>\n                        </tr>\n    \n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-schedule\">\n        <div data-bind=\"with: scheduleBuilder\">\n                <div class=\"checkbox\">\n                   <label>\n                      <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n                     Schedule Report\n                 </label>\n            </div>\n            <div data-bind=\"if: hasSchedule\">\n                    <div class=\"form-inline form-group\">\n                       <div class=\"row col-sm-12\">\n                            <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span>&nbsp;\n                            <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n                            <div data-bind=\"if: selectedOption() == 'once'\">\n                                &nbsp;on&nbsp;<input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n                            </div>\n                            <div data-bind=\"if: showDays\">\n                               &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n                            </div>\n                            <div data-bind=\"if: showDates\">\n                               &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n                            </div>\n                            <div data-bind=\"if: showMonths\">\n                              &nbsp;of&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n                            </div>\n                            <div data-bind=\"if: showAtTime\">\n                                &nbsp;at&nbsp;<select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n                                <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n                                <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n                                    <option>AM</option>\n                                    <option>PM</option>\n                                </select>\n                            </div>\n                       </div>\n                   </div>\n                  <div class=\"alert alert-info\">\n                      Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n                     <span data-bind=\"if: selectedOption() == 'once'\">\n                         on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n                    </span>\n                        <span data-bind=\"if: showDays\">\n                           on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n                      </span>\n                      <span data-bind=\"if: showDates\">\n                         on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n                         <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n                    </span>\n                    <span data-bind=\"if: showMonths\">\n                            of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n                       </span>\n                      <span data-bind=\"if: showAtTime\">\n                         at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n                     </span>\n                </div>\n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <label class=\"col-sm-2 control-label\">Email to</label>\n                           <div class=\"col-sm-6\">\n                              <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n                          </div>\n                         <label class=\"col-sm-2 control-label\">Report Format</label>\n                         <div class=\"col-sm-2\">\n                            <select class=\"form-control\" data-bind=\"value: format\">\n                                <option value=\"EXCEL\">Excel</option>\n                                    <option value=\"CSV\">CSV</option>\n                                   <option value=\"PDF\">PDF</option>\n                               </select>\n                          </div>\n                     </div>\n                </div>\n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <div class=\"col-sm-4 control-label\">\n                               <div class=\"checkbox\">\n                                  <label title=\"Set a date to start sending scheduled report\">\n                                      <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n                                     Set Schedule Start Date\n                                </label>\n                                </div>\n                           </div>\n                           <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n                              <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n                          </div>\n                     </div>\n                 </div>\n    \n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <div class=\"col-sm-4 control-label\">\n                              <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n                                  <label>\n                                     <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n                                     Set Schedule End Date\n                                </label>\n                            </div>\n                            </div>\n                           <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n                               <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n                          </div>\n                      </div>\n                 </div>\n             </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-field-options\">\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n            <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n                </div>\n                <div class=\"modal-body needs-validation\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n                                    Make Header Text Bold\n                                </label>\n                            </div>\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n                                    Make Text Bold\n                                </label>\n                            </div>\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc()\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n                                    Outer Group\n                                </label>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-link-edit\">\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n            <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\">Setup Link Field</h5>\n                </div>\n                <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n                        </div>\n                    </div>\n                    <div data-bind=\"if: LinksToReport\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n                            </div>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n                                Send field value as Report Filter Parameter\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n                            </div>\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: LinksToReport\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n                            </div>\n                        </div>\n                        <div class=\"checkbox\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n                                Send field value as Query Parameter\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n                            </div>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-designer\">\n        <div class=\"modal-dialog\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\" id=\"myModalLabel\">\n                        <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/blogs/docs/designing-reports\">\n                            <span class=\"fa fa-question-circle\"></span>\n                        </a>Design your Report\n                    </h5>\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\n                </div>\n                <div class=\"modal-body needs-validation\">\n                    <h5><span class=\"fa fa-file\"></span>&nbsp;Choose Report Type</h5>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n                                <span class=\"fa fa-2x fa-list-alt\"></span>\n                                <p>List</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n                                <span class=\"fa fa-2x fa-table\"></span>\n                                <p>Summary</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n                                <span class=\"fa fa-2x fa-bar-chart\"></span>\n                                <p>Bar</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n                                <span class=\"fa fa-2x fa-pie-chart\"></span>\n                                <p>Pie</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n                                <span class=\"fa fa-2x fa-line-chart\"></span>\n                                <p>Line</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType().indexOf('Map')==0}\">\n                                <span class=\"fa fa-2x fa-globe\"></span>\n                                <p>Map</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n                                <span class=\"fa fa-2x fa-window-maximize\"></span>\n                                <p>Single Value</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n                                <span class=\"fa fa-2x fa-random\"></span>\n                                <p>Pivot</p>\n                            </div>\n                        </div>\n                    </div>\n                    <hr />\n                    <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span>&nbsp;Choose Data for Report</h5>\n                    <div class=\"pull-right\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n                        <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n                            <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n                        </label>\n                        <label class=\"btn btn-primary\">\n                            <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n                        </label>\n                    </div>\n                    <div class=\"clearfix\"></div>\n                    <div class=\"row\">\n                        <div class=\"col-md-6\">\n                            <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n                            <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n                        </div>\n    \n                        <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n                            <div data-bind=\"with: textQuery.searchFields\">\n                                <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults, headers: headers }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n                            </div>\n                        </div>\n    \n                        <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n                            <div class=\"small pull-left\">\n                                Check the fields you would like to use in the Report\n                            </div>\n                            <div class=\"pull-right btn-toolbar\">\n                                <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n    \n                                <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n                                <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n                            </div>\n                        </div>\n                        <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n                            <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                <div class=\"list-group-item\">\n                                    <div class=\"checkbox\">\n                                        <label>\n                                            <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n                                            <span data-bind=\"text: fieldName\"></span>\n                                        </label>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n    \n                    <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n                        <br />\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n                            </div>\n                            <div class=\"card-body\">\n                                <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n                                    <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                        <div class=\"list-group-item\">\n                                            <div class=\"checkbox\">\n                                                <label>\n                                                    <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n                                                    <span data-bind=\"text: jsonColumnName\"></span>\n                                                </label>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n    \n                    <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n                        <br />\n                        <br />\n                        <div class=\"card\">\n                            <div class=\"card-body\">\n                                <div class=\"row\">\n                                    <div class=\"col-md-12 pull-right\">\n                                        <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n                                        <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n    \n                                    </div>\n                                    <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n                                        <div class=\"alert alert-info\">\n                                            You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n                                            Please note that Custom Field must be chosen in within the same Section and their data types must match.\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"row\">\n                                    <div class=\"col-sm-6 small\">\n                                        Setup your Formula for calculating this Field\n                                    </div>\n                                    <div class=\"col-sm-6 right-align\">\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n                                    </div>\n                                </div>\n                                <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n                                    <div class=\"col-sm-12\">\n                                        <div class=\"alert alert-info\">\n                                            For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Field Label</label>\n                                    <div class=\"col-sm-10\">\n                                        <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Data Format</label>\n                                    <div class=\"col-sm-10\">\n                                        <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n                                            <!-- ko ifnot: formulaOnlyHasDateFields -->\n                                            <option>String</option>\n                                            <option>Integer</option>\n                                            <option>Decimal</option>\n                                            <option>Currency</option>\n                                            <!-- /ko -->\n                                            <!-- ko if: formulaOnlyHasDateFields -->\n                                            <option>Days</option>\n                                            <option>Hours</option>\n                                            <option>Minutes</option>\n                                            <option>Seconds</option>\n                                            <!-- /ko -->\n                                        </select>\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n                                    <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n                                    <div class=\"col-sm-10\">\n                                        <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n                                    </div>\n                                </div>\n    \n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Field Formula</label>\n                                    <div class=\"col-sm-10\">\n                                        <div data-bind=\"foreach: formulaFields\">\n                                            <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n                                            <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n                                                <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n                                                    <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n                                                    <div data-bind=\"if: setupFormula.isConstantValue\">\n                                                        <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n                                            <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n                                                <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n                                                    <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n                                                    <option>+</option>\n                                                    <!-- /ko -->\n                                                    <option>-</option>\n                                                    <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n                                                    <option>*</option>\n                                                    <option>/</option>\n                                                    <!-- /ko -->\n                                                </select>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"clearfix\"></div>\n                    </div>\n                    <div data-bind=\"if: SelectedFields().length>0\">\n                        <hr />\n                        <h5><span class=\"fa fa-table\"></span>&nbsp;Selected data for the Report</h5>\n                        <div>\n                            <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Bar'\">\n                                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n                            </div>\n                            <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n                                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n                            </div>\n                            <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n                                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Pivot report, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n                            </div>\n                            <div data-bind=\"visible: ReportType()=='Map'\">\n                                <div class=\"alert alert-info\">\n                                    <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Map Graph, the first field below has to be a Region, like a Country.\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Map Display</label>\n                                    <div class=\"col-sm-4\">\n                                        <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n                                <li class=\"list-group-item\">\n                                    <div class=\"row\">\n                                        <div class=\"col\">\n                                            <span class=\"fa fa-columns\"></span>\n                                            <span data-bind=\"text: selectedFieldName\"></span>\n                                            <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n                                            <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n                                                <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n                                            </span>\n                                        </div>\n                                        <div class=\"col\">\n                                            <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n                                                <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n                                            </div>\n                                            <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n                                                <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n                                                    <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n                                                    <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n                                                    <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())  && $parent.isChart() && $index()>0\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n                                                    <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal()  &&  (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n                                                    <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n                                                    <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n                                                    <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n                                                    <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </li>\n                            </ul>\n                        </div>\n                        <hr />\n                        <div>\n                            <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\n    \n                            <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n                                <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n                                    <div data-bind=\"template: {name: 'filter-parameters'}\" ></div>\n                                </div>\n                                <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n                                    <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                                </div>\n    \n                                <div class=\"checkbox col-12\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n                                        Allow setting up and saving filters on Report\n                                    </label>\n                                </div>\n                                <br />\n                            </div>\n                        </div>\n                    </div>\n                    <hr />\n                    <div data-bind=\"if: SaveReport\">\n                    <h5><span class=\"fa fa-hourglass\"></span>&nbsp;Choose Schedule</h5>\n    \n                    <div style=\"padding: 10px 10px\">\n                        <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n                    </div>\n                    <hr />\n                    </div>\n                    <div>\n                        <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n                            <label class=\"col-sm-2 control-label\">Report Name</label>\n                            <div class=\"col-sm-10\">\n                                <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n                            </div>\n                        </div>\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-2 control-label\">Report Description</label>\n                            <div class=\"col-sm-10\">\n                                <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n                            </div>\n                        </div>\n                        <div data-bind=\"ifnot: useStoredProc\">\n                            <div class=\"form-group row\">\n                                <label class=\"col-sm-2 control-label\">Sort By</label>\n                                <div class=\"col-sm-6\">\n                                    <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n                                </div>\n                            </div>\n                            <div data-bind=\"foreach: SortFields\">\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">&nbsp;&nbsp;Then Sort By</label>\n                                    <div class=\"col-sm-4\">\n                                        <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n                                    Include Total Row\n                                </label>\n                            </div>\n                            <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n                                    Show only Unique Records\n                                </label>\n                            </div>\n                            <div class=\"form-group row\">\n                                <div class=\"checkbox col-md-2\">\n                                    <label >\n                                        <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n                                        Max Records\n                                    </label>\n                                </div>\n                                <div class=\"col-sm-10\" data-bind=\"if: maxRecords\">\n                                    <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"visible: isChart\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n                                Show Data along with Graph\n                            </label>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n                                Save Report\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n                            <label class=\"col-sm-2 control-label\">Choose Folder</label>\n                            <div class=\"col-sm-10\">\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n                            </div>\n                        </div>\n    \n                        <div data-bind=\"if: adminMode\">\n                            <hr />\n                            <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    ");
+            this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n    <!-- Dotnet Report HTML Templates -->\n    <script type=\"text/html\" id=\"report-filter\">\n        <div class=\"form-group\">\n            <!-- ko if: !hasForeignKey-->\n            <!-- ko if: fieldType=='DateTime'-->\n            <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n            <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n            <!-- /ko -->\n            <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n            From\n            <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n            to\n            <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n            <!-- /ko -->\n            <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n            <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n                <option value=\"\"></option>\n                <option>Today</option>\n                <option>Today +</option>\n                <option>Today -</option>\n                <option>Yesterday</option>\n                <option>This Week</option>\n                <option>Last Week</option>\n                <option>This Month</option>\n                <option>Last Month</option>\n                <option>This Year</option>\n                <option>Last Year</option>\n                <option>This Week To Date</option>\n                <option>This Month To Date</option>\n                <option>This Year To Date</option>\n                <option>Last 30 Days</option>\n                <optgroup label=\"Comparison Options\">\n                    <option>>= Today</option>\n                    <option><= Today</option>\n                    <option>>= Today +</option>\n                    <option><= Today +</option>\n                    <option>>= Today -</option>\n                    <option><= Today -</option>\n                </optgroup>\n            </select>\n            <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n                <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n            </div>\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n            <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n            <!-- /ko -->\n            <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n            From\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n            to\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n                <option value=\"1\">Yes</option>\n                <option value=\"0\">No</option>\n            </select>\n            <!-- /ko -->\n            <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: hasForeignKey && $parent.Operator() != 'all' -->\n            <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n            <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n            <!-- /ko -->\n            <!-- ko if: $parent.Operator()=='='-->\n            <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n            <!-- /ko -->\n            <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n            <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n            <!-- /ko -->\n            <!-- /ko -->\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"pager-template\">\n        <div class=\"pager-container\">\n            <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a>&nbsp;\n            <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n            <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n            <span class=\"pager-pageinfo\">\n                <span>Page</span>&nbsp;\n                <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n                                    value: currentPage,\n                                    attr: { max: pages() }\" />&nbsp;\n                <span>of</span>&nbsp;\n                <span data-bind=\"text: pages\"></span>\n            </span>&nbsp;\n    \n            <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a>&nbsp;\n            <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-column-header\">\n        <!-- ko foreach: Columns -->\n        <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n            <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n            <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n            <!-- /ko -->\n            <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false)  -->\n            <a href=\"\" data-bind=\"click: function(){ $parents[pagerIndex($parents)].changeSort(SqlField) }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n                <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n                <span data-bind=\"text: $parents[pagerIndex($parents)].pager.sortColumn() === SqlField ? ($parents[pagerIndex($parents)].pager.sortDescending() ? '&#9660;' : '&#9650;') : ''\"></span>\n            </a>\n            <!-- /ko -->\n    \n            <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n                <div class=\"dropup\">\n                <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                    <span class=\"fa fa-ellipsis-v\"></span>\n                </a>\n                    <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n                        <li class=\"dropdown-item small\">\n                            <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n                                <span class=\"fa fa-clone\"></span> Outer Group\n                            </a>\n                        </li>\n                        <li class=\"dropdown-item small\">\n                            <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n                                <span class=\"fa fa-gear\"></span> Field Settings\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n    \n        </th>\n        <!-- /ko -->\n    </script>\n    \n    <script type=\"text/html\" id=\"report-column\">\n        <!-- ko foreach: Items -->\n        <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n            <div data-bind=\"style: {'width': fieldWidth }\">\n            <!-- ko if: LinkTo-->\n            <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: formattedVal\"></span></a>\n            <!-- /ko-->\n            <!-- ko ifnot: LinkTo-->\n            <span data-bind=\"html: formattedVal\"></span>\n            <!-- /ko-->\n            </div>\n        </td>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-pivot\">\n            <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n            <table class=\"table table-striped table-hover table-condensed\">\n                <thead>\n                    <tr>\n                        <th></th>\n                        <!-- ko foreach: Rows -->\n                        <th>\n                            <span data-bind=\"text: Items[0].FormattedValue\"></span>\n                        </th>\n                        <!-- /ko -->\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Columns\">\n                    <tr>\n                    <!-- ko if: $index() > 0 -->\n                    <td>\n                        <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n                    </td>\n                    <!-- ko foreach: $parent.Rows -->\n                    <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold() ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n                        <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n                    </td>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                    </tr>\n                </tbody>\n            </table>\n    \n        </div>\n    \n    </script>\n    \n    <script type=\"text/html\" id=\"report-table\">\n        <div class=\"table-responsive\" >\n            <table class=\"table table-hover table-condensed\" data-bind=\"attr: {class: 'table table-striped table-hover table-condensed ' + $parents[2].selectedStyle()}\">        \n                <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n                    <tr class=\"no-highlight\">\n                        <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() && !CanExpandOption() -->\n                        <th style=\"width: 30px; border-left: 1px solid;\"></th>\n                        <!-- /ko -->\n                        <!-- ko template: 'report-column-header', data: $data -->\n                        <!-- /ko-->\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                        <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                            <!-- ko if: $parents[2].ReportType()=='Single' -->\n                            <div style=\"text-align: center; width: 100%\">\n                            <span style=\"font-size: 48px\" title=\"No data found\">/</span>\n                            </div>\n                            <!-- /ko -->\n                            <!-- ko if: $parents[2].ReportType()!='Single' -->\n                            No records found\n                            <!-- /ko -->\n                        </td>\n                    </tr>\n                    <!-- ko foreach: $parent.rows  -->\n                    <tr>\n                        <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && !$parent.CanExpandOption() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n                        <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n                        <!-- /ko -->\n                        <!-- ko template: 'report-column', data: $data -->\n                        <!-- /ko-->\n                    </tr>\n                    <!-- ko if: isExpanded -->\n                    <tr>\n                        <td style=\"width: 30px;\"></td>\n                        <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n                            <!-- ko if: DrillDownData -->\n                            <table class=\"table table-striped table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n                                <thead>\n                                    <tr class=\"no-highlight\">\n                                        <!-- ko template: 'report-column-header', data: $data -->\n                                        <!-- /ko-->\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n                                        <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                            No records found\n                                        </td>\n                                    </tr>\n                                    <!-- ko foreach: Rows  -->\n                                    <tr>\n                                        <!-- ko template: 'report-column', data: $data -->\n                                        <!-- /ko-->\n                                    </tr>\n                                    <!-- /ko -->\n                                </tbody>\n                            </table>\n                            <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                                <div class=\"form-inline small text-muted\">\n                                    <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                        <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                                    </div>\n                                    <div class=\"pull-left\">\n                                        <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                                    </div>\n                                    <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                        <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                                    </div>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                        </td>\n                    </tr>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </tbody>\n                <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n                <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n                    <tr>\n                        <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n                        <td></td>\n                        <!-- /ko -->\n                        <!-- ko foreach: Items -->\n                        <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n                        <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n                            <span data-bind=\"html: formattedVal, css: {'right-align': true}\"></span>\n                        </td>\n                        <!-- /ko -->\n                        <!-- /ko -->\n                    </tr>\n                </tfoot>\n                <!-- /ko -->\n            </table>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-template\">\n        <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n        <!-- ko if: $parent.ReportType() == 'Pivot' -->\n        <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n        <!-- /ko -->\n    \n        <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n        <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n            <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n            </a>\n            <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n                <li class=\"dropdown-item small\">\n                    <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n                        <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n                    </a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"clear-fix\"></div>\n    \n        <div data-bind=\"foreach: outerGroupData\">\n            <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n            <h6 data-bind=\"html: display\"></h6>\n            <div class=\"\" style=\"padding-top: 5px;\"></div>\n            <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n            <!-- /ko -->\n        </div>\n        <!-- /ko -->\n    </script>\n    <script type=\"text/html\" id=\"admin-mode-template\">\n        <div class=\"row\" style=\"padding: 10px 10px\">\n            <div class=\"material-switch pull-right\">\n                <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n                <label for=\"admin-mode\" class=\"label-primary\"></label>\n            </div>\n            <div class=\"pull-right\">Admin Mode</div>\n        </div>\n    \n        <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n            <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"manage-access-template\">\n        <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n        <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n    \n            <div class=\"form-group row\">\n                <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n                <div class=\"col-md-3 col-sm-3\">\n                    <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n                </div>\n                <div class=\"col-md-1 col-sm-1\">\n                    <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n                </div>\n            </div>\n            <div class=\"alert alert-info\">\n                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n            </div>\n    \n            <div class=\"row small\">\n                <div class=\"col-md-6\">\n                    <b>Manage by User</b> (allow edit)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.users -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <b>View only by User</b> (no edit/delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.viewOnlyUsers -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                        <b>Delete by User</b> (allow delete)\n                        <div class=\"row container-fluid\">\n                            <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n                            <div class=\"pull-left\">\n                                <div class=\"checkbox\">\n                                    <label class=\"label label-info\">\n                                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                    </label>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                            <div data-bind=\"if: manageAccess.users.length == 0\">\n                                Users list not populated or not applicable\n                            </div>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <b>Manage by User Role</b> (allow edit)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.userRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <b>View only by User Role</b> (no edit/delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                        <br />\n                        <b>Delete by User Role</b> (allow delete)\n                        <div class=\"row container-fluid\">\n                            <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n                            <div class=\"pull-left\">\n                                <div class=\"checkbox\">\n                                    <label class=\"label label-info\">\n                                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                    </label>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                            <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                                User Roles list not populated or not applicable\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"filter-group\">\n        <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n            <div class=\"rules-group-container\">\n                <div class=\"rules-group-header\">\n                    <div data-bind=\"visible: !isRoot\">\n                        <div class=\"pull-left\">\n                            <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n                            <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n                                <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n                            </label>\n                            <label class=\"btn btn-primary\">\n                                <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n                            </label>\n                            </div>\n                        </div>\n                        <div class=\"pull-right\">\n                            <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button>&nbsp;\n                        </div>\n                    </div>\n                    <div data-bind=\"visible: isRoot\">\n                        <div class=\"pull-left padded-div\">\n                            <label> &nbsp;Filter Conditions</label>\n                        </div>\n                    </div>\n                    <div class=\"clearfix\"></div>\n                </div>\n    \n                <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n            </div>\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"fly-filter-template\">\n        <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n            <div class=\"card-header\">\n                <a data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#filter-panel-' + ReportID() }\" href=\"#\">\n                    <i class=\"fa fa-filter\"></i> Choose Filters\n                </a>\n            </div>\n            <div data-bind=\"attr: {id: 'filter-panel-' + ReportID() }, css: {collpased: !DontExecuteOnRun(), collapse: !DontExecuteOnRun()}\" class=\"card-body\">\n                <div>\n                    <!-- ko foreach: FlyFilters -->\n                    <div class=\"row\">\n                        <div class=\"col-sm-5 col-xs-4\">\n                            <div data-bind=\"with: Field\" class=\"checkbox\">\n                                <div class=\"checkbox\">\n                                    <label>\n                                        <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /> <span data-bind=\"text: selectedFilterName\"></span>\n                                    </label>\n                                </div>\n                            </div>\n                        </div>\n                        <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n                            <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n                                <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                            </div>\n                        </div>\n                        <div data-bind=\"with: Field\" class=\"col-sm-5 col-xs-5\">\n                            <div data-bind=\"if: $parent.Apply\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <!-- /ko -->\n                    <button class=\"btn btn-primary\" data-bind=\"click: ExecuteReport\">Run</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"filter-inner\">\n        <div class=\"rules-list\" >\n            <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n            <table class=\"table table-striped table-hover table-borderless\">\n                <thead>\n                    <tr>\n                        <th class=\"row\">\n                            <div class=\"col-md-1\"></div>\n                            <div class=\"col-md-4\">Field</div>\n                            <div class=\"col-md-2\"></div>\n                            <div class=\"col-md-4\">Filter</div>\n                            <div class=\"col-md-1\"></div>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Filters\">\n                    <tr class=\"rule-container\">\n                        <td class=\"row\">\n                            <div class=\"col-md-1\">\n                            <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n                                <option>And</option>\n                                <option>Or</option>\n                            </select>\n                            </div>\n                            <div class=\"col-md-3\">\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"\n                                            options: $parents[$parents.length-2].selectedFieldsCanFilter != undefined \n                                                        ? $parents[$parents.length-2].selectedFieldsCanFilter\n                                                        : $parents[$parents.length-1].selectedFieldsCanFilter,\n                                            optionsText: 'selectedFieldName', \n                                            optionsCaption: 'Please Choose', \n                                            value: Field, \n                                            attr: {required: Field()==null?'required':false}, \n                                            disable: Field() && Field().forced\"></select>\n                                    </div>\n                            </div>\n                            <div class=\"col-md-2\">\n                                <div data-bind=\"with: Field\">\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                                </div>\n                                </div>\n                            </div>\n                            <div class=\"col-md-5\">\n                                <div data-bind=\"with: Field\">\n                                    <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                                </div>\n                                <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $index()==0 -->\n                                    <!-- ko if: $parents[$parents.length-2].canAddSeries != undefined && $parents[$parents.length-2].canAddSeries() -->\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parents[$parents.length-2].AddSeries.bind($data)\">Add Comparison</button>\n                                    <!--/ko -->\n                                    <!-- ko if: $parents[$parents.length-2].canAddSeries == undefined && $parentContext.$parent.canAddSeries != undefined && $parentContext.$parent.canAddSeries()-->\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parentContext.$parent.AddSeries.bind($data)\">Add Comparison</button>\n                                    <!--/ko -->\n                                <!--/ko -->\n                                <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n                            </div>\n                            <div class=\"col-md-1\">\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n                            </div>\n                        </td>\n                    </tr>\n                    <!-- ko foreach: compareTo -->\n                    <tr>\n                        <td class=\"row\">\n                            <div class=\"col-md-6\">&nbsp;</div>\n                            <div class=\"col-md-2\">\n                            <span style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></span>\n                            <span>Compare To</span>\n                            </div>\n                            <div class=\"col-md-4\">\n                                <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n                            </div>\n                        </td>\n                    </tr>\n                    <!-- /ko -->\n                </tbody>\n            </table>\n            </div>\n    \n            <div class=\"rule-container\" >\n                <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                <div>\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n                </div>\n            </div>\n        </div>\n    \n    </script>\n    \n    <script type=\"text/html\" id=\"filter-parameters\">\n        <div class=\"table-responsive card\">\n            <div class=\"card-body\">\n                <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n                <table class=\"table table-striped table-hover table-borderless\" data-bind=\"visible: showParameters\">\n                    <thead>\n                        <tr>\n                            <th style=\"width: 30%\">Filter</th>\n                            <th style=\"width: 20%\"></th>\n                            <th style=\"width: 30%\">Value</th>\n                            <th></th>\n                        </tr>\n                    </thead>\n                    <tbody data-bind=\"foreach: Parameters\">\n                        <tr data-bind=\"ifnot: Hidden\">\n                            <td data-bind=\"text: DisplayName\">\n                            </td>\n                            <td>\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n                                </div>\n                            </td>\n                            <td data-bind=\"with: Field\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </td>\n                            <td></td>\n                        </tr>\n    \n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-schedule\">\n        <div data-bind=\"with: scheduleBuilder\">\n                <div class=\"checkbox\">\n                   <label>\n                      <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n                     Schedule Report\n                 </label>\n            </div>\n            <div data-bind=\"if: hasSchedule\">\n                    <div class=\"form-inline form-group\">\n                       <div class=\"row col-sm-12\">\n                            <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span>&nbsp;\n                            <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n                            <div data-bind=\"if: selectedOption() == 'once'\">\n                                &nbsp;on&nbsp;<input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n                            </div>\n                            <div data-bind=\"if: showDays\">\n                               &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n                            </div>\n                            <div data-bind=\"if: showDates\">\n                               &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n                            </div>\n                            <div data-bind=\"if: showMonths\">\n                              &nbsp;of&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n                            </div>\n                            <div data-bind=\"if: showAtTime\">\n                                &nbsp;at&nbsp;<select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n                                <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n                                <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n                                    <option>AM</option>\n                                    <option>PM</option>\n                                </select>\n                            </div>\n                       </div>\n                   </div>\n                  <div class=\"alert alert-info\">\n                      Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n                     <span data-bind=\"if: selectedOption() == 'once'\">\n                         on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n                    </span>\n                        <span data-bind=\"if: showDays\">\n                           on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n                      </span>\n                      <span data-bind=\"if: showDates\">\n                         on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n                         <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n                    </span>\n                    <span data-bind=\"if: showMonths\">\n                            of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n                       </span>\n                      <span data-bind=\"if: showAtTime\">\n                         at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n                     </span>\n                </div>\n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <label class=\"col-sm-2 control-label\">Email to</label>\n                           <div class=\"col-sm-6\">\n                              <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n                          </div>\n                         <label class=\"col-sm-2 control-label\">Report Format</label>\n                         <div class=\"col-sm-2\">\n                            <select class=\"form-control\" data-bind=\"value: format\">\n                                <option value=\"EXCEL\">Excel</option>\n                                    <option value=\"CSV\">CSV</option>\n                                   <option value=\"PDF\">PDF</option>\n                               </select>\n                          </div>\n                     </div>\n                </div>\n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <div class=\"col-sm-4 control-label\">\n                               <div class=\"checkbox\">\n                                  <label title=\"Set a date to start sending scheduled report\">\n                                      <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n                                     Set Schedule Start Date\n                                </label>\n                                </div>\n                           </div>\n                           <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n                              <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n                          </div>\n                     </div>\n                 </div>\n    \n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <div class=\"col-sm-4 control-label\">\n                              <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n                                  <label>\n                                     <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n                                     Set Schedule End Date\n                                </label>\n                            </div>\n                            </div>\n                           <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n                               <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n                          </div>\n                      </div>\n                 </div>\n             </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-field-options\">\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n            <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n                </div>\n                <div class=\"modal-body needs-validation\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n                        </div>\n                    </div>\n                      <div class=\"form-group row\" data-bind=\"visible: $parent.dateFormatTypes.indexOf($data.fieldFormat())>=0\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Date Format</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.dateFormats, value: dateFormat\"></select>\n                        </div>\n                    </div>\n                       <div class=\"form-group row\" data-bind=\"visible: dateFormat()==='Custom'\">\n                         <label class=\"col-sm-5 col-md-5 control-label\">Enter Custom Date Format</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" data-bind=\"value: customDateFormat\" placeholder=\"dd/mm/yyyy\" />\n                        </div>\n                     </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n                                    Make Header Text Bold\n                                </label>\n                            </div>\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n                                    Make Text Bold\n                                </label>\n                            </div>\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc() || $parent.ReportType() == 'List'\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n                                    Outer Group\n                                </label>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-link-edit\">\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n            <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\">Setup Link Field</h5>\n                </div>\n                <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n                        </div>\n                    </div>\n                    <div data-bind=\"if: LinksToReport\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n                            </div>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n                                Send field value as Report Filter Parameter\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n                            </div>\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: LinksToReport\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n                            </div>\n                        </div>\n                        <div class=\"checkbox\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n                                Send field value as Query Parameter\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n                            </div>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-designer\">\n        <div class=\"modal-dialog\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\" id=\"myModalLabel\">\n                        <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/blogs/docs/designing-reports\">\n                            <span class=\"fa fa-question-circle\"></span>\n                        </a>Design your Report\n                    </h5>\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\n                </div>\n                <div class=\"modal-body needs-validation\">\n                    <div class=\"card card-body\">\n                        <h5><span class=\"fa fa-file\"></span>&nbsp;Choose Report Type</h5>\n                        <div class=\"row\">\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n                                    <span class=\"fa fa-2x fa-list-alt\"></span>\n                                    <p>List</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n                                    <span class=\"fa fa-2x fa-table\"></span>\n                                    <p>Summary</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n                                    <span class=\"fa fa-2x fa-bar-chart\"></span>\n                                    <p>Bar</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n                                    <span class=\"fa fa-2x fa-pie-chart\"></span>\n                                    <p>Pie</p>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n                                    <span class=\"fa fa-2x fa-line-chart\"></span>\n                                    <p>Line</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType().indexOf('Map')==0}\">\n                                    <span class=\"fa fa-2x fa-globe\"></span>\n                                    <p>Map</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n                                    <span class=\"fa fa-2x fa-window-maximize\"></span>\n                                    <p>Widget</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n                                    <span class=\"fa fa-2x fa-random\"></span>\n                                    <p>Transpose</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <br />\n                    <div class=\"card card-body\">\n                        <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span>&nbsp;Choose Data for Report</h5>\n                        <div class=\"pull-right\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n                            <label class=\"btn btn-sm btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n                                <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n                            </label>\n                            <label class=\"btn btn-sm btn-primary\">\n                                <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n                            </label>\n                        </div>\n                        <div class=\"clearfix\"></div>\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n                                <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n                            </div>\n    \n                            <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n                                <div data-bind=\"with: textQuery.searchFields\">\n                                    <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults, headers: headers }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n                                </div>\n                            </div>\n    \n                            <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n                                <div class=\"small pull-left\">\n                                    Check the fields you would like to use in the Report\n                                </div>\n                                <div class=\"pull-right btn-toolbar\">\n                                    <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n    \n                                    <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n                                    <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n                                </div>\n                            </div>\n                            <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n                                <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                    <div class=\"list-group-item\">\n                                        <div class=\"checkbox\">\n                                            <label>\n                                                <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n                                                <span data-bind=\"text: fieldName\"></span>\n                                            </label>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n    \n                        <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n                            <br />\n                            <div class=\"card\">\n                                <div class=\"card-header\">\n                                    <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n                                </div>\n                                <div class=\"card-body\">\n                                    <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n                                        <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                            <div class=\"list-group-item\">\n                                                <div class=\"checkbox\">\n                                                    <label>\n                                                        <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n                                                        <span data-bind=\"text: jsonColumnName\"></span>\n                                                    </label>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n    \n                        <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n                            <br />\n                            <br />\n                            <div class=\"card\">\n                                <div class=\"card-body\">\n                                    <div class=\"row\">\n                                        <div class=\"col-md-12 pull-right\">\n                                            <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n                                            <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n    \n                                        </div>\n                                        <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n                                            <div class=\"alert alert-info\">\n                                                You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n                                                Please note that Custom Field must be chosen in within the same Section and their data types must match.\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"row\">\n                                        <div class=\"col-sm-6 small\">\n                                            Setup your Formula for calculating this Field\n                                        </div>\n                                        <div class=\"col-sm-6 right-align\">\n                                            <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n                                            <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n                                            <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n                                        </div>\n                                    </div>\n                                    <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n                                        <div class=\"col-sm-12\">\n                                            <div class=\"alert alert-info\">\n                                                For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"form-group row\">\n                                        <label class=\"col-sm-2 control-label\">Field Label</label>\n                                        <div class=\"col-sm-10\">\n                                            <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n                                        </div>\n                                    </div>\n                                    <div class=\"form-group row\">\n                                        <label class=\"col-sm-2 control-label\">Data Format</label>\n                                        <div class=\"col-sm-10\">\n                                            <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n                                                <!-- ko ifnot: formulaOnlyHasDateFields -->\n                                                <option>String</option>\n                                                <option>Integer</option>\n                                                <option>Decimal</option>\n                                                <option>Currency</option>\n                                                <!-- /ko -->\n                                                <!-- ko if: formulaOnlyHasDateFields -->\n                                                <option>Days</option>\n                                                <option>Hours</option>\n                                                <option>Minutes</option>\n                                                <option>Seconds</option>\n                                                <!-- /ko -->\n                                            </select>\n                                        </div>\n                                    </div>\n                                    <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n                                        <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n                                        <div class=\"col-sm-10\">\n                                            <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n                                        </div>\n                                    </div>\n    \n                                    <div class=\"form-group row\">\n                                        <label class=\"col-sm-2 control-label\">Field Formula</label>\n                                        <div class=\"col-sm-10\">\n                                            <div data-bind=\"foreach: formulaFields\">\n                                                <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n                                                <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n                                                    <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n                                                        <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n                                                        <div data-bind=\"if: setupFormula.isConstantValue\">\n                                                            <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n                                                <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n                                                    <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n                                                        <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n                                                        <option>+</option>\n                                                        <!-- /ko -->\n                                                        <option>-</option>\n                                                        <!-- ko if: ['Integer','Money','Float','Double','Decimal','Currency'].indexOf($parent.formulaDataFormat()) != -1 -->\n                                                        <option>*</option>\n                                                        <option>/</option>\n                                                        <!-- /ko -->\n                                                    </select>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"clearfix\"></div>\n                        </div>\n                        <div data-bind=\"if: SelectedFields().length>0\">\n                            <hr />\n                            <h5><span class=\"fa fa-table\"></span>&nbsp;Selected data for the Report</h5>\n                            <div>\n                                <div data-bind=\"visible: ReportType()=='Bar'\" class=\"card card-body\" style=\"margin-bottom: 15px\">\n                                    <div class=\"alert alert-info\">\n                                        <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n                                    </div>\n                                    <div class=\"form-group row\">\n                                        <div class=\"checkbox col-6\">\n                                            <label>\n                                                <input type=\"checkbox\" data-bind=\"checked: barChartHorizontal\" />\n                                                Horizontal Bar Chart\n                                            </label>\n                                        </div>\n                                        <div class=\"checkbox col-6\">\n                                            <label>\n                                                <input type=\"checkbox\" data-bind=\"checked: barChartStacked\" />\n                                                Stacked Bar Chart\n                                            </label>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n                                    <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n                                </div>\n                                <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n                                    <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Transpose, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n                                </div>\n                                <div data-bind=\"visible: ReportType()=='Map'\" class=\"card card-body\" style=\"margin-bottom: 15px\">\n                                    <div class=\"alert alert-info\">\n                                        <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Map Graph, the first field below has to be a Region, like a Country.\n                                    </div>\n                                    <div class=\"form-group row\">\n                                        <label class=\"col-sm-2 control-label\">Map Display</label>\n                                        <div class=\"col-sm-4\">\n                                            <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n                                    <li class=\"list-group-item\">\n                                        <div class=\"row\">\n                                            <div class=\"col\">\n                                                <span class=\"fa fa-columns\"></span>\n                                                <span data-bind=\"text: selectedFieldName\"></span>\n                                                <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n                                                <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n                                                    <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n                                                </span>\n                                            </div>\n                                            <div class=\"col\">\n                                                <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n                                                    <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n                                                </div>\n                                                <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                    <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                    <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n                                                    <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n                                                        <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n                                                        <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n                                                        <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())  && $parent.isChart() && $index()>0\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n                                                        <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal()  &&  (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n                                                        <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n                                                        <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n                                                        <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n                                                        <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n                                                    </span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                    <br />\n                    <div class=\"card card-body\">\n                        <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\n    \n                        <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n                            <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n                                <div data-bind=\"template: {name: 'filter-parameters'}\"></div>\n                            </div>\n                            <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n                                <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                            </div>\n    \n                            <div class=\"checkbox col-12\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n                                    Allow setting up and saving filters on Report\n                                </label>\n                            </div>\n                            <br />\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"visible: SaveReport\" class=\"card card-body\">\n                        <h5><span class=\"fa fa-hourglass\"></span>&nbsp;Choose Schedule</h5>\n    \n                        <div style=\"padding: 10px 10px\" data-bind=\"if: SaveReport\">\n                            <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n                        </div>\n                    </div>\n                    <br />\n                    <div class=\"card card-body\">\n                        <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n                            <label class=\"col-sm-2 control-label\">Report Name</label>\n                            <div class=\"col-sm-10\">\n                                <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n                            </div>\n                        </div>\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-2 control-label\">Report Description</label>\n                            <div class=\"col-sm-10\">\n                                <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n                            </div>\n                        </div>\n                        <div data-bind=\"ifnot: useStoredProc\">\n                            <div class=\"form-group row\">\n                                <label class=\"col-sm-2 control-label\">Sort By</label>\n                                <div class=\"col-sm-6\">\n                                    <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n                                </div>\n                            </div>\n                            <div data-bind=\"foreach: SortFields\">\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">&nbsp;&nbsp;Then Sort By</label>\n                                    <div class=\"col-sm-4\">\n                                        <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n    \n                        <div class=\"checkbox\" data-bind=\"visible: isChart\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n                                Show Data along with Graph\n                            </label>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n                                Save Report\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n                            <label class=\"col-sm-2 control-label\">Choose Folder</label>\n                            <div class=\"col-sm-10\">\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n                            </div>\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"ifnot: useStoredProc\" class=\"card card-body\">\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <h5><span class=\"fa fa-gear\"></span>&nbsp;Other Settings</h5>\n                                <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n                                        Include Total Row\n                                    </label>\n                                </div>\n                                <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n                                        Show only Unique Records\n                                    </label>\n                                </div>\n                                <div class=\"checkbox\" data-bind=\"visible: ReportType()!='List'\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: ShowExpandOption\" />\n                                        Don't Show Expand Option\n                                    </label>\n                                </div>\n                                <div class=\"checkbox\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: DontExecuteOnRun\" />\n                                        Wait to Select Filters before Running Report\n                                    </label>\n                                </div>\n                                <div class=\"form-group row\">\n                                    <div class=\"checkbox col-md-4\">\n                                        <label>\n                                            <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n                                            Max Records\n                                        </label>\n                                    </div>\n                                    <div class=\"col-md-6\" data-bind=\"if: maxRecords\">\n                                        <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"col-md-6\">\n                                <h5><span class=\"fa fa-paint-brush\"></span>&nbsp;Pick Report Format</h5>\n                                <div>\n                                    <!-- ko foreach: tableStyles -->\n                                    <div class=\"dropdown-option\" data-bind=\"title: $data.name, click: $parent.selectStyle, css: {'dropdown-option-selected': $parent.selectedStyle() == $data.colorscheme}\">\n                                        <div class=\"mini-table-preview\" data-bind=\"foreach: new Array(5)\">\n                                            <div class=\"mini-table-row\" data-bind=\"foreach: new Array(5)\">\n                                                <div class=\"mini-table-cell\" data-bind=\"style: { backgroundColor: $parentContext.$index() === 0 ? $parents[1].headerBg : ($parentContext.$index() % 2 === 0 ? $parents[1].altRowBg : $parents[1].rowBg), color: $parents[1].textColor }\"></div>\n    \n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- /ko -->\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"visible: adminMode\" class=\"card card-body\">\n                        <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <div class=\"modal\" id=\"drilldownModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n        <div class=\"modal-dialog modal-lg\">\n            <div class=\"modal-content\" data-bind=\"with: ChartDrillDownData\">\n                <div class=\"modal-header\">\n                    <h4 class=\"modal-title\">Drilldown Data</h4>\n                    <button type=\"button\" class=\"close pull-right\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n                </div>\n                <!-- ko if: DrillDownData -->\n                <div class=\"modal-body\">\n                    <table class=\"table table-striped table-hover table-condensed\" data-bind=\"with: DrillDownData, attr: {class: 'table table-striped table-hover table-condensed ' + $parent.selectedStyle()}\">\n                        <thead>\n                            <tr class=\"no-highlight\">\n                                <!-- ko foreach: Columns -->\n                                <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n                                    <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n                                   \n                                </th>\n                                <!-- /ko -->\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n                                <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                    No records found\n                                </td>\n                            </tr>\n                            <!-- ko foreach: Rows  -->\n                            <tr>\n                                <!-- ko foreach: Items -->\n                                <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal' }\">\n                                    <div data-bind=\"style: {'width': fieldWidth }\">\n                                        <!-- ko if: LinkTo-->\n                                        <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: formattedVal\"></span></a>\n                                        <!-- /ko-->\n                                        <!-- ko ifnot: LinkTo-->\n                                        <span data-bind=\"html: formattedVal\"></span>\n                                        <!-- /ko-->\n                                    </div>\n                                </td>\n                                <!-- /ko-->\n                            </tr> \n                            <!-- /ko -->\n                        </tbody>\n                    </table>\n                </div>\n                <div class=\"modal-footer\">\n                    <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                        <div class=\"form-inline small text-muted\">\n                            <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                            </div>\n                            <div class=\"pull-left\">\n                                <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                            </div>\n                            <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- /ko -->\n            </div>\n        </div>\n    </div>\n    \n    <div class=\"modal\" id=\"noaccountModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n        <div class=\"modal-dialog\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n                    <h4 class=\"modal-title\">Account not Setup</h4>\n                </div>\n                <div class=\"modal-body\">\n                    <p class=\"alert alert-danger\">dotnet Report Account Configuration missing!</p>\n                    <p>You do not have the neccessary initial configuration completed to use dotnet Report.</p>\n                    <p>Please view the <a href=\"https://dotnetreport.com/blogs/getting-started-with-dotnet-report/\" target=\"_blank\">Getting Started Guide</a> to correctly configure dotnet Report.</p>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n                </div>\n            </div>\n        </div>\n    </div>\n    \n    ");
             this.cdref.detectChanges();
         };
         DotnetreportComponent.prototype.bindWindowResize = function (vm) {
@@ -118,7 +118,7 @@
         return DotnetreportComponent;
     }());
     DotnetreportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DotnetreportComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.DomSanitizer }, { token: i0__namespace.ChangeDetectorRef }, { token: BASE_URL_TOKEN }, { token: i2__namespace.HttpClient }, { token: i3__namespace.ActivatedRoute }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DotnetreportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DotnetreportComponent, selector: "app-dotnetreport", ngImport: i0__namespace, template: "<div id=\"dot-net-report\" class=\"body-content\">\r\n\r\n    \r\n<div class=\"container-fluid\">\r\n\r\n    <div data-bind=\"template: {name: 'admin-mode-template'}, visible: allowAdmin\" style=\"display: none;\"></div>\r\n\r\n    <!--\r\n        The markup code below is related to presentation. You don't have to change it, unless you\r\n        intentionally want to change something in the Report Builder's behavior in your Application.\r\n        It's Recommended you use it as is. You will be responsible for managing and maintaining any changes.\r\n    -->\r\n    <!-- Folders/Report List -->\r\n    <div id=\"report-start\" data-bind=\"if: ReportMode() == 'start' || ReportMode() == 'generate'\">\r\n        <h3>Report Builder</h3>\r\n        <p>\r\n            Manage your Reports below. You can use the intuitive and user friendly Report Builder to create many types of Ad-hoc Reports.\r\n        </p>\r\n        <div class=\"card folder-panel\">\r\n            <div class=\"card-header\">\r\n                <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\r\n                    <a class=\"navbar-brand\" href=\"#\" data-bind=\"click: function() {SelectedFolder(null); designingHeader(false); searchReports(''); }\">Manage Reports</a>\r\n                    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n                        <span class=\"navbar-toggler-icon\"></span>\r\n                    </button>\r\n\r\n                    <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\r\n                        <ul class=\"navbar-nav mr-auto\">\r\n\r\n                            <li class=\"nav-item active\" data-bind=\"visible: CanSaveReports() || adminMode()\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: createNewReport\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                    <span class=\"fa fa-plus\"></span> Create a New Report\r\n                                </a>\r\n                            </li>\r\n\r\n                            <li class=\"nav-item\" data-bind=\"visible: CanManageFolders() || adminMode()\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: ManageFolder.newFolder\">\r\n                                    <span class=\"fa fa-folder-o\"></span> Add a new Folder\r\n                                </a>\r\n                            </li>\r\n                            <li class=\"nav-item dropdown\" data-bind=\"visible: (CanManageFolders() || adminMode()) && SelectedFolder()!=null\">\r\n                                <a href=\"#\" class=\"nav-link dropdown-toggle\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <span class=\"fa fa-folder\"></span> Folder Options\r\n                                </a>\r\n                                <div class=\"dropdown-menu\">\r\n                                    <a class=\"dropdown-item\" href=\"#\" data-bind=\"click: ManageFolder.editFolder\">Edit Selected Folder</a>\r\n                                    <a class=\"dropdown-item\" href=\"#\" data-bind=\"click: ManageFolder.deleteFolder\">Delete Selected Folder</a>\r\n                                </div>\r\n                            </li>\r\n                            <li class=\"nav-item active\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: function(){ initHeaderDesigner(); }\">\r\n                                    <span class=\"fa fa-arrow-up\"> Report Header</span>\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                        <form class=\"form-inline my-5 my-md-0\">\r\n                            <div data-bind=\"with: searchFieldsInReport\">\r\n                                <select id=\"search-report\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Search Report by Name, Description or Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults }, minimumInputLength: 2, language: language, allowClear: true }, value: selectedOption\"></select>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                </nav>\r\n            </div>\r\n            <div class=\"card-body\">\r\n                <div data-bind=\"visible: designingHeader, with: headerDesigner\" style=\"display: none;\" class=\"overflow-auto\">\r\n                    <div class=\"checkbox\">\r\n                        <label>\r\n                            <input type=\"checkbox\" data-bind=\"checked: UseReportHeader\"> Use Report Header\r\n                        </label>\r\n                    </div>\r\n                    <div data-bind=\"visible: UseReportHeader\">\r\n                        <p class=\"alert alert-info\">\r\n                            You can design the common report header below that will be applied to all reports where report headers are turned on.\r\n                        </p>\r\n                        <canvas id=\"report-header\" width=\"900\" height=\"120\" style=\"border: solid 1px #ccc\"></canvas>\r\n                        <div class=\"form-inline\">\r\n                            <div class=\"form-group\">\r\n                                <button class=\"btn btn-sm\" title=\"Add Text\" data-bind=\"click: addText\"><span class=\"fa fa-font\"></span></button>\r\n                                <label class=\"btn btn-sm\" title=\"Add Image\">\r\n                                    <span class=\"fa fa-image\"></span>\r\n                                    <input type=\"file\" accept=\"image/*\" hidden data-bind=\"event: { change: function() { uploadImage($element.files[0]) } }\" />\r\n                                </label>\r\n                                <button class=\"btn btn-sm\" title=\"Add Line\" data-bind=\"click: addLine\"><span class=\"fa fa-arrows-h\"></span></button>\r\n                            </div>\r\n                            <div data-bind=\"if: selectedObject()\">\r\n                                <div class=\"form-group\">\r\n                                    &nbsp;|&nbsp;\r\n                                    <button class=\"btn btn-sm\" data-bind=\"click: remove\" title=\"Delete\"><span class=\"fa fa-trash\"></span></button>\r\n                                    <div data-bind=\"if: getText()\">\r\n                                        <select class=\"form-control form-control-sm\" title=\"Font Family\" data-bind=\"event: {change: setFontFamily }, value: objectProperties.fontFamily\">\r\n                                            <option value=\"arial\" selected>Arial</option>\r\n                                            <option value=\"helvetica\">Helvetica</option>\r\n                                            <option value=\"myriad pro\">Myriad Pro</option>\r\n                                            <option value=\"delicious\">Delicious</option>\r\n                                            <option value=\"verdana\">Verdana</option>\r\n                                            <option value=\"georgia\">Georgia</option>\r\n                                            <option value=\"courier\">Courier</option>\r\n                                            <option value=\"comic sans ms\">Comic Sans MS</option>\r\n                                            <option value=\"impact\">Impact</option>\r\n                                            <option value=\"monaco\">Monaco</option>\r\n                                            <option value=\"optima\">Optima</option>\r\n                                            <option value=\"hoefler text\">Hoefler Text</option>\r\n                                            <option value=\"plaster\">Plaster</option>\r\n                                            <option value=\"engagement\">Engagement</option>\r\n                                        </select>\r\n                                        &nbsp;\r\n                                        <select class=\"form-control form-control-sm\" title=\"Text Align\" data-bind=\"event: {change: setTextAlign }, value: objectProperties.textAlign\">\r\n                                            <option>Left</option>\r\n                                            <option>Center</option>\r\n                                            <option>Right</option>\r\n                                            <option>Justify</option>\r\n                                        </select>\r\n                                        &nbsp;\r\n                                        <input type=\"color\" size=\"5\" class=\"btn-object-action\" title=\"Font Color\" data-bind=\"event: {change: setFontColor }, value: objectProperties.fontColor\">\r\n                                        <button class=\"btn btn-sm\" title=\"Bold\" data-bind=\"event: {click: setFontBold }, value: objectProperties.fontBold\"><span class=\"fa fa-bold\"></span></button>\r\n                                        <button class=\"btn btn-sm\" title=\"Italic\" data-bind=\"event: {click: setFontItalic }, value: objectProperties.fontItalic\"><span class=\"fa fa-italic\"></span></button>\r\n                                        <button class=\"btn btn-sm\" title=\"Underline\" data-bind=\"event: {click: setFontUnderline }, value: objectProperties.fontUnderline\"><span class=\"fa fa-underline\"></span></button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button class=\"btn btn-primary\" data-bind=\"click: saveCanvas\">Save Changes</button>\r\n                </div>\r\n                <div data-bind=\"ifnot: designingHeader\">\r\n                    <div data-bind=\"visible: !SelectedFolder() && !searchReports()\">\r\n                        <p>Please choose Folders below to view Reports</p>\r\n                        <ul class=\"folder-list\" data-bind=\"foreach: Folders\">\r\n                            <li data-bind=\"click: function(){ $parent.SelectedFolder($data); }\">\r\n                                <span class=\"fa fa-3x fa-folder\" style=\"color: #ffd800\"></span>\r\n                                <span class=\"desc\" data-bind=\"text: FolderName\"></span>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div data-bind=\"visible: SelectedFolder() || searchReports()\">\r\n                        <div class=\"clearfix\">\r\n                            <p class=\"pull-left\">Please choose a Report from this Folder</p>\r\n                            <div class=\"pull-right\">\r\n                                <a href=\"#\" data-bind=\"click: function(){ SelectedFolder(null); }\">\r\n                                    ..back to Folders List\r\n                                </a>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"list-group list-overflow\">\r\n                            <div data-bind=\"if: SelectedFolder()!=null && reportsInFolder().length==0\">\r\n                                No Reports Saved in this Folder\r\n                            </div>\r\n                            <div data-bind=\"if: searchReports() && reportsInSearch().length==0\">\r\n                                No Reports found matching your Search\r\n                            </div>\r\n                            <div data-bind=\"foreach: searchReports() ? reportsInSearch() : reportsInFolder()\">\r\n                                <div class=\"list-group-item\">\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-sm-7\">\r\n                                            <div class=\"fa fa-2x pull-left\" data-bind=\"css: {'fa-file': reportType=='List', 'fa-th-list': reportType=='Summary', 'fa-bar-chart': reportType=='Bar', 'fa-pie-chart': reportType=='Pie',  'fa-line-chart': reportType=='Line', 'fa-globe': reportType =='Map', 'fa-window-maximize': reportType=='Single', 'fa-random': reportType=='Pivot'}\"></div>\r\n                                            <div class=\"pull-left\">\r\n                                                <h4>\r\n                                                    <a data-bind=\"click: runReport\" style=\"cursor: pointer\">\r\n                                                        <span data-bind=\"highlightedText: { text: reportName, highlight: $parent.searchReports, css: 'highlight' }\"></span>\r\n                                                    </a>\r\n                                                </h4>\r\n                                            </div>\r\n                                            <div class=\"clearfix\"></div>\r\n                                            <p data-bind=\"text: reportDescription\"></p>\r\n                                            <p data-bind=\"if: $parent.searchReports()\"><span class=\"fa fa-folder\"></span> <span data-bind=\"text: folderName\"></span></p>\r\n                                            <div data-bind=\"if: $parent.adminMode\">\r\n                                                <div class=\"small\">\r\n                                                    <b>Report Access</b><br />\r\n                                                    Manage by User <span class=\"badge badge-info\" data-bind=\"text: userId ? userId : 'No User'\"></span>\r\n                                                    <br />\r\n                                                    View only by User <span class=\"badge badge-info\" data-bind=\"text: (viewOnlyUserId ? viewOnlyUserId : (userId ? userId : 'Any User'))\"></span>\r\n                                                    <br />\r\n                                                    <div data-bind=\"if: deleteOnlyUserId\">\r\n                                                        Delete only by User <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserId\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div data-bind=\"if: userRole\">\r\n                                                        Manage by Role <span class=\"badge badge-info\" data-bind=\"text: userRole ? userRole : 'No Role'\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div data-bind=\"if: viewOnlyUserRole\">\r\n                                                        View only by Role <span class=\"badge badge-info\" data-bind=\"text: viewOnlyUserRole ? viewOnlyUserRole : 'Any Role'\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div data-bind=\"if: deleteOnlyUserRole\">\r\n                                                        Delete only by Role <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserRole ? deleteOnlyUserRole : 'Same as Manage'\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div data-bind=\"if: clientId\">\r\n                                                        For Client <span class=\"label label-info\" data-bind=\"text: clientId ? clientId : 'Any'\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-sm-5 right-align\">\r\n                                            <div class=\"d-none d-md-block\">\r\n                                                <br />\r\n                                                <span data-bind=\"if: $root.CanSaveReports() || $root.adminMode() \">\r\n                                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: openReport, visible: canEdit\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                        <span class=\"fa fa-edit\" aria-hidden=\"true\"></span>Edit\r\n                                                    </button>\r\n                                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: copyReport\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                        <span class=\"fa fa-copy\" aria-hidden=\"true\"></span>Copy\r\n                                                    </button>\r\n                                                </span>\r\n                                                <button class=\"btn btn-sm btn-primary\" data-bind=\"click: runReport\">\r\n                                                    <span class=\"fa fa-gears\" aria-hidden=\"true\"></span>Run\r\n                                                </button>\r\n                                                <button class=\"btn btn-sm btn-danger\" data-bind=\"click: deleteReport, visible: canDelete\">\r\n                                                    <span class=\"fa fa-trash\" aria-hidden=\"true\"></span>Delete\r\n                                                </button>\r\n                                                <br />\r\n                                            </div>\r\n\r\n                                            <div class=\"d-block d-md-none\">\r\n                                                <span data-bind=\"if: $root.CanSaveReports() || $root.adminMode()\">\r\n                                                    <button class=\"btn btn-sm btn-secondary\" title=\"Edit Report\" data-bind=\"click: openReport, visible: canEdit\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                        <span class=\"fa fa-edit\" aria-hidden=\"true\"></span>\r\n                                                    </button>\r\n                                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: copyReport\" title=\"Copy Report\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                        <span class=\"fa fa-copy\" aria-hidden=\"true\"></span>\r\n                                                    </button>\r\n                                                </span>\r\n                                                <button class=\"btn btn-sm btn-primary\" data-bind=\"click: runReport\" title=\"Run Report\">\r\n                                                    <span class=\"fa fa-gears\" aria-hidden=\"true\"></span>\r\n                                                </button>\r\n                                                <button class=\"btn btn-sm btn-danger\" title=\"Delete Report\" data-bind=\"click: deleteReport, visible: canDelete\">\r\n                                                    <span class=\"fa fa-trash\" aria-hidden=\"true\"></span>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Report Builder -->\r\n    <div class=\"modal modal-fullscreen\" id=\"modal-reportbuilder\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" style=\"padding-right: 0px !important;\">\r\n        <div data-bind=\"template: {name: 'report-designer', data: $data}\"></div>\r\n    </div>\r\n\r\n    <!-- Field Options Modal -->\r\n    <div class=\"modal\" id=\"fieldOptionsModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div data-bind=\"template: {name: 'report-field-options', data: $data}\"></div>\r\n    </div>\r\n\r\n    <!-- Link Edit Modal -->\r\n    <div class=\"modal\" id=\"linkModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div data-bind=\"template: {name: 'report-link-edit', data: $data}\"></div>\r\n    </div>\r\n\r\n    <!-- Folder Edit Modal -->\r\n    <div class=\"modal\" id=\"folderModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog\">\r\n            <div class=\"modal-content\" data-bind=\"with: ManageFolder\">\r\n                <div class=\"modal-header\">\r\n                    <h5 class=\"modal-title\">Manage Folder</h5>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n                        <span aria-hidden=\"true\">&times;</span>\r\n                    </button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <div class=\"form-group\">\r\n                        <label class=\"col-sm-4 col-md-4 control-label\">Folder Name</label>\r\n                        <div class=\"col-sm-8 col-md-8\">\r\n                            <input type=\"text\" class=\"form-control\" id=\"folderName\" required placeholder=\"Folder Name\" data-bind=\"value: FolderName\">\r\n                        </div>\r\n                    </div>\r\n                    <br />\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFolder\">Save</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div data-bind=\"if: ReportMode() == 'execute' || ReportMode() == 'Linked'\">\r\n\r\n         <div class=\"card\">\r\n            <div class=\"card-header\">\r\n                <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\r\n                    <a class=\"navbar-brand\" href=\"#\">Viewing Report</a>\r\n                    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n                        <span class=\"navbar-toggler-icon\"></span>\r\n                    </button>\r\n                     <div class=\"collapse navbar-collapse\" >\r\n                        <ul class=\"navbar-nav mr-auto\">\r\n\r\n                        </ul>\r\n                        <div class=\"form-inline my-5 my-md-0\">\r\n                            <button data-bind=\"click: function() {$root.ReportMode('start');}\" class=\"btn btn-primary\">\r\n                                Back to Reports\r\n                            </button>\r\n                            <button class=\"btn btn-primary\" data-bind=\"visible: ReportMode()=='linked'\">\r\n                                Back to Parent Report\r\n                            </button>\r\n                            <button class=\"btn btn-primary\" data-bind=\"visible: $root.CanEdit()\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                Edit Report\r\n                            </button>\r\n\r\n                            <div class=\"btn-group\">\r\n                                <button type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <span class=\"fa fa-download\"></span> Export <span class=\"caret\"></span>\r\n                                </button>\r\n                                <ul class=\"dropdown-menu\">\r\n                                    <li class=\"dropdown-item\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadPdfAlt\">\r\n                                            <span class=\"fa fa-file-pdf-o\"></span> Pdf\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"dropdown-item\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadExcel\">\r\n                                            <span class=\"fa fa-file-excel-o\"></span> Excel\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"dropdown-item\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadCsv\">\r\n                                            <span class=\"fa fa-file-excel-o\"></span> Csv\r\n                                        </a>\r\n                                    </li>\r\n                                </ul>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </nav>\r\n            </div>\r\n            <div class=\"card-body\">\r\n                <div data-bind=\"with: ReportResult\" class=\"report-view\">\r\n\r\n                    <div data-bind=\"ifnot: HasError\">\r\n                        <div data-bind=\"with: $root\">\r\n\r\n                            <div data-bind=\"if: EditFiltersOnReport\">\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-header\">\r\n                                        <h5 class=\"card-title\">\r\n                                            <a data-toggle=\"collapse\" data-target=\"#filter-panel\" href=\"#\">\r\n                                                <i class=\"fa fa-filter\"></i>Choose filter options\r\n                                            </a>\r\n                                        </h5>\r\n                                    </div>\r\n                                    <div id=\"filter-panel\" class=\"card-body\">\r\n                                        <div>\r\n                                            <div class=\"row\">\r\n                                                <div data-bind=\"template: {name: 'filter-group'}\" class=\"col\"></div>\r\n                                            </div>\r\n\r\n                                            <br />\r\n                                            <button class=\"btn btn-primary\" data-bind=\"click: SaveFilterAndRunReport\">Update Filters</button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <br />\r\n                            </div>\r\n                            <div data-bind=\"ifnot: EditFiltersOnReport\">\r\n                                <div data-bind=\"template: {name: 'fly-filter-template'}\"></div>\r\n                                <br />\r\n                            </div>\r\n                            <div data-bind=\"if: canDrilldown\">\r\n                                <button class=\"btn btn-secondary btn-xs\" data-bind=\"click: ExpandAll\">Expand All</button>\r\n                                <button class=\"btn btn-secondary btn-xs\" data-bind=\"click: CollapseAll\">Collapse All</button>\r\n                                <br />\r\n                                <br />\r\n                            </div>\r\n                            <div class=\"report-render\" data-bind=\"css: { 'report-expanded': isExpanded }\">\r\n                                <div class=\"report-menubar\">\r\n                                    <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\r\n                                        <div class=\"form-inline\" data-bind=\"visible: pages()\">\r\n                                            <div class=\"form-group pull-left total-records\">\r\n                                                <span data-bind=\"text: ' Total Records: ' + totalRecords()\"></span><br />\r\n                                            </div>\r\n                                            <div class=\"pull-left\">\r\n                                                <button class=\"btn btn-secondary btn-sm\" data-bind=\"visible: !$root.isChart() || $root.ShowDataWithGraph(), click: $root.downloadExcel\" title=\"Export to Excel\">\r\n                                                    <span class=\"fa fa-file-excel-o\"></span>\r\n                                                </button>\r\n                                                <button class=\"btn btn-secondary btn-sm\" data-bind=\"click: $parent.toggleExpand\">\r\n                                                    <span class=\"fa\" data-bind=\"css: {'fa-expand': !$parent.isExpanded(), 'fa-minus': $parent.isExpanded() }\"></span>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"form-group pull-right\">\r\n                                                <div data-bind=\"template: 'pager-template', data: $data\"></div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"report-canvas\">\r\n                                <div class=\"report-container\">\r\n                                    <div class=\"report-inner\">\r\n                                        <div class=\"canvas-container\">\r\n                                            <canvas id=\"report-header\" width=\"900\" height=\"120\" data-bind=\"visible: useReportHeader\"></canvas>\r\n                                        </div>\r\n                                        <h2 data-bind=\"text: ReportName\"></h2>\r\n                                        <p data-bind=\"html: ReportDescription\">\r\n                                        </p>\r\n                                        <div data-bind=\"with: ReportResult\" class=\"report-expanded-scroll\">\r\n                                            <div data-bind=\"template: 'report-template', data: $data\"></div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                </div>\r\n                            </div>\r\n                            <br />\r\n                            \r\n                        </div>\r\n                    </div>\r\n                    <div data-bind=\"if: HasError\">\r\n                        <h2 data-bind=\"text: $root.ReportName\"></h2>\r\n                        <p data-bind=\"text: $root.ReportDescription\"></p>\r\n\r\n                        <button data-bind=\"click: function() {$root.ReportMode('start');}\" class=\"btn btn-primary\">\r\n                            Back to Reports\r\n                        </button>\r\n\r\n                        <button class=\"btn btn-primary\" data-bind=\"visible: $root.CanEdit()\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                            Edit Report\r\n                        </button>\r\n                        <h3>An unexpected error occured while running the Report</h3>\r\n                        <hr />\r\n                        <b>Error Details</b>\r\n                        <div data-bind=\"text: Exception\"></div>\r\n                        \r\n                    </div>\r\n                    <div data-bind=\"if: ReportDebug() || HasError()\">\r\n                        <br />\r\n                        <br />\r\n                        <hr />\r\n                        <code data-bind=\"html: ReportSql\">\r\n                        </code>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"modal\" id=\"noaccountModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                <h4 class=\"modal-title\">Account not Setup</h4>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <p class=\"alert alert-danger\">dotnet Report Account Configuration missing!</p>\r\n                <p>You do not have the neccessary initial configuration completed to use dotnet Report.</p>\r\n                <p>Please view the <a href=\"https://dotnetreport.com/blog/2016/03/getting-started-with-dotnet-report/\" target=\"_blank\">Getting Started Guide</a> to correctly configure dotnet Report.</p>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Templates -->\r\n<div [innerHtml]=\"reportTemplates\"></div>\r\n<!-- Templates -->", styles: [""] });
+    DotnetreportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DotnetreportComponent, selector: "app-dotnetreport", ngImport: i0__namespace, template: "<div id=\"dot-net-report\" class=\"body-content\">\r\n\r\n<div class=\"container-fluid\">\r\n   \r\n    <div data-bind=\"template: {name: 'admin-mode-template'}, visible: allowAdmin\" style=\"display: none;\"></div>\r\n\r\n    <!--\r\n        The markup code below is related to presentation. You don't have to change it, unless you\r\n        intentionally want to change something in the Report Builder's behavior in your Application.\r\n        It's Recommended you use it as is. You will be responsible for managing and maintaining any changes.\r\n    -->\r\n    <!-- Folders/Report List -->\r\n    <div id=\"report-start\" data-bind=\"if: ReportMode() == 'start' || ReportMode() == 'generate'\">\r\n        <div class=\"card folder-panel\">\r\n            <div class=\"card-header\">\r\n                <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\r\n                    <a class=\"navbar-brand\" href=\"#\" data-bind=\"click: function() {SelectedFolder(null); designingHeader(false); searchReports(''); $('#search-report').val([]).trigger('change'); }\">Manage Reports</a>\r\n                    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n                        <span class=\"navbar-toggler-icon\"></span>\r\n                    </button>\r\n\r\n                    <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\r\n                        <ul class=\"navbar-nav mr-auto\">\r\n\r\n                            <li class=\"nav-item active\" data-bind=\"visible: CanSaveReports() || adminMode()\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: createNewReport\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                    <span class=\"fa fa-plus\"></span> Create a New Report\r\n                                </a>\r\n                            </li>\r\n\r\n                            <li class=\"nav-item\" data-bind=\"visible: CanManageFolders() || adminMode()\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: ManageFolder.newFolder\">\r\n                                    <span class=\"fa fa-folder-o\"></span> Add a new Folder\r\n                                </a>\r\n                            </li>\r\n                            <li class=\"nav-item dropdown\" data-bind=\"visible: (CanManageFolders() || adminMode()) && SelectedFolder()!=null\">\r\n                                <a href=\"#\" class=\"nav-link dropdown-toggle\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <span class=\"fa fa-folder\"></span> Folder Options\r\n                                </a>\r\n                                <div class=\"dropdown-menu\">\r\n                                    <a class=\"dropdown-item\" href=\"#\" data-bind=\"click: ManageFolder.editFolder\">Edit Selected Folder</a>\r\n                                    <a class=\"dropdown-item\" href=\"#\" data-bind=\"click: ManageFolder.deleteFolder\">Delete Selected Folder</a>\r\n                                </div>\r\n                            </li>\r\n                            <li class=\"nav-item active\" data-bind=\"visible: adminMode\">\r\n                                <a href=\"#\" class=\"nav-link\" data-bind=\"click: function(){ initHeaderDesigner(); }\">\r\n                                    <span class=\"fa fa-arrow-up\"></span> Report Header\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                        <form class=\"form-inline my-5 my-md-0\">\r\n                            <div data-bind=\"with: searchFieldsInReport\">\r\n                                <select id=\"search-report\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Search Report by Name, Description or Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults }, minimumInputLength: 0, language: language, allowClear: true }, value: selectedOption\"></select>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                </nav>\r\n            </div>\r\n            <div class=\"card-body\">\r\n                <div data-bind=\"visible: designingHeader, with: headerDesigner\" style=\"display: none;\" class=\"overflow-auto\">\r\n                    <div class=\"checkbox\">\r\n                        <label>\r\n                            <input type=\"checkbox\" data-bind=\"checked: UseReportHeader\"> Use Report Header\r\n                        </label>\r\n                    </div>\r\n                    <div data-bind=\"visible: UseReportHeader\">\r\n                        <p class=\"alert alert-info\">\r\n                            You can design the common report header below that will be applied to all reports where report headers are turned on.\r\n                        </p>\r\n                        <canvas id=\"report-header\" width=\"900\" height=\"120\" style=\"border: solid 1px #ccc\"></canvas>\r\n                        <div class=\"form-inline\">\r\n                            <div class=\"form-group\">\r\n                                <button class=\"btn btn-sm\" title=\"Add Text\" data-bind=\"click: addText\"><span class=\"fa fa-font\"></span></button>\r\n                                <label class=\"btn btn-sm\" title=\"Add Image\">\r\n                                    <span class=\"fa fa-image\"></span>\r\n                                    <input type=\"file\" accept=\"image/*\" hidden data-bind=\"event: { change: function() { uploadImage($element.files[0]) } }\" />\r\n                                </label>\r\n                                <button class=\"btn btn-sm\" title=\"Add Line\" data-bind=\"click: addLine\"><span class=\"fa fa-arrows-h\"></span></button>\r\n                            </div>\r\n                            <div data-bind=\"if: selectedObject()\">\r\n                                <div class=\"form-group\">\r\n                                    &nbsp;|&nbsp;\r\n                                    <button class=\"btn btn-sm\" data-bind=\"click: remove\" title=\"Delete\"><span class=\"fa fa-trash\"></span></button>\r\n                                    <div data-bind=\"if: getText()\">\r\n                                        <select class=\"form-control form-control-sm\" title=\"Font Family\" data-bind=\"event: {change: setFontFamily }, value: objectProperties.fontFamily\">\r\n                                            <option value=\"arial\" selected>Arial</option>\r\n                                            <option value=\"helvetica\">Helvetica</option>\r\n                                            <option value=\"myriad pro\">Myriad Pro</option>\r\n                                            <option value=\"delicious\">Delicious</option>\r\n                                            <option value=\"verdana\">Verdana</option>\r\n                                            <option value=\"georgia\">Georgia</option>\r\n                                            <option value=\"courier\">Courier</option>\r\n                                            <option value=\"comic sans ms\">Comic Sans MS</option>\r\n                                            <option value=\"impact\">Impact</option>\r\n                                            <option value=\"monaco\">Monaco</option>\r\n                                            <option value=\"optima\">Optima</option>\r\n                                            <option value=\"hoefler text\">Hoefler Text</option>\r\n                                            <option value=\"plaster\">Plaster</option>\r\n                                            <option value=\"engagement\">Engagement</option>\r\n                                        </select>\r\n                                        &nbsp;\r\n                                        <select class=\"form-control form-control-sm\" title=\"Text Align\" data-bind=\"event: {change: setTextAlign }, value: objectProperties.textAlign\">\r\n                                            <option>Left</option>\r\n                                            <option>Center</option>\r\n                                            <option>Right</option>\r\n                                            <option>Justify</option>\r\n                                        </select>\r\n                                        &nbsp;\r\n                                        <input type=\"color\" size=\"5\" class=\"btn-object-action\" title=\"Font Color\" data-bind=\"event: {change: setFontColor }, value: objectProperties.fontColor\">\r\n                                        <button class=\"btn btn-sm\" title=\"Bold\" data-bind=\"event: {click: setFontBold }, value: objectProperties.fontBold\"><span class=\"fa fa-bold\"></span></button>\r\n                                        <button class=\"btn btn-sm\" title=\"Italic\" data-bind=\"event: {click: setFontItalic }, value: objectProperties.fontItalic\"><span class=\"fa fa-italic\"></span></button>\r\n                                        <button class=\"btn btn-sm\" title=\"Underline\" data-bind=\"event: {click: setFontUnderline }, value: objectProperties.fontUnderline\"><span class=\"fa fa-underline\"></span></button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button class=\"btn btn-primary\" data-bind=\"click: saveCanvas\">Save Changes</button>\r\n                </div>\r\n                <div data-bind=\"ifnot: designingHeader\">\r\n                    <div data-bind=\"visible: !SelectedFolder() && !searchReports()\">\r\n                        <p>Please choose Folders below to view Reports</p>\r\n                        <ul class=\"folder-list\" data-bind=\"foreach: Folders\">\r\n                            <li data-bind=\"click: function(){ $parent.SelectedFolder($data); }\">\r\n                                <span class=\"fa fa-3x fa-folder\" style=\"color: #ffd800\"></span>\r\n                                <span class=\"desc\" data-bind=\"text: FolderName\"></span>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div data-bind=\"visible: SelectedFolder() || searchReports()\">\r\n                        <div class=\"clearfix\">\r\n                            <p class=\"pull-left\">Please choose a Report from this Folder</p>\r\n                            <div class=\"pull-right\">\r\n                                <a href=\"#\" data-bind=\"click: function(){ SelectedFolder(null); searchReports(''); $('#search-report').val([]).trigger('change');}\">\r\n                                    ..back to Folders List\r\n                                </a>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"list-group list-overflow\">\r\n                            <div data-bind=\"if: SelectedFolder()!=null && reportsInFolder().length==0\">\r\n                                No Reports Saved in this Folder\r\n                            </div>\r\n                            <div data-bind=\"if: searchReports() && reportsInSearch().length==0\">\r\n                                No Reports found matching your Search\r\n                            </div>\r\n                            <div data-bind=\"foreach: searchReports() ? reportsInSearch() : reportsInFolder()\">\r\n                                <div class=\"list-group-item\">\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-sm-7\">\r\n                                            <div class=\"fa fa-2x pull-left\" data-bind=\"css: {'fa-file': reportType=='List', 'fa-th-list': reportType=='Summary', 'fa-bar-chart': reportType=='Bar', 'fa-pie-chart': reportType=='Pie',  'fa-line-chart': reportType=='Line', 'fa-globe': reportType.indexOf('Map')==0, 'fa-window-maximize': reportType=='Single', 'fa-random': reportType=='Pivot'}\"></div>\r\n                                            <div class=\"pull-left\">\r\n                                                <h4>\r\n                                                    <a data-bind=\"click: runReport\" style=\"cursor: pointer\">\r\n                                                        <span data-bind=\"highlightedText: { text: reportName, highlight: $parent.searchReports, css: 'highlight' }\"></span>\r\n                                                    </a>\r\n                                                </h4>\r\n                                            </div>\r\n                                            <div class=\"clearfix\"></div>\r\n                                            <p data-bind=\"text: reportDescription\"></p>\r\n                                            <p data-bind=\"if: $parent.searchReports()\"><span class=\"fa fa-folder\"></span> <span data-bind=\"text: folderName\"></span></p>\r\n                                            <div data-bind=\"if: $parent.adminMode\">\r\n                                                <div class=\"small\">\r\n                                                    <b>Report Access</b><br />\r\n                                                    Manage by User <span class=\"badge badge-info\" data-bind=\"text: userId ? userId : 'Any User'\"></span>\r\n                                                    <br />\r\n                                                    View only by User <span class=\"badge badge-info\" data-bind=\"text: (viewOnlyUserId ? viewOnlyUserId : (userId ? userId : 'Any User'))\"></span>\r\n                                                    <br />\r\n                                                    <div data-bind=\"if: deleteOnlyUserId\">\r\n                                                        Delete only by User <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserId\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div data-bind=\"if: userRole\">\r\n                                                        Manage by Role <span class=\"badge badge-info\" data-bind=\"text: userRole ? userRole : 'No Role'\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div data-bind=\"if: viewOnlyUserRole\">\r\n                                                        View only by Role <span class=\"badge badge-info\" data-bind=\"text: viewOnlyUserRole ? viewOnlyUserRole : 'Any Role'\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div data-bind=\"if: deleteOnlyUserRole\">\r\n                                                        Delete only by Role <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserRole ? deleteOnlyUserRole : 'Same as Manage'\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div data-bind=\"if: clientId\">\r\n                                                        For Client <span class=\"label label-info\" data-bind=\"text: clientId ? clientId : 'Any'\"></span>\r\n                                                        <br />\r\n                                                    </div>\r\n                                                    <div>\r\n                                                        Direct Link to Run Report: <a data-bind=\"attr: {href: '/DotNetReport/Report?linkedreport=true&noparent=true&reportId=' + reportId }\" target=\"_blank\"><span class=\"fa fa-link\"></span></a>\r\n                                                        &nbsp;<a href=\"#\" data-bind=\"click: navigator.clipboard.writeText(window.location.href + '/Report?linkedreport=true&noparent=true&reportId=' + reportId )\"><span class=\"fa fa-copy\" title=\"Click to Copy Link\"></span></a>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-sm-5 right-align\">\r\n                                            <div class=\"d-none d-md-block\">\r\n                                                <br />\r\n                                                <span data-bind=\"if: $root.CanSaveReports() || $root.adminMode() \">\r\n                                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: openReport, visible: canEdit\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                        <span class=\"fa fa-edit\" aria-hidden=\"true\"></span>Edit\r\n                                                    </button>\r\n                                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: copyReport\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                        <span class=\"fa fa-copy\" aria-hidden=\"true\"></span>Copy\r\n                                                    </button>\r\n                                                </span>\r\n                                                <div class=\"btn-group\">\r\n                                                    <button type=\"button\" class=\"btn btn-sm btn-primary\" data-bind=\"click: runReport\">\r\n                                                        <span class=\"fa fa-gears\" aria-hidden=\"true\"></span>Run\r\n                                                    </button>\r\n                                                    <button type=\"button\" class=\"btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split\" data-toggle=\"dropdown\" style=\"margin-left: -4px;\">\r\n                                                        <span class=\"sr-only\"></span>\r\n                                                    </button>\r\n                                                    <div class=\"dropdown-menu dropdown-menu-right\">\r\n                                                        <a class=\"dropdown-item\" href=\"#\" data-bind=\"click: function() {exportReport('excel');}\">\r\n                                                            <span class=\"fa fa-file-excel-o\"></span> Download Excel\r\n                                                        </a>\r\n                                                        <a class=\"dropdown-item\" href=\"#\" data-bind=\"visible: hasDrilldown, click: function() {exportReport('excel-sub');}\">\r\n                                                            <span class=\"fa fa-file-excel-o\"></span> Download Excel (Expanded)\r\n                                                        </a>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n\r\n                                                <button class=\"btn btn-sm btn-danger\" data-bind=\"click: deleteReport, visible: canDelete\">\r\n                                                    <span class=\"fa fa-trash\" aria-hidden=\"true\"></span>Delete\r\n                                                </button>\r\n                                                <br />\r\n                                            </div>\r\n\r\n                                            <div class=\"d-block d-md-none\">\r\n                                                <span data-bind=\"if: $root.CanSaveReports() || $root.adminMode()\">\r\n                                                    <button class=\"btn btn-sm btn-secondary\" title=\"Edit Report\" data-bind=\"click: openReport, visible: canEdit\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                        <span class=\"fa fa-edit\" aria-hidden=\"true\"></span>\r\n                                                    </button>\r\n                                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: copyReport\" title=\"Copy Report\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                                        <span class=\"fa fa-copy\" aria-hidden=\"true\"></span>\r\n                                                    </button>\r\n                                                </span>\r\n                                               \r\n                                                <div class=\"btn-group\">\r\n                                                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: runReport\" title=\"Run Report\">\r\n                                                        <span class=\"fa fa-gears\" aria-hidden=\"true\"></span>\r\n                                                    </button>\r\n                                                    <button type=\"button\" class=\"btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split\" data-toggle=\"dropdown\" style=\"margin-left: -4px;\">\r\n                                                        <span class=\"sr-only\"></span>\r\n                                                    </button>\r\n                                                    <div class=\"dropdown-menu\">\r\n                                                        <a class=\"dropdown-item\" href=\"#\" data-bind=\"click: function() {exportReport('excel');}\">\r\n                                                            <span class=\"fa fa-file-excel-o\"></span> Download Excel\r\n                                                        </a>\r\n                                                        <a class=\"dropdown-item\" href=\"#\" data-bind=\"visible: hasDrilldown, click: function() {exportReport('excel-sub');}\">\r\n                                                            <span class=\"fa fa-file-excel-o\"></span> Download Excel with inner rows\r\n                                                        </a>\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                <button class=\"btn btn-sm btn-danger\" title=\"Delete Report\" data-bind=\"click: deleteReport, visible: canDelete\">\r\n                                                    <span class=\"fa fa-trash\" aria-hidden=\"true\"></span>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Report Builder -->\r\n    <div class=\"modal modal-fullscreen\" id=\"modal-reportbuilder\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" style=\"padding-right: 0px !important;\">\r\n        <div data-bind=\"template: {name: 'report-designer', data: $data}\"></div>\r\n    </div>\r\n\r\n    <!-- Field Options Modal -->\r\n    <div class=\"modal\" id=\"fieldOptionsModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div data-bind=\"template: {name: 'report-field-options', data: $data}\"></div>\r\n    </div>\r\n\r\n    <!-- Link Edit Modal -->\r\n    <div class=\"modal\" id=\"linkModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div data-bind=\"template: {name: 'report-link-edit', data: $data}\"></div>\r\n    </div>\r\n\r\n    <!-- Folder Edit Modal -->\r\n    <div class=\"modal\" id=\"folderModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog\">\r\n            <div class=\"modal-content\" data-bind=\"with: ManageFolder\">\r\n                <div class=\"modal-header\">\r\n                    <h5 class=\"modal-title\">Manage Folder</h5>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n                        <span aria-hidden=\"true\">&times;</span>\r\n                    </button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <div class=\"form-group\">\r\n                        <label class=\"col-sm-4 col-md-4 control-label\">Folder Name</label>\r\n                        <div class=\"col-sm-8 col-md-8\">\r\n                            <input type=\"text\" class=\"form-control\" id=\"folderName\" required placeholder=\"Folder Name\" data-bind=\"value: FolderName\">\r\n                        </div>\r\n                    </div>\r\n                    <br />\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFolder\">Save</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    \r\n    <div data-bind=\"if: ReportMode() == 'execute' || ReportMode() == 'Linked'\">\r\n\r\n         <div class=\"card\">\r\n            <div class=\"card-header\">\r\n                <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\r\n                    <a class=\"navbar-brand\" href=\"#\">Viewing Report</a>\r\n                    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n                        <span class=\"navbar-toggler-icon\"></span>\r\n                    </button>\r\n                     <div class=\"collapse navbar-collapse\" >\r\n                        <ul class=\"navbar-nav mr-auto\">\r\n\r\n                        </ul>\r\n                        <div class=\"form-inline my-5 my-md-0\">\r\n                            <button data-bind=\"click: function() {$root.ReportMode('start');}\" class=\"btn btn-primary\">\r\n                                Back to Reports\r\n                            </button>\r\n                            <button class=\"btn btn-primary\" data-bind=\"visible: ReportMode()=='linked'\">\r\n                                Back to Parent Report\r\n                            </button>\r\n                            <a href=\"#\" class=\"btn btn-primary\" data-bind=\"visible: $root.CanEdit()\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\">\r\n                                Edit Report\r\n                            </a>\r\n                            <button class=\"btn btn-primary\" data-bind=\"visible: CanSaveReports(), click: SaveWithoutRun\">Save Report</button>\r\n\r\n                            <div class=\"btn-group\">\r\n                                <button type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <span class=\"fa fa-download\"></span> Export <span class=\"caret\"></span>\r\n                                </button>\r\n                                <ul class=\"dropdown-menu\">\r\n                                    <li class=\"dropdown-item\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadPdf\">\r\n                                            <span class=\"fa fa-file-pdf-o\"></span> Pdf (Enhanced)\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"dropdown-item\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadPdfAlt\">\r\n                                            <span class=\"fa fa-file-pdf-o\"></span> Pdf (Basic)\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"dropdown-item\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadExcel\">\r\n                                            <span class=\"fa fa-file-excel-o\"></span> Excel\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"dropdown-item\" data-bind=\"visible: canDrilldown\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadExcelWithDrilldown\">\r\n                                            <span class=\"fa fa-file-excel-o\"></span> Excel (Expanded)\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"dropdown-item\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadCsv\">\r\n                                            <span class=\"fa fa-file-excel-o\"></span> Csv\r\n                                        </a>\r\n                                    </li>\r\n                                    <li class=\"dropdown-item\">\r\n                                        <a href=\"#\" data-bind=\"click: downloadXml\">\r\n                                            <span class=\"fa fa-file-code-o\"></span> Xml\r\n                                        </a>\r\n                                    </li>\r\n                                </ul>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </nav>\r\n            </div>\r\n            <div class=\"card-body\">\r\n                <div data-bind=\"with: ReportResult\" class=\"report-view\">\r\n                    <div data-bind=\"ifnot: HasError\">\r\n                        <div data-bind=\"with: $root\">\r\n\r\n                            <div data-bind=\"if: EditFiltersOnReport\">\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-header\">\r\n                                        <h5 class=\"card-title\">\r\n                                            <a data-toggle=\"collapse\" data-target=\"#filter-panel\" href=\"#\">\r\n                                                <i class=\"fa fa-filter\"></i>Choose Filters\r\n                                            </a>\r\n                                        </h5>\r\n                                    </div>\r\n                                    <div id=\"filter-panel\" class=\"card-body collapse\">\r\n                                        <div data-bind=\"if: useStoredProc\">\r\n                                            <div class=\"row\">\r\n                                                <div data-bind=\"template: {name: 'filter-parameters'}\" class=\"col-md-12\"></div>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div data-bind=\"ifnot: useStoredProc\">\r\n                                            <div class=\"row\">\r\n                                                <div data-bind=\"template: {name: 'filter-group'}\" class=\"col-md-12\"></div>\r\n                                            </div>\r\n                                        </div>\r\n                                        <br />\r\n                                        <button class=\"btn btn-primary\" data-bind=\"click: SaveFilterAndRunReport\">Update Filters</button>\r\n                                    </div>\r\n                                </div>\r\n                                <br />\r\n                            </div>\r\n                            <div data-bind=\"ifnot: EditFiltersOnReport\">\r\n                                <div data-bind=\"template: {name: 'fly-filter-template'}\"></div>\r\n                                <br />\r\n                            </div>\r\n                            <div class=\"report-render\" data-bind=\"css: { 'report-expanded': isExpanded }\">\r\n                                <div class=\"report-menubar\">\r\n                                    <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\r\n                                        <div class=\"form-inline pull-left\" data-bind=\"visible: pages()\">\r\n                                            <div class=\"form-group pull-left total-records\">\r\n                                                <span data-bind=\"text: ' Total Records: ' + totalRecords()\"></span><br />\r\n                                            </div>\r\n                                            <div class=\"pull-left\">\r\n                                                <button class=\"btn btn-secondary btn-sm\" data-bind=\"visible: !$root.isChart() || $root.ShowDataWithGraph(), click: $root.downloadExcel\" title=\"Export to Excel\">\r\n                                                    <span class=\"fa fa-file-excel-o\"></span>\r\n                                                </button>\r\n                                                <button class=\"btn btn-secondary btn-sm\" data-bind=\"click: $parent.toggleExpand\">\r\n                                                    <span class=\"fa\" data-bind=\"css: {'fa-expand': !$parent.isExpanded(), 'fa-compress': $parent.isExpanded() }\"></span>\r\n                                                </button>      \r\n                                                <button class=\"btn btn-secondary btn-sm\" data-bind=\"visible: $parent.canDrilldown, click: $parent.ExpandAll\" title=\"Expand all rows\">\r\n                                                    <span class=\"fa fa-plus\"></span>\r\n                                                </button>\r\n                                                <button class=\"btn btn-secondary btn-sm\" data-bind=\"visible: $parent.canDrilldown, click: $parent.CollapseAll\" title=\"Collapse all rows\">\r\n                                                    <span class=\"fa fa-minus\"></span>\r\n                                                </button>\r\n                                                <div data-bind=\"with: $parent\" class=\"pull-left\">\r\n                                                    <div class=\"dropdown-selected\" data-bind=\"click: toggleDropdown\">\r\n                                                        <div data-bind=\"with: selectedTableStyle\" class=\"btn btn-sm btn-secondary\" title=\"Format Table\">\r\n                                                            <span class=\"fa fa- fa-paint-brush\"></span>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"dropdown-content\" style=\"position: absolute;\" data-bind=\"visible: dropdownOpen\">\r\n                                                        <!-- ko foreach: tableStyles -->\r\n                                                        <div class=\"dropdown-option\" data-bind=\"title: $data.name, click: $parent.selectStyle\">\r\n                                                            <div class=\"mini-table-preview\" data-bind=\"foreach: new Array(5)\">\r\n                                                                <div class=\"mini-table-row\" data-bind=\"foreach: new Array(5)\">\r\n                                                                    <div class=\"mini-table-cell\" data-bind=\"style: { backgroundColor: $parentContext.$index() === 0 ? $parents[1].headerBg : ($parentContext.$index() % 2 === 0 ? $parents[1].altRowBg : $parents[1].rowBg), color: $parents[1].textColor }\"></div>\r\n\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                        <!-- /ko -->\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                            \r\n                                        </div>\r\n                                        <div class=\"form-inline pull-right\">\r\n                                            <div data-bind=\"template: 'pager-template', data: $data\"></div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"report-canvas\">\r\n                                    <div class=\"report-container\">\r\n                                        <div class=\"report-inner\">\r\n                                            <div class=\"canvas-container\">\r\n                                                <canvas id=\"report-header\" width=\"900\" height=\"120\" data-bind=\"visible: useReportHeader\"></canvas>\r\n                                            </div>\r\n                                            <h2 data-bind=\"text: ReportName\"></h2>\r\n                                            <p data-bind=\"html: ReportDescription\">\r\n                                            </p>\r\n                                            <div data-bind=\"with: ReportResult\" class=\"report-expanded-scroll\">\r\n                                                <div data-bind=\"template: 'report-template', data: $data\"></div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <br />\r\n                            <span>Report ran on: @DateTime.Now.ToShortDateString() @DateTime.Now.ToShortTimeString()</span>\r\n                        </div>\r\n                    </div>\r\n                    <div data-bind=\"if: HasError\">\r\n                        <h2 data-bind=\"text: $root.ReportName\"></h2>\r\n                        <p data-bind=\"text: $root.ReportDescription\"></p>\r\n\r\n                        <button data-bind=\"click: function() {$root.ReportMode('start');}\" class=\"btn btn-primary\">\r\n                            Back to Reports\r\n                        </button>\r\n\r\n                        <a href=\"#\" class=\"btn btn-primary\" data-bind=\"visible: $root.CanEdit()\">\r\n                            Edit Report\r\n                        </a>\r\n                        <h3>An unexpected error occured while running the Report</h3>\r\n                        <hr />\r\n                        <b>Error Details</b>\r\n                        <div data-bind=\"text: Exception\"></div>\r\n                    </div>\r\n                    <div data-bind=\"if: $root.adminMode()\">\r\n                        <br />\r\n                        <br />\r\n                        <hr />\r\n                        <code data-bind=\"html: ReportSql\">\r\n                        </code>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n</div>\r\n<!-- Templates -->\r\n<div [innerHtml]=\"reportTemplates\"></div>\r\n<!-- Templates -->", styles: [""] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DotnetreportComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -207,7 +207,7 @@
             this.ngOnInit();
         };
         DotnetdashboardComponent.prototype.renderKOTemplates = function () {
-            this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n    <!-- Dotnet Report HTML Templates -->\n    <script type=\"text/html\" id=\"report-filter\">\n        <div class=\"form-group\">\n            <!-- ko if: !hasForeignKey-->\n            <!-- ko if: fieldType=='DateTime'-->\n            <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n            <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n            <!-- /ko -->\n            <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n            From\n            <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n            to\n            <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n            <!-- /ko -->\n            <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n            <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n                <option value=\"\"></option>\n                <option>Today</option>\n                <option>Today +</option>\n                <option>Today -</option>\n                <option>Yesterday</option>\n                <option>This Week</option>\n                <option>Last Week</option>\n                <option>This Month</option>\n                <option>Last Month</option>\n                <option>This Year</option>\n                <option>Last Year</option>\n                <option>This Month To Date</option>\n                <option>This Year To Date</option>\n                <option>Last 30 Days</option>\n                <optgroup label=\"Comparison Options\">\n                    <option>>= Today</option>\n                    <option><= Today</option>\n                    <option>>= Today +</option>\n                    <option><= Today +</option>\n                    <option>>= Today -</option>\n                    <option><= Today -</option>\n                </optgroup>\n            </select>\n            <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n                <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n            </div>\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n            <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n            <!-- /ko -->\n            <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n            From\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n            to\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n                <option value=\"1\">Yes</option>\n                <option value=\"0\">No</option>\n            </select>\n            <!-- /ko -->\n            <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: hasForeignKey && $parent.Operator() != 'all' -->\n            <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n            <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n            <!-- /ko -->\n            <!-- ko if: $parent.Operator()=='='-->\n            <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n            <!-- /ko -->\n            <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n            <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n            <!-- /ko -->\n            <!-- /ko -->\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"pager-template\">\n        <div class=\"pager-container\">\n            <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a>&nbsp;\n            <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n            <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n            <span class=\"pager-pageinfo\">\n                <span>Page</span>&nbsp;\n                <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n                                    value: currentPage,\n                                    attr: { max: pages() }\" />&nbsp;\n                <span>of</span>&nbsp;\n                <span data-bind=\"text: pages\"></span>\n            </span>&nbsp;\n    \n            <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a>&nbsp;\n            <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-column-header\">\n        <!-- ko foreach: Columns -->\n        <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n            <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n            <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n            <!-- /ko -->\n            <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false)  -->\n            <a href=\"\" data-bind=\"click: function(){ $parents[3].pager ? $parents[3].changeSort(SqlField) : $parents[5].changeSort(SqlField); }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n                <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n                <span data-bind=\"text: ($parents[3].pager ? $parents[3].pager.sortColumn() : $parents[5].pager.sortColumn()) === SqlField ? (($parents[3].pager ? $parents[3].pager.sortDescending() : $parents[5].pager.sortDescending()) ? '&#9660;' : '&#9650;') : ''\"></span>\n            </a>\n            <!-- /ko -->\n    \n            <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n                <div class=\"dropup\">\n                <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                    <span class=\"fa fa-ellipsis-v\"></span>\n                </a>\n                    <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n                        <li class=\"dropdown-item small\">\n                            <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n                                <span class=\"fa fa-clone\"></span> Outer Group\n                            </a>\n                        </li>\n                        <li class=\"dropdown-item small\">\n                            <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n                                <span class=\"fa fa-gear\"></span> Field Settings\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n    \n        </th>\n        <!-- /ko -->\n    </script>\n    \n    <script type=\"text/html\" id=\"report-column\">\n        <!-- ko foreach: Items -->\n        <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n            <div data-bind=\"style: {'width': fieldWidth }\">\n            <!-- ko if: LinkTo-->\n            <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: FormattedValue\"></span></a>\n            <!-- /ko-->\n            <!-- ko ifnot: LinkTo-->\n            <span data-bind=\"html: FormattedValue\"></span>\n            <!-- /ko-->\n            </div>\n        </td>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-pivot\">\n            <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n            <table class=\"table table-hover table-condensed\">\n                <thead>\n                    <tr>\n                        <th></th>\n                        <!-- ko foreach: Rows -->\n                        <th>\n                            <span data-bind=\"text: Items[0].FormattedValue\"></span>\n                        </th>\n                        <!-- /ko -->\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Columns\">\n                    <tr>\n                    <!-- ko if: $index() > 0 -->\n                    <td>\n                        <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n                    </td>\n                    <!-- ko foreach: $parent.Rows -->\n                    <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold() ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n                        <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n                    </td>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                    </tr>\n                </tbody>\n            </table>\n    \n        </div>\n    \n    </script>\n    \n    <script type=\"text/html\" id=\"report-table\">\n            <div class=\"table-responsive\" >\n            <table class=\"table table-hover table-condensed\">\n                <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n                    <tr class=\"no-highlight\">\n                        <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() -->\n                        <th style=\"width: 30px; border-left: 1px solid;\"></th>\n                        <!-- /ko -->\n                        <!-- ko template: 'report-column-header', data: $data -->\n                        <!-- /ko-->\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                        <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                            <!-- ko if: $parents[2].ReportType()=='Single' -->\n                            <div style=\"text-align: center; width: 100%\">\n                            <span style=\"font-size: 48px\" title=\"No data found\">/</span>\n                            </div>\n                            <!-- /ko -->\n                            <!-- ko if: $parents[2].ReportType()!='Single' -->\n                            No records found\n                            <!-- /ko -->\n                        </td>\n                    </tr>\n                    <!-- ko foreach: $parent.rows  -->\n                    <tr>\n                        <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n                        <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n                        <!-- /ko -->\n                        <!-- ko template: 'report-column', data: $data -->\n                        <!-- /ko-->\n                    </tr>\n                    <!-- ko if: isExpanded -->\n                    <tr>\n                        <td style=\"width: 30px;\"></td>\n                        <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n                            <!-- ko if: DrillDownData -->\n                            <table class=\"table table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n                                <thead>\n                                    <tr class=\"no-highlight\">\n                                        <!-- ko template: 'report-column-header', data: $data -->\n                                        <!-- /ko-->\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n                                        <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                            No records found\n                                        </td>\n                                    </tr>\n                                    <!-- ko foreach: Rows  -->\n                                    <tr>\n                                        <!-- ko template: 'report-column', data: $data -->\n                                        <!-- /ko-->\n                                    </tr>\n                                    <!-- /ko -->\n                                </tbody>\n                            </table>\n                            <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                                <div class=\"form-inline small text-muted\">\n                                    <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                        <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                                    </div>\n                                    <div class=\"pull-left\">\n                                        <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                                    </div>\n                                    <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                        <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                                    </div>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                        </td>\n                    </tr>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </tbody>\n                <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n                <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n                    <tr>\n                        <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n                        <td></td>\n                        <!-- /ko -->\n                        <!-- ko foreach: Items -->\n                        <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n                        <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n                            <span data-bind=\"html: FormattedValue, css: {'right-align': true}\"></span>\n                        </td>\n                        <!-- /ko -->\n                        <!-- /ko -->\n                    </tr>\n                </tfoot>\n                <!-- /ko -->\n            </table>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-template\">\n        <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n        <!-- ko if: $parent.ReportType() == 'Pivot' -->\n        <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n        <!-- /ko -->\n    \n        <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n        <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n            <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n            </a>\n            <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n                <li class=\"dropdown-item small\">\n                    <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n                        <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n                    </a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"clear-fix\"></div>\n    \n        <div data-bind=\"foreach: outerGroupData\">\n            <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n            <h6 data-bind=\"html: display\"></h6>\n            <div class=\"\" style=\"padding-top: 5px;\"></div>\n            <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n            <!-- /ko -->\n        </div>\n        <!-- /ko -->\n    </script>\n    <script type=\"text/html\" id=\"admin-mode-template\">\n        <div class=\"row\" style=\"padding: 10px 10px\">\n            <div class=\"material-switch pull-right\">\n                <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n                <label for=\"admin-mode\" class=\"label-primary\"></label>\n            </div>\n            <div class=\"pull-right\">Admin Mode</div>\n        </div>\n    \n        <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n            <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"manage-access-template\">\n        <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n        <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n    \n            <div class=\"form-group row\">\n                <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n                <div class=\"col-md-3 col-sm-3\">\n                    <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n                </div>\n                <div class=\"col-md-1 col-sm-1\">\n                    <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n                </div>\n            </div>\n            <div class=\"alert alert-info\">\n                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n            </div>\n    \n            <div class=\"row small\">\n                <div class=\"col-md-6\">\n                    <b>Manage by User</b> (allow edit)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.users -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <b>View only by User</b> (no edit/delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.viewOnlyUsers -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                        <b>Delete by User</b> (allow delete)\n                        <div class=\"row container-fluid\">\n                            <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n                            <div class=\"pull-left\">\n                                <div class=\"checkbox\">\n                                    <label class=\"label label-info\">\n                                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                    </label>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                            <div data-bind=\"if: manageAccess.users.length == 0\">\n                                Users list not populated or not applicable\n                            </div>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <b>Manage by User Role</b> (allow edit)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.userRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <b>View only by User Role</b> (no edit/delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                        <br />\n                        <b>Delete by User Role</b> (allow delete)\n                        <div class=\"row container-fluid\">\n                            <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n                            <div class=\"pull-left\">\n                                <div class=\"checkbox\">\n                                    <label class=\"label label-info\">\n                                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                    </label>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                            <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                                User Roles list not populated or not applicable\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"filter-group\">\n        <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n            <div class=\"rules-group-container\">\n                <div class=\"rules-group-header\">\n                    <div data-bind=\"visible: !isRoot\">\n                        <div class=\"pull-left\">\n                            <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n                            <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n                                <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n                            </label>\n                            <label class=\"btn btn-primary\">\n                                <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n                            </label>\n                            </div>\n                        </div>\n                        <div class=\"pull-right\">\n                            <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button>&nbsp;\n                        </div>\n                    </div>\n                    <div data-bind=\"visible: isRoot\">\n                        <div class=\"btn-group btn-group-sm\">\n                            <label class=\"btn btn-primary\">Filter Conditions</label>\n                        </div>\n                    </div>\n                    <div class=\"clearfix\"></div>\n                </div>\n    \n                <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n            </div>\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"fly-filter-template\">\n        <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n            <div class=\"card-header\">\n                <h5 class=\"card-title\">\n                    <a data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#filter-panel-' + ReportID() }\" href=\"#\">\n                        <i class=\"fa fa-filter\"></i>Choose filter options\n                    </a>\n                </h5>\n            </div>\n            <div data-bind=\"attr: {id: 'filter-panel-' + ReportID() }\" class=\"card-body collapse collapsed\">\n                <div>\n                    <!-- ko foreach: FlyFilters -->\n                    <div class=\"row\">\n                        <div class=\"col-sm-5 col-xs-4\">\n                            <div data-bind=\"with: Field\" class=\"checkbox\">\n                                <div class=\"checkbox\">\n                                    <label>\n                                        <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /><span data-bind=\"text: selectedFilterName\"></span>\n                                    </label>\n                                </div>\n                            </div>\n                        </div>\n                        <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n                            <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n                                <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                            </div>\n                        </div>\n                        <div data-bind=\"with: Field\" class=\"col-sm-5 col-xs-5\">\n                            <div data-bind=\"if: $parent.Apply\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <!-- /ko -->\n                    <button class=\"btn btn-primary\" data-bind=\"click: RunReport\">Refresh Report</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"filter-inner\">\n        <div class=\"rules-list\" >\n            <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n            <table class=\"table table-hover table-borderless\">\n                <thead>\n                    <tr>\n                        <th class=\"row\">\n                            <div class=\"col-md-1\"></div>\n                            <div class=\"col-md-4\">Field</div>\n                            <div class=\"col-md-2\"></div>\n                            <div class=\"col-md-4\">Filter</div>\n                            <div class=\"col-md-1\"></div>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Filters\">\n                    <tr class=\"rule-container\">\n                        <td class=\"row\">\n                            <div class=\"col-md-1\">\n                            <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n                                <option>And</option>\n                                <option>Or</option>\n                            </select>\n                            </div>\n                            <div class=\"col-md-3\">\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: $parents[$parents.length-2].selectedFieldsCanFilter, optionsText: 'selectedFieldName', optionsCaption: 'Please Choose', value: Field, attr: {required: Field()==null?'required':false}, disable: Field() && Field().forced\"></select>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2\">\n                                <div data-bind=\"with: Field\">\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                                </div>\n                                </div>\n                            </div>\n                            <div class=\"col-md-5\">\n                                <div data-bind=\"with: Field\">\n                                    <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                                </div>\n                                <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $parents[$parents.length-2].canAddSeries() && $index()==0 -->\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parents[$parents.length-2].AddSeries.bind($data)\">Add Comparison</button>\n                                <!--/ko -->\n                                <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n                            </div>\n                            <div class=\"col-md-1\">\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n                            </div>\n                        </td>\n                    </tr>\n                    <!-- ko foreach: compareTo -->\n                    <tr>\n                        <td class=\"row\">\n                            <div class=\"col-md-6\">&nbsp;</div>\n                            <div class=\"col-md-2\">\n                            <span style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></span>\n                            <span>Compare To</span>\n                            </div>\n                            <div class=\"col-md-4\">\n                                <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n                            </div>\n                        </td>\n                    </tr>\n                    <!-- /ko -->\n                </tbody>\n            </table>\n            </div>\n    \n            <div class=\"rule-container\" >\n                <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                <div>\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n                </div>\n            </div>\n        </div>\n    \n    </script>\n    \n    <script type=\"text/html\" id=\"filter-parameters\">\n        <div class=\"table-responsive card\">\n            <div class=\"card-body\">\n                <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n                <table class=\"table  table-hover table-borderless\" data-bind=\"visible: showParameters\">\n                    <thead>\n                        <tr>\n                            <th style=\"width: 30%\">Filter</th>\n                            <th style=\"width: 20%\"></th>\n                            <th style=\"width: 30%\">Value</th>\n                            <th></th>\n                        </tr>\n                    </thead>\n                    <tbody data-bind=\"foreach: Parameters\">\n                        <tr data-bind=\"ifnot: Hidden\">\n                            <td data-bind=\"text: DisplayName\">\n                            </td>\n                            <td>\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n                                </div>\n                            </td>\n                            <td data-bind=\"with: Field\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </td>\n                            <td></td>\n                        </tr>\n    \n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-schedule\">\n        <div data-bind=\"with: scheduleBuilder\">\n                <div class=\"checkbox\">\n                   <label>\n                      <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n                     Schedule Report\n                 </label>\n            </div>\n            <div data-bind=\"if: hasSchedule\">\n                    <div class=\"form-inline form-group\">\n                       <div class=\"row col-sm-12\">\n                            <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span>&nbsp;\n                            <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n                            <div data-bind=\"if: selectedOption() == 'once'\">\n                                &nbsp;on&nbsp;<input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n                            </div>\n                            <div data-bind=\"if: showDays\">\n                               &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n                            </div>\n                            <div data-bind=\"if: showDates\">\n                               &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n                            </div>\n                            <div data-bind=\"if: showMonths\">\n                              &nbsp;of&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n                            </div>\n                            <div data-bind=\"if: showAtTime\">\n                                &nbsp;at&nbsp;<select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n                                <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n                                <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n                                    <option>AM</option>\n                                    <option>PM</option>\n                                </select>\n                            </div>\n                       </div>\n                   </div>\n                  <div class=\"alert alert-info\">\n                      Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n                     <span data-bind=\"if: selectedOption() == 'once'\">\n                         on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n                    </span>\n                        <span data-bind=\"if: showDays\">\n                           on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n                      </span>\n                      <span data-bind=\"if: showDates\">\n                         on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n                         <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n                    </span>\n                    <span data-bind=\"if: showMonths\">\n                            of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n                       </span>\n                      <span data-bind=\"if: showAtTime\">\n                         at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n                     </span>\n                </div>\n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <label class=\"col-sm-2 control-label\">Email to</label>\n                           <div class=\"col-sm-6\">\n                              <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n                          </div>\n                         <label class=\"col-sm-2 control-label\">Report Format</label>\n                         <div class=\"col-sm-2\">\n                            <select class=\"form-control\" data-bind=\"value: format\">\n                                <option value=\"EXCEL\">Excel</option>\n                                    <option value=\"CSV\">CSV</option>\n                                   <option value=\"PDF\">PDF</option>\n                               </select>\n                          </div>\n                     </div>\n                </div>\n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <div class=\"col-sm-4 control-label\">\n                               <div class=\"checkbox\">\n                                  <label title=\"Set a date to start sending scheduled report\">\n                                      <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n                                     Set Schedule Start Date\n                                </label>\n                                </div>\n                           </div>\n                           <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n                              <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n                          </div>\n                     </div>\n                 </div>\n    \n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <div class=\"col-sm-4 control-label\">\n                              <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n                                  <label>\n                                     <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n                                     Set Schedule End Date\n                                </label>\n                            </div>\n                            </div>\n                           <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n                               <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n                          </div>\n                      </div>\n                 </div>\n             </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-field-options\">\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n            <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n                </div>\n                <div class=\"modal-body needs-validation\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n                                    Make Header Text Bold\n                                </label>\n                            </div>\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n                                    Make Text Bold\n                                </label>\n                            </div>\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc()\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n                                    Outer Group\n                                </label>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-link-edit\">\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n            <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\">Setup Link Field</h5>\n                </div>\n                <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n                        </div>\n                    </div>\n                    <div data-bind=\"if: LinksToReport\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n                            </div>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n                                Send field value as Report Filter Parameter\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n                            </div>\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: LinksToReport\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n                            </div>\n                        </div>\n                        <div class=\"checkbox\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n                                Send field value as Query Parameter\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n                            </div>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-designer\">\n        <div class=\"modal-dialog\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\" id=\"myModalLabel\">\n                        <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/blogs/docs/designing-reports\">\n                            <span class=\"fa fa-question-circle\"></span>\n                        </a>Design your Report\n                    </h5>\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\n                </div>\n                <div class=\"modal-body needs-validation\">\n                    <h5><span class=\"fa fa-file\"></span>&nbsp;Choose Report Type</h5>\n                    <div class=\"row\">\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n                                <span class=\"fa fa-2x fa-list-alt\"></span>\n                                <p>List</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n                                <span class=\"fa fa-2x fa-table\"></span>\n                                <p>Summary</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n                                <span class=\"fa fa-2x fa-bar-chart\"></span>\n                                <p>Bar</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n                                <span class=\"fa fa-2x fa-pie-chart\"></span>\n                                <p>Pie</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n                                <span class=\"fa fa-2x fa-line-chart\"></span>\n                                <p>Line</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType().indexOf('Map')==0}\">\n                                <span class=\"fa fa-2x fa-globe\"></span>\n                                <p>Map</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n                                <span class=\"fa fa-2x fa-window-maximize\"></span>\n                                <p>Single Value</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n                                <span class=\"fa fa-2x fa-random\"></span>\n                                <p>Pivot</p>\n                            </div>\n                        </div>\n                    </div>\n                    <hr />\n                    <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span>&nbsp;Choose Data for Report</h5>\n                    <div class=\"pull-right\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n                        <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n                            <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n                        </label>\n                        <label class=\"btn btn-primary\">\n                            <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n                        </label>\n                    </div>\n                    <div class=\"clearfix\"></div>\n                    <div class=\"row\">\n                        <div class=\"col-md-6\">\n                            <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n                            <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n                        </div>\n    \n                        <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n                            <div data-bind=\"with: textQuery.searchFields\">\n                                <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults, headers: headers }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n                            </div>\n                        </div>\n    \n                        <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n                            <div class=\"small pull-left\">\n                                Check the fields you would like to use in the Report\n                            </div>\n                            <div class=\"pull-right btn-toolbar\">\n                                <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n    \n                                <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n                                <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n                            </div>\n                        </div>\n                        <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n                            <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                <div class=\"list-group-item\">\n                                    <div class=\"checkbox\">\n                                        <label>\n                                            <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n                                            <span data-bind=\"text: fieldName\"></span>\n                                        </label>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n    \n                    <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n                        <br />\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n                            </div>\n                            <div class=\"card-body\">\n                                <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n                                    <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                        <div class=\"list-group-item\">\n                                            <div class=\"checkbox\">\n                                                <label>\n                                                    <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n                                                    <span data-bind=\"text: jsonColumnName\"></span>\n                                                </label>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n    \n                    <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n                        <br />\n                        <br />\n                        <div class=\"card\">\n                            <div class=\"card-body\">\n                                <div class=\"row\">\n                                    <div class=\"col-md-12 pull-right\">\n                                        <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n                                        <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n    \n                                    </div>\n                                    <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n                                        <div class=\"alert alert-info\">\n                                            You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n                                            Please note that Custom Field must be chosen in within the same Section and their data types must match.\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"row\">\n                                    <div class=\"col-sm-6 small\">\n                                        Setup your Formula for calculating this Field\n                                    </div>\n                                    <div class=\"col-sm-6 right-align\">\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n                                    </div>\n                                </div>\n                                <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n                                    <div class=\"col-sm-12\">\n                                        <div class=\"alert alert-info\">\n                                            For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Field Label</label>\n                                    <div class=\"col-sm-10\">\n                                        <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Data Format</label>\n                                    <div class=\"col-sm-10\">\n                                        <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n                                            <!-- ko ifnot: formulaOnlyHasDateFields -->\n                                            <option>String</option>\n                                            <option>Integer</option>\n                                            <option>Decimal</option>\n                                            <option>Currency</option>\n                                            <!-- /ko -->\n                                            <!-- ko if: formulaOnlyHasDateFields -->\n                                            <option>Days</option>\n                                            <option>Hours</option>\n                                            <option>Minutes</option>\n                                            <option>Seconds</option>\n                                            <!-- /ko -->\n                                        </select>\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n                                    <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n                                    <div class=\"col-sm-10\">\n                                        <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n                                    </div>\n                                </div>\n    \n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Field Formula</label>\n                                    <div class=\"col-sm-10\">\n                                        <div data-bind=\"foreach: formulaFields\">\n                                            <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n                                            <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n                                                <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n                                                    <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n                                                    <div data-bind=\"if: setupFormula.isConstantValue\">\n                                                        <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n                                            <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n                                                <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n                                                    <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n                                                    <option>+</option>\n                                                    <!-- /ko -->\n                                                    <option>-</option>\n                                                    <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n                                                    <option>*</option>\n                                                    <option>/</option>\n                                                    <!-- /ko -->\n                                                </select>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"clearfix\"></div>\n                    </div>\n                    <div data-bind=\"if: SelectedFields().length>0\">\n                        <hr />\n                        <h5><span class=\"fa fa-table\"></span>&nbsp;Selected data for the Report</h5>\n                        <div>\n                            <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Bar'\">\n                                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n                            </div>\n                            <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n                                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n                            </div>\n                            <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n                                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Pivot report, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n                            </div>\n                            <div data-bind=\"visible: ReportType()=='Map'\">\n                                <div class=\"alert alert-info\">\n                                    <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Map Graph, the first field below has to be a Region, like a Country.\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Map Display</label>\n                                    <div class=\"col-sm-4\">\n                                        <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n                                <li class=\"list-group-item\">\n                                    <div class=\"row\">\n                                        <div class=\"col\">\n                                            <span class=\"fa fa-columns\"></span>\n                                            <span data-bind=\"text: selectedFieldName\"></span>\n                                            <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n                                            <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n                                                <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n                                            </span>\n                                        </div>\n                                        <div class=\"col\">\n                                            <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n                                                <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n                                            </div>\n                                            <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n                                                <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n                                                    <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n                                                    <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n                                                    <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())  && $parent.isChart() && $index()>0\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n                                                    <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal()  &&  (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n                                                    <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n                                                    <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n                                                    <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n                                                    <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </li>\n                            </ul>\n                        </div>\n                        <hr />\n                        <div>\n                            <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\n    \n                            <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n                                <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n                                    <div data-bind=\"template: {name: 'filter-parameters'}\" ></div>\n                                </div>\n                                <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n                                    <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                                </div>\n    \n                                <div class=\"checkbox col-12\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n                                        Allow setting up and saving filters on Report\n                                    </label>\n                                </div>\n                                <br />\n                            </div>\n                        </div>\n                    </div>\n                    <hr />\n                    <div data-bind=\"if: SaveReport\">\n                    <h5><span class=\"fa fa-hourglass\"></span>&nbsp;Choose Schedule</h5>\n    \n                    <div style=\"padding: 10px 10px\">\n                        <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n                    </div>\n                    <hr />\n                    </div>\n                    <div>\n                        <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n                            <label class=\"col-sm-2 control-label\">Report Name</label>\n                            <div class=\"col-sm-10\">\n                                <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n                            </div>\n                        </div>\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-2 control-label\">Report Description</label>\n                            <div class=\"col-sm-10\">\n                                <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n                            </div>\n                        </div>\n                        <div data-bind=\"ifnot: useStoredProc\">\n                            <div class=\"form-group row\">\n                                <label class=\"col-sm-2 control-label\">Sort By</label>\n                                <div class=\"col-sm-6\">\n                                    <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n                                </div>\n                            </div>\n                            <div data-bind=\"foreach: SortFields\">\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">&nbsp;&nbsp;Then Sort By</label>\n                                    <div class=\"col-sm-4\">\n                                        <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n                                    Include Total Row\n                                </label>\n                            </div>\n                            <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n                                    Show only Unique Records\n                                </label>\n                            </div>\n                            <div class=\"form-group row\">\n                                <div class=\"checkbox col-md-2\">\n                                    <label >\n                                        <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n                                        Max Records\n                                    </label>\n                                </div>\n                                <div class=\"col-sm-10\" data-bind=\"if: maxRecords\">\n                                    <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"visible: isChart\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n                                Show Data along with Graph\n                            </label>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n                                Save Report\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n                            <label class=\"col-sm-2 control-label\">Choose Folder</label>\n                            <div class=\"col-sm-10\">\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n                            </div>\n                        </div>\n    \n                        <div data-bind=\"if: adminMode\">\n                            <hr />\n                            <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    ");
+            this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n    <!-- Dotnet Report HTML Templates -->\n    <script type=\"text/html\" id=\"report-filter\">\n        <div class=\"form-group\">\n            <!-- ko if: !hasForeignKey-->\n            <!-- ko if: fieldType=='DateTime'-->\n            <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n            <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n            <!-- /ko -->\n            <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n            From\n            <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n            to\n            <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n            <!-- /ko -->\n            <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n            <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n                <option value=\"\"></option>\n                <option>Today</option>\n                <option>Today +</option>\n                <option>Today -</option>\n                <option>Yesterday</option>\n                <option>This Week</option>\n                <option>Last Week</option>\n                <option>This Month</option>\n                <option>Last Month</option>\n                <option>This Year</option>\n                <option>Last Year</option>\n                <option>This Week To Date</option>\n                <option>This Month To Date</option>\n                <option>This Year To Date</option>\n                <option>Last 30 Days</option>\n                <optgroup label=\"Comparison Options\">\n                    <option>>= Today</option>\n                    <option><= Today</option>\n                    <option>>= Today +</option>\n                    <option><= Today +</option>\n                    <option>>= Today -</option>\n                    <option><= Today -</option>\n                </optgroup>\n            </select>\n            <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n                <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n            </div>\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n            <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n            <!-- /ko -->\n            <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n            From\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n            to\n            <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n                <option value=\"1\">Yes</option>\n                <option value=\"0\">No</option>\n            </select>\n            <!-- /ko -->\n            <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n            <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n            <!-- /ko -->\n            <!-- /ko -->\n            <!-- ko if: hasForeignKey && $parent.Operator() != 'all' -->\n            <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n            <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n            <!-- /ko -->\n            <!-- ko if: $parent.Operator()=='='-->\n            <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n            <!-- /ko -->\n            <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n            <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n            <!-- /ko -->\n            <!-- /ko -->\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"pager-template\">\n        <div class=\"pager-container\">\n            <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a>&nbsp;\n            <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n            <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n            <span class=\"pager-pageinfo\">\n                <span>Page</span>&nbsp;\n                <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n                                    value: currentPage,\n                                    attr: { max: pages() }\" />&nbsp;\n                <span>of</span>&nbsp;\n                <span data-bind=\"text: pages\"></span>\n            </span>&nbsp;\n    \n            <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a>&nbsp;\n            <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-column-header\">\n        <!-- ko foreach: Columns -->\n        <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n            <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n            <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n            <!-- /ko -->\n            <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false)  -->\n            <a href=\"\" data-bind=\"click: function(){ $parents[pagerIndex($parents)].changeSort(SqlField) }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n                <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n                <span data-bind=\"text: $parents[pagerIndex($parents)].pager.sortColumn() === SqlField ? ($parents[pagerIndex($parents)].pager.sortDescending() ? '&#9660;' : '&#9650;') : ''\"></span>\n            </a>\n            <!-- /ko -->\n    \n            <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n                <div class=\"dropup\">\n                <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                    <span class=\"fa fa-ellipsis-v\"></span>\n                </a>\n                    <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n                        <li class=\"dropdown-item small\">\n                            <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n                                <span class=\"fa fa-clone\"></span> Outer Group\n                            </a>\n                        </li>\n                        <li class=\"dropdown-item small\">\n                            <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n                                <span class=\"fa fa-gear\"></span> Field Settings\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n    \n        </th>\n        <!-- /ko -->\n    </script>\n    \n    <script type=\"text/html\" id=\"report-column\">\n        <!-- ko foreach: Items -->\n        <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n            <div data-bind=\"style: {'width': fieldWidth }\">\n            <!-- ko if: LinkTo-->\n            <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: formattedVal\"></span></a>\n            <!-- /ko-->\n            <!-- ko ifnot: LinkTo-->\n            <span data-bind=\"html: formattedVal\"></span>\n            <!-- /ko-->\n            </div>\n        </td>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-pivot\">\n            <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n            <table class=\"table table-striped table-hover table-condensed\">\n                <thead>\n                    <tr>\n                        <th></th>\n                        <!-- ko foreach: Rows -->\n                        <th>\n                            <span data-bind=\"text: Items[0].FormattedValue\"></span>\n                        </th>\n                        <!-- /ko -->\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Columns\">\n                    <tr>\n                    <!-- ko if: $index() > 0 -->\n                    <td>\n                        <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n                    </td>\n                    <!-- ko foreach: $parent.Rows -->\n                    <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold() ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n                        <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n                    </td>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                    </tr>\n                </tbody>\n            </table>\n    \n        </div>\n    \n    </script>\n    \n    <script type=\"text/html\" id=\"report-table\">\n        <div class=\"table-responsive\" >\n            <table class=\"table table-hover table-condensed\" data-bind=\"attr: {class: 'table table-striped table-hover table-condensed ' + $parents[2].selectedStyle()}\">        \n                <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n                    <tr class=\"no-highlight\">\n                        <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() && !CanExpandOption() -->\n                        <th style=\"width: 30px; border-left: 1px solid;\"></th>\n                        <!-- /ko -->\n                        <!-- ko template: 'report-column-header', data: $data -->\n                        <!-- /ko-->\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                        <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                            <!-- ko if: $parents[2].ReportType()=='Single' -->\n                            <div style=\"text-align: center; width: 100%\">\n                            <span style=\"font-size: 48px\" title=\"No data found\">/</span>\n                            </div>\n                            <!-- /ko -->\n                            <!-- ko if: $parents[2].ReportType()!='Single' -->\n                            No records found\n                            <!-- /ko -->\n                        </td>\n                    </tr>\n                    <!-- ko foreach: $parent.rows  -->\n                    <tr>\n                        <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && !$parent.CanExpandOption() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n                        <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n                        <!-- /ko -->\n                        <!-- ko template: 'report-column', data: $data -->\n                        <!-- /ko-->\n                    </tr>\n                    <!-- ko if: isExpanded -->\n                    <tr>\n                        <td style=\"width: 30px;\"></td>\n                        <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n                            <!-- ko if: DrillDownData -->\n                            <table class=\"table table-striped table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n                                <thead>\n                                    <tr class=\"no-highlight\">\n                                        <!-- ko template: 'report-column-header', data: $data -->\n                                        <!-- /ko-->\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n                                        <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                            No records found\n                                        </td>\n                                    </tr>\n                                    <!-- ko foreach: Rows  -->\n                                    <tr>\n                                        <!-- ko template: 'report-column', data: $data -->\n                                        <!-- /ko-->\n                                    </tr>\n                                    <!-- /ko -->\n                                </tbody>\n                            </table>\n                            <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                                <div class=\"form-inline small text-muted\">\n                                    <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                        <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                                    </div>\n                                    <div class=\"pull-left\">\n                                        <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                                    </div>\n                                    <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                        <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                                    </div>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                        </td>\n                    </tr>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </tbody>\n                <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n                <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n                    <tr>\n                        <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n                        <td></td>\n                        <!-- /ko -->\n                        <!-- ko foreach: Items -->\n                        <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n                        <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n                            <span data-bind=\"html: formattedVal, css: {'right-align': true}\"></span>\n                        </td>\n                        <!-- /ko -->\n                        <!-- /ko -->\n                    </tr>\n                </tfoot>\n                <!-- /ko -->\n            </table>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-template\">\n        <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n        <!-- ko if: $parent.ReportType() == 'Pivot' -->\n        <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n        <!-- /ko -->\n    \n        <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n        <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n            <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n            </a>\n            <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n                <li class=\"dropdown-item small\">\n                    <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n                        <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n                    </a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"clear-fix\"></div>\n    \n        <div data-bind=\"foreach: outerGroupData\">\n            <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n            <h6 data-bind=\"html: display\"></h6>\n            <div class=\"\" style=\"padding-top: 5px;\"></div>\n            <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n            <!-- /ko -->\n        </div>\n        <!-- /ko -->\n    </script>\n    <script type=\"text/html\" id=\"admin-mode-template\">\n        <div class=\"row\" style=\"padding: 10px 10px\">\n            <div class=\"material-switch pull-right\">\n                <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n                <label for=\"admin-mode\" class=\"label-primary\"></label>\n            </div>\n            <div class=\"pull-right\">Admin Mode</div>\n        </div>\n    \n        <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n            <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"manage-access-template\">\n        <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n        <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n    \n            <div class=\"form-group row\">\n                <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n                <div class=\"col-md-3 col-sm-3\">\n                    <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n                </div>\n                <div class=\"col-md-1 col-sm-1\">\n                    <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n                </div>\n            </div>\n            <div class=\"alert alert-info\">\n                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n            </div>\n    \n            <div class=\"row small\">\n                <div class=\"col-md-6\">\n                    <b>Manage by User</b> (allow edit)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.users -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <b>View only by User</b> (no edit/delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.viewOnlyUsers -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                        <b>Delete by User</b> (allow delete)\n                        <div class=\"row container-fluid\">\n                            <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n                            <div class=\"pull-left\">\n                                <div class=\"checkbox\">\n                                    <label class=\"label label-info\">\n                                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                    </label>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                            <div data-bind=\"if: manageAccess.users.length == 0\">\n                                Users list not populated or not applicable\n                            </div>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <div class=\"col-md-6\">\n                    <b>Manage by User Role</b> (allow edit)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.userRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                    <b>View only by User Role</b> (no edit/delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                        <br />\n                        <b>Delete by User Role</b> (allow delete)\n                        <div class=\"row container-fluid\">\n                            <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n                            <div class=\"pull-left\">\n                                <div class=\"checkbox\">\n                                    <label class=\"label label-info\">\n                                        <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                    </label>\n                                </div>\n                            </div>\n                            <!-- /ko -->\n                            <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                                User Roles list not populated or not applicable\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"filter-group\">\n        <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n            <div class=\"rules-group-container\">\n                <div class=\"rules-group-header\">\n                    <div data-bind=\"visible: !isRoot\">\n                        <div class=\"pull-left\">\n                            <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n                            <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n                                <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n                            </label>\n                            <label class=\"btn btn-primary\">\n                                <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n                            </label>\n                            </div>\n                        </div>\n                        <div class=\"pull-right\">\n                            <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button>&nbsp;\n                        </div>\n                    </div>\n                    <div data-bind=\"visible: isRoot\">\n                        <div class=\"pull-left padded-div\">\n                            <label> &nbsp;Filter Conditions</label>\n                        </div>\n                    </div>\n                    <div class=\"clearfix\"></div>\n                </div>\n    \n                <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n            </div>\n        </div>\n    </script>\n    <script type=\"text/html\" id=\"fly-filter-template\">\n        <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n            <div class=\"card-header\">\n                <a data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#filter-panel-' + ReportID() }\" href=\"#\">\n                    <i class=\"fa fa-filter\"></i> Choose Filters\n                </a>\n            </div>\n            <div data-bind=\"attr: {id: 'filter-panel-' + ReportID() }, css: {collpased: !DontExecuteOnRun(), collapse: !DontExecuteOnRun()}\" class=\"card-body\">\n                <div>\n                    <!-- ko foreach: FlyFilters -->\n                    <div class=\"row\">\n                        <div class=\"col-sm-5 col-xs-4\">\n                            <div data-bind=\"with: Field\" class=\"checkbox\">\n                                <div class=\"checkbox\">\n                                    <label>\n                                        <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /> <span data-bind=\"text: selectedFilterName\"></span>\n                                    </label>\n                                </div>\n                            </div>\n                        </div>\n                        <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n                            <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n                                <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                            </div>\n                        </div>\n                        <div data-bind=\"with: Field\" class=\"col-sm-5 col-xs-5\">\n                            <div data-bind=\"if: $parent.Apply\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </div>\n                        </div>\n                    </div>\n                    <!-- /ko -->\n                    <button class=\"btn btn-primary\" data-bind=\"click: ExecuteReport\">Run</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"filter-inner\">\n        <div class=\"rules-list\" >\n            <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n            <table class=\"table table-striped table-hover table-borderless\">\n                <thead>\n                    <tr>\n                        <th class=\"row\">\n                            <div class=\"col-md-1\"></div>\n                            <div class=\"col-md-4\">Field</div>\n                            <div class=\"col-md-2\"></div>\n                            <div class=\"col-md-4\">Filter</div>\n                            <div class=\"col-md-1\"></div>\n                        </th>\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Filters\">\n                    <tr class=\"rule-container\">\n                        <td class=\"row\">\n                            <div class=\"col-md-1\">\n                            <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n                                <option>And</option>\n                                <option>Or</option>\n                            </select>\n                            </div>\n                            <div class=\"col-md-3\">\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"\n                                            options: $parents[$parents.length-2].selectedFieldsCanFilter != undefined \n                                                        ? $parents[$parents.length-2].selectedFieldsCanFilter\n                                                        : $parents[$parents.length-1].selectedFieldsCanFilter,\n                                            optionsText: 'selectedFieldName', \n                                            optionsCaption: 'Please Choose', \n                                            value: Field, \n                                            attr: {required: Field()==null?'required':false}, \n                                            disable: Field() && Field().forced\"></select>\n                                    </div>\n                            </div>\n                            <div class=\"col-md-2\">\n                                <div data-bind=\"with: Field\">\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                                </div>\n                                </div>\n                            </div>\n                            <div class=\"col-md-5\">\n                                <div data-bind=\"with: Field\">\n                                    <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                                </div>\n                                <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $index()==0 -->\n                                    <!-- ko if: $parents[$parents.length-2].canAddSeries != undefined && $parents[$parents.length-2].canAddSeries() -->\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parents[$parents.length-2].AddSeries.bind($data)\">Add Comparison</button>\n                                    <!--/ko -->\n                                    <!-- ko if: $parents[$parents.length-2].canAddSeries == undefined && $parentContext.$parent.canAddSeries != undefined && $parentContext.$parent.canAddSeries()-->\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parentContext.$parent.AddSeries.bind($data)\">Add Comparison</button>\n                                    <!--/ko -->\n                                <!--/ko -->\n                                <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n                            </div>\n                            <div class=\"col-md-1\">\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n                            </div>\n                        </td>\n                    </tr>\n                    <!-- ko foreach: compareTo -->\n                    <tr>\n                        <td class=\"row\">\n                            <div class=\"col-md-6\">&nbsp;</div>\n                            <div class=\"col-md-2\">\n                            <span style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></span>\n                            <span>Compare To</span>\n                            </div>\n                            <div class=\"col-md-4\">\n                                <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n                            </div>\n                        </td>\n                    </tr>\n                    <!-- /ko -->\n                </tbody>\n            </table>\n            </div>\n    \n            <div class=\"rule-container\" >\n                <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                <div>\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n                </div>\n            </div>\n        </div>\n    \n    </script>\n    \n    <script type=\"text/html\" id=\"filter-parameters\">\n        <div class=\"table-responsive card\">\n            <div class=\"card-body\">\n                <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n                <table class=\"table table-striped table-hover table-borderless\" data-bind=\"visible: showParameters\">\n                    <thead>\n                        <tr>\n                            <th style=\"width: 30%\">Filter</th>\n                            <th style=\"width: 20%\"></th>\n                            <th style=\"width: 30%\">Value</th>\n                            <th></th>\n                        </tr>\n                    </thead>\n                    <tbody data-bind=\"foreach: Parameters\">\n                        <tr data-bind=\"ifnot: Hidden\">\n                            <td data-bind=\"text: DisplayName\">\n                            </td>\n                            <td>\n                                <div class=\"form-group\">\n                                    <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n                                </div>\n                            </td>\n                            <td data-bind=\"with: Field\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </td>\n                            <td></td>\n                        </tr>\n    \n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-schedule\">\n        <div data-bind=\"with: scheduleBuilder\">\n                <div class=\"checkbox\">\n                   <label>\n                      <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n                     Schedule Report\n                 </label>\n            </div>\n            <div data-bind=\"if: hasSchedule\">\n                    <div class=\"form-inline form-group\">\n                       <div class=\"row col-sm-12\">\n                            <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span>&nbsp;\n                            <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n                            <div data-bind=\"if: selectedOption() == 'once'\">\n                                &nbsp;on&nbsp;<input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n                            </div>\n                            <div data-bind=\"if: showDays\">\n                               &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n                            </div>\n                            <div data-bind=\"if: showDates\">\n                               &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n                            </div>\n                            <div data-bind=\"if: showMonths\">\n                              &nbsp;of&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n                            </div>\n                            <div data-bind=\"if: showAtTime\">\n                                &nbsp;at&nbsp;<select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n                                <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n                                <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n                                    <option>AM</option>\n                                    <option>PM</option>\n                                </select>\n                            </div>\n                       </div>\n                   </div>\n                  <div class=\"alert alert-info\">\n                      Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n                     <span data-bind=\"if: selectedOption() == 'once'\">\n                         on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n                    </span>\n                        <span data-bind=\"if: showDays\">\n                           on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n                      </span>\n                      <span data-bind=\"if: showDates\">\n                         on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n                         <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n                    </span>\n                    <span data-bind=\"if: showMonths\">\n                            of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n                       </span>\n                      <span data-bind=\"if: showAtTime\">\n                         at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n                     </span>\n                </div>\n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <label class=\"col-sm-2 control-label\">Email to</label>\n                           <div class=\"col-sm-6\">\n                              <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n                          </div>\n                         <label class=\"col-sm-2 control-label\">Report Format</label>\n                         <div class=\"col-sm-2\">\n                            <select class=\"form-control\" data-bind=\"value: format\">\n                                <option value=\"EXCEL\">Excel</option>\n                                    <option value=\"CSV\">CSV</option>\n                                   <option value=\"PDF\">PDF</option>\n                               </select>\n                          </div>\n                     </div>\n                </div>\n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <div class=\"col-sm-4 control-label\">\n                               <div class=\"checkbox\">\n                                  <label title=\"Set a date to start sending scheduled report\">\n                                      <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n                                     Set Schedule Start Date\n                                </label>\n                                </div>\n                           </div>\n                           <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n                              <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n                          </div>\n                     </div>\n                 </div>\n    \n                <div class=\"form-horizontal form-group\">\n                        <div class=\"form-group row\">\n                           <div class=\"col-sm-4 control-label\">\n                              <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n                                  <label>\n                                     <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n                                     Set Schedule End Date\n                                </label>\n                            </div>\n                            </div>\n                           <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n                               <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n                          </div>\n                      </div>\n                 </div>\n             </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-field-options\">\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n            <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n                </div>\n                <div class=\"modal-body needs-validation\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n                        </div>\n                    </div>\n                      <div class=\"form-group row\" data-bind=\"visible: $parent.dateFormatTypes.indexOf($data.fieldFormat())>=0\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Date Format</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.dateFormats, value: dateFormat\"></select>\n                        </div>\n                    </div>\n                       <div class=\"form-group row\" data-bind=\"visible: dateFormat()==='Custom'\">\n                         <label class=\"col-sm-5 col-md-5 control-label\">Enter Custom Date Format</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" data-bind=\"value: customDateFormat\" placeholder=\"dd/mm/yyyy\" />\n                        </div>\n                     </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n                            <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n                                    Make Header Text Bold\n                                </label>\n                            </div>\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n                                    Make Text Bold\n                                </label>\n                            </div>\n                            <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n                                <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc() || $parent.ReportType() == 'List'\">\n                        <div class=\"col-sm-12\">\n                            <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n                                    Outer Group\n                                </label>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-link-edit\">\n        <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n            <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\">Setup Link Field</h5>\n                </div>\n                <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n                        </div>\n                    </div>\n                    <div data-bind=\"if: LinksToReport\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n                            </div>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n                                Send field value as Report Filter Parameter\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n                            </div>\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: LinksToReport\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n                            </div>\n                        </div>\n                        <div class=\"checkbox\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n                                Send field value as Query Parameter\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n                            <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n                            <div class=\"col-sm-7 col-md-7\">\n                                <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n                            </div>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <script type=\"text/html\" id=\"report-designer\">\n        <div class=\"modal-dialog\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <h5 class=\"modal-title\" id=\"myModalLabel\">\n                        <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/blogs/docs/designing-reports\">\n                            <span class=\"fa fa-question-circle\"></span>\n                        </a>Design your Report\n                    </h5>\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\n                </div>\n                <div class=\"modal-body needs-validation\">\n                    <div class=\"card card-body\">\n                        <h5><span class=\"fa fa-file\"></span>&nbsp;Choose Report Type</h5>\n                        <div class=\"row\">\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n                                    <span class=\"fa fa-2x fa-list-alt\"></span>\n                                    <p>List</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n                                    <span class=\"fa fa-2x fa-table\"></span>\n                                    <p>Summary</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n                                    <span class=\"fa fa-2x fa-bar-chart\"></span>\n                                    <p>Bar</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n                                    <span class=\"fa fa-2x fa-pie-chart\"></span>\n                                    <p>Pie</p>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n                                    <span class=\"fa fa-2x fa-line-chart\"></span>\n                                    <p>Line</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType().indexOf('Map')==0}\">\n                                    <span class=\"fa fa-2x fa-globe\"></span>\n                                    <p>Map</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n                                    <span class=\"fa fa-2x fa-window-maximize\"></span>\n                                    <p>Widget</p>\n                                </div>\n                            </div>\n                            <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                                <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n                                    <span class=\"fa fa-2x fa-random\"></span>\n                                    <p>Transpose</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <br />\n                    <div class=\"card card-body\">\n                        <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span>&nbsp;Choose Data for Report</h5>\n                        <div class=\"pull-right\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n                            <label class=\"btn btn-sm btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n                                <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n                            </label>\n                            <label class=\"btn btn-sm btn-primary\">\n                                <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n                            </label>\n                        </div>\n                        <div class=\"clearfix\"></div>\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n                                <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n                            </div>\n    \n                            <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n                                <div data-bind=\"with: textQuery.searchFields\">\n                                    <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults, headers: headers }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n                                </div>\n                            </div>\n    \n                            <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n                                <div class=\"small pull-left\">\n                                    Check the fields you would like to use in the Report\n                                </div>\n                                <div class=\"pull-right btn-toolbar\">\n                                    <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n    \n                                    <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n                                    <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n                                </div>\n                            </div>\n                            <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n                                <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                    <div class=\"list-group-item\">\n                                        <div class=\"checkbox\">\n                                            <label>\n                                                <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n                                                <span data-bind=\"text: fieldName\"></span>\n                                            </label>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n    \n                        <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n                            <br />\n                            <div class=\"card\">\n                                <div class=\"card-header\">\n                                    <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n                                </div>\n                                <div class=\"card-body\">\n                                    <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n                                        <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                            <div class=\"list-group-item\">\n                                                <div class=\"checkbox\">\n                                                    <label>\n                                                        <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n                                                        <span data-bind=\"text: jsonColumnName\"></span>\n                                                    </label>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n    \n                        <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n                            <br />\n                            <br />\n                            <div class=\"card\">\n                                <div class=\"card-body\">\n                                    <div class=\"row\">\n                                        <div class=\"col-md-12 pull-right\">\n                                            <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n                                            <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n    \n                                        </div>\n                                        <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n                                            <div class=\"alert alert-info\">\n                                                You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n                                                Please note that Custom Field must be chosen in within the same Section and their data types must match.\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"row\">\n                                        <div class=\"col-sm-6 small\">\n                                            Setup your Formula for calculating this Field\n                                        </div>\n                                        <div class=\"col-sm-6 right-align\">\n                                            <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n                                            <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n                                            <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n                                        </div>\n                                    </div>\n                                    <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n                                        <div class=\"col-sm-12\">\n                                            <div class=\"alert alert-info\">\n                                                For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"form-group row\">\n                                        <label class=\"col-sm-2 control-label\">Field Label</label>\n                                        <div class=\"col-sm-10\">\n                                            <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n                                        </div>\n                                    </div>\n                                    <div class=\"form-group row\">\n                                        <label class=\"col-sm-2 control-label\">Data Format</label>\n                                        <div class=\"col-sm-10\">\n                                            <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n                                                <!-- ko ifnot: formulaOnlyHasDateFields -->\n                                                <option>String</option>\n                                                <option>Integer</option>\n                                                <option>Decimal</option>\n                                                <option>Currency</option>\n                                                <!-- /ko -->\n                                                <!-- ko if: formulaOnlyHasDateFields -->\n                                                <option>Days</option>\n                                                <option>Hours</option>\n                                                <option>Minutes</option>\n                                                <option>Seconds</option>\n                                                <!-- /ko -->\n                                            </select>\n                                        </div>\n                                    </div>\n                                    <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n                                        <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n                                        <div class=\"col-sm-10\">\n                                            <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n                                        </div>\n                                    </div>\n    \n                                    <div class=\"form-group row\">\n                                        <label class=\"col-sm-2 control-label\">Field Formula</label>\n                                        <div class=\"col-sm-10\">\n                                            <div data-bind=\"foreach: formulaFields\">\n                                                <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n                                                <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n                                                    <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n                                                        <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n                                                        <div data-bind=\"if: setupFormula.isConstantValue\">\n                                                            <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n                                                <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n                                                    <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n                                                        <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n                                                        <option>+</option>\n                                                        <!-- /ko -->\n                                                        <option>-</option>\n                                                        <!-- ko if: ['Integer','Money','Float','Double','Decimal','Currency'].indexOf($parent.formulaDataFormat()) != -1 -->\n                                                        <option>*</option>\n                                                        <option>/</option>\n                                                        <!-- /ko -->\n                                                    </select>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"clearfix\"></div>\n                        </div>\n                        <div data-bind=\"if: SelectedFields().length>0\">\n                            <hr />\n                            <h5><span class=\"fa fa-table\"></span>&nbsp;Selected data for the Report</h5>\n                            <div>\n                                <div data-bind=\"visible: ReportType()=='Bar'\" class=\"card card-body\" style=\"margin-bottom: 15px\">\n                                    <div class=\"alert alert-info\">\n                                        <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n                                    </div>\n                                    <div class=\"form-group row\">\n                                        <div class=\"checkbox col-6\">\n                                            <label>\n                                                <input type=\"checkbox\" data-bind=\"checked: barChartHorizontal\" />\n                                                Horizontal Bar Chart\n                                            </label>\n                                        </div>\n                                        <div class=\"checkbox col-6\">\n                                            <label>\n                                                <input type=\"checkbox\" data-bind=\"checked: barChartStacked\" />\n                                                Stacked Bar Chart\n                                            </label>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n                                    <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n                                </div>\n                                <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n                                    <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Transpose, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n                                </div>\n                                <div data-bind=\"visible: ReportType()=='Map'\" class=\"card card-body\" style=\"margin-bottom: 15px\">\n                                    <div class=\"alert alert-info\">\n                                        <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Map Graph, the first field below has to be a Region, like a Country.\n                                    </div>\n                                    <div class=\"form-group row\">\n                                        <label class=\"col-sm-2 control-label\">Map Display</label>\n                                        <div class=\"col-sm-4\">\n                                            <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n                                        </div>\n                                    </div>\n                                </div>\n                                <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n                                    <li class=\"list-group-item\">\n                                        <div class=\"row\">\n                                            <div class=\"col\">\n                                                <span class=\"fa fa-columns\"></span>\n                                                <span data-bind=\"text: selectedFieldName\"></span>\n                                                <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n                                                <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n                                                    <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n                                                </span>\n                                            </div>\n                                            <div class=\"col\">\n                                                <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n                                                    <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n                                                </div>\n                                                <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                    <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                    <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n                                                    <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n                                                        <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n                                                        <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n                                                        <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())  && $parent.isChart() && $index()>0\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n                                                        <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal()  &&  (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n                                                        <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n                                                        <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n                                                        <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n                                                    </span>\n                                                </div>\n                                                <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n                                                    <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n                                                        <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n                                                    </span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                    <br />\n                    <div class=\"card card-body\">\n                        <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\n    \n                        <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n                            <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n                                <div data-bind=\"template: {name: 'filter-parameters'}\"></div>\n                            </div>\n                            <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n                                <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                            </div>\n    \n                            <div class=\"checkbox col-12\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n                                    Allow setting up and saving filters on Report\n                                </label>\n                            </div>\n                            <br />\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"visible: SaveReport\" class=\"card card-body\">\n                        <h5><span class=\"fa fa-hourglass\"></span>&nbsp;Choose Schedule</h5>\n    \n                        <div style=\"padding: 10px 10px\" data-bind=\"if: SaveReport\">\n                            <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n                        </div>\n                    </div>\n                    <br />\n                    <div class=\"card card-body\">\n                        <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n                            <label class=\"col-sm-2 control-label\">Report Name</label>\n                            <div class=\"col-sm-10\">\n                                <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n                            </div>\n                        </div>\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-2 control-label\">Report Description</label>\n                            <div class=\"col-sm-10\">\n                                <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n                            </div>\n                        </div>\n                        <div data-bind=\"ifnot: useStoredProc\">\n                            <div class=\"form-group row\">\n                                <label class=\"col-sm-2 control-label\">Sort By</label>\n                                <div class=\"col-sm-6\">\n                                    <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n                                </div>\n                            </div>\n                            <div data-bind=\"foreach: SortFields\">\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">&nbsp;&nbsp;Then Sort By</label>\n                                    <div class=\"col-sm-4\">\n                                        <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n                                    </div>\n                                    <div class=\"col-sm-2\">\n                                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n    \n                        <div class=\"checkbox\" data-bind=\"visible: isChart\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n                                Show Data along with Graph\n                            </label>\n                        </div>\n                        <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n                                Save Report\n                            </label>\n                        </div>\n                        <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n                            <label class=\"col-sm-2 control-label\">Choose Folder</label>\n                            <div class=\"col-sm-10\">\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n                            </div>\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"ifnot: useStoredProc\" class=\"card card-body\">\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <h5><span class=\"fa fa-gear\"></span>&nbsp;Other Settings</h5>\n                                <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n                                        Include Total Row\n                                    </label>\n                                </div>\n                                <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n                                        Show only Unique Records\n                                    </label>\n                                </div>\n                                <div class=\"checkbox\" data-bind=\"visible: ReportType()!='List'\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: ShowExpandOption\" />\n                                        Don't Show Expand Option\n                                    </label>\n                                </div>\n                                <div class=\"checkbox\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: DontExecuteOnRun\" />\n                                        Wait to Select Filters before Running Report\n                                    </label>\n                                </div>\n                                <div class=\"form-group row\">\n                                    <div class=\"checkbox col-md-4\">\n                                        <label>\n                                            <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n                                            Max Records\n                                        </label>\n                                    </div>\n                                    <div class=\"col-md-6\" data-bind=\"if: maxRecords\">\n                                        <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"col-md-6\">\n                                <h5><span class=\"fa fa-paint-brush\"></span>&nbsp;Pick Report Format</h5>\n                                <div>\n                                    <!-- ko foreach: tableStyles -->\n                                    <div class=\"dropdown-option\" data-bind=\"title: $data.name, click: $parent.selectStyle, css: {'dropdown-option-selected': $parent.selectedStyle() == $data.colorscheme}\">\n                                        <div class=\"mini-table-preview\" data-bind=\"foreach: new Array(5)\">\n                                            <div class=\"mini-table-row\" data-bind=\"foreach: new Array(5)\">\n                                                <div class=\"mini-table-cell\" data-bind=\"style: { backgroundColor: $parentContext.$index() === 0 ? $parents[1].headerBg : ($parentContext.$index() % 2 === 0 ? $parents[1].altRowBg : $parents[1].rowBg), color: $parents[1].textColor }\"></div>\n    \n                                            </div>\n                                        </div>\n                                    </div>\n                                    <!-- /ko -->\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <br />\n                    <div data-bind=\"visible: adminMode\" class=\"card card-body\">\n                        <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n                    </div>\n                </div>\n                <div class=\"modal-footer\">\n                    <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n                    <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n                </div>\n            </div>\n        </div>\n    </script>\n    \n    <div class=\"modal\" id=\"drilldownModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n        <div class=\"modal-dialog modal-lg\">\n            <div class=\"modal-content\" data-bind=\"with: ChartDrillDownData\">\n                <div class=\"modal-header\">\n                    <h4 class=\"modal-title\">Drilldown Data</h4>\n                    <button type=\"button\" class=\"close pull-right\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n                </div>\n                <!-- ko if: DrillDownData -->\n                <div class=\"modal-body\">\n                    <table class=\"table table-striped table-hover table-condensed\" data-bind=\"with: DrillDownData, attr: {class: 'table table-striped table-hover table-condensed ' + $parent.selectedStyle()}\">\n                        <thead>\n                            <tr class=\"no-highlight\">\n                                <!-- ko foreach: Columns -->\n                                <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n                                    <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n                                   \n                                </th>\n                                <!-- /ko -->\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n                                <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                    No records found\n                                </td>\n                            </tr>\n                            <!-- ko foreach: Rows  -->\n                            <tr>\n                                <!-- ko foreach: Items -->\n                                <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal' }\">\n                                    <div data-bind=\"style: {'width': fieldWidth }\">\n                                        <!-- ko if: LinkTo-->\n                                        <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: formattedVal\"></span></a>\n                                        <!-- /ko-->\n                                        <!-- ko ifnot: LinkTo-->\n                                        <span data-bind=\"html: formattedVal\"></span>\n                                        <!-- /ko-->\n                                    </div>\n                                </td>\n                                <!-- /ko-->\n                            </tr> \n                            <!-- /ko -->\n                        </tbody>\n                    </table>\n                </div>\n                <div class=\"modal-footer\">\n                    <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                        <div class=\"form-inline small text-muted\">\n                            <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                            </div>\n                            <div class=\"pull-left\">\n                                <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                            </div>\n                            <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- /ko -->\n            </div>\n        </div>\n    </div>\n    \n    <div class=\"modal\" id=\"noaccountModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n        <div class=\"modal-dialog\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n                    <h4 class=\"modal-title\">Account not Setup</h4>\n                </div>\n                <div class=\"modal-body\">\n                    <p class=\"alert alert-danger\">dotnet Report Account Configuration missing!</p>\n                    <p>You do not have the neccessary initial configuration completed to use dotnet Report.</p>\n                    <p>Please view the <a href=\"https://dotnetreport.com/blogs/getting-started-with-dotnet-report/\" target=\"_blank\">Getting Started Guide</a> to correctly configure dotnet Report.</p>\n                </div>\n                <div class=\"modal-footer\">\n                    <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n                </div>\n            </div>\n        </div>\n    </div>\n        ");
             this.cdref.detectChanges();
         };
         DotnetdashboardComponent.prototype.bindWindowResize = function (vm) {
@@ -256,7 +256,7 @@
         return DotnetdashboardComponent;
     }());
     DotnetdashboardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DotnetdashboardComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.DomSanitizer }, { token: i0__namespace.ChangeDetectorRef }, { token: BASE_URL_TOKEN }, { token: i2__namespace.HttpClient }, { token: i3__namespace.ActivatedRoute }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DotnetdashboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DotnetdashboardComponent, selector: "app-dotnetdashboard", ngImport: i0__namespace, template: "<div id=\"dot-net-report\" class=\"body-content\">\r\n\r\n    <div class=\"row\">\r\n        <div class=\"col-8\" data-bind=\"with: currentDashboard\">\r\n        <h2 data-bind=\"text: name ? name : 'Dashboard'\">Dashboard</h2>\r\n        <p data-bind=\"text: description\"></p>\r\n    </div>\r\n\r\n    <div class=\"col-4 right-align\" style=\"display: none;\" data-bind=\"visible: dashboards().length > 0 \">\r\n        <div class=\"row\">\r\n\r\n            <label class=\"col\">Switch Dashboard</label>\r\n            <select class=\"col form-control\" data-bind=\"options: dashboards, optionsText: 'name', optionsValue: 'id', value: selectDashboard\"></select>\r\n            <div class=\"col\">\r\n                <button class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#add-dashboard-modal\" title=\"Edit Dashboard Settings\" data-bind=\"click: editDashboard\">Edit</button>\r\n                <button class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#add-dashboard-modal\" title=\"Add a New Dashboard\" data-bind=\"click: newDashboard\">Add</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"clearfix\"></div>\r\n\r\n<div data-bind=\"template: {name: 'admin-mode-template'}, visible: allowAdmin\" style=\"display: none;\"></div>\r\n\r\n<div class=\"centered\" style=\"display: none;\" data-bind=\"visible: dashboards().length == 0 \">\r\n    No Dashboards yet. Click below to Start<br />\r\n    <button class=\"btn btn-lg btn-primary\" data-toggle=\"modal\" data-target=\"#add-dashboard-modal\"><i class=\"fa fa-dashboard\"></i> Create a New Dashboard</button>\r\n</div>\r\n\r\n<div class=\"modal modal-fullscreen\" id=\"add-dashboard-modal\" role=\"dialog\">\r\n    <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\" data-bind=\"with: dashboard\">\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\"><span data-bind=\"text: Id() ? 'Edit' : 'Add'\"></span> Dashboard</h4>\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"form-horizontal\">\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\">Name</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <input class=\"form-control text-box\" style=\"width: 100%;\" data-val=\"true\" data-val-required=\"Dashboard Name is required.\" type=\"text\" data-bind=\"value: Name\" placeholder=\"Dashboard Name, ex Sales, Accounting\" id=\"add-dash-name\" />\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\">Description</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <textarea class=\"form-control text-box\" style=\"width: 100%;\" data-bind=\"value: Description\" placeholder=\"Optional Description for the Dashboard\">\r\n                                </textarea>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <hr />\r\n                <h5><span class=\"fa fa-paperclip\"></span> Choose Reports for the Dashboard</h5>\r\n                <div data-bind=\"foreach: $parent.reportsAndFolders\" class=\"card\" style=\"margin-left: 20px;\">\r\n                    <div class=\"card-body\">\r\n                        <a class=\"btn btn-link\" role=\"button\" data-toggle=\"collapse\" data-bind=\"attr: {href: '#folder-' + folderId }\">\r\n                            <i class=\"fa fa-folder\"></i>&nbsp;<span data-bind=\"text: folder\"></span>\r\n                        </a>\r\n                        <div class=\"collapse\" data-bind=\"attr: {id: 'folder-' + folderId }\">\r\n                            <ul class=\"list-group\" data-bind=\"foreach: reports\">\r\n                                <li class=\"list-group-item\">\r\n                                    <div class=\"checkbox\">\r\n                                        <label class=\"list-group-item-heading\">\r\n                                            <input type=\"checkbox\" data-bind=\"checked: selected\">\r\n                                            <span class=\"fa\" data-bind=\"css: {'fa-file': reportType=='List', 'fa-th-list': reportType=='Summary', 'fa-bar-chart': reportType=='Bar', 'fa-pie-chart': reportType=='Pie',  'fa-line-chart': reportType=='Line', 'fa-globe': reportType =='Map'}\" style=\"font-size: 14pt; color: #808080\"></span>\r\n                                            <span data-bind=\"text: reportName\"></span>\r\n                                        </label>\r\n                                    </div>\r\n                                    <p class=\"list-group-item-text small\" data-bind=\"text: reportDescription\"></p>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div data-bind=\"if: $parent.adminMode\">\r\n                <hr />\r\n                <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: $root.deleteDashboard, visible: Id\">Delete Dashboard</button>\r\n                <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: $root.saveDashboard\">Save Dashboard</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<div class=\"clearfix\"></div>\r\n\r\n<div class=\"grid-stack\" data-bind=\"visible: reports().length>0, foreach: reports\" style=\"display: none;\">\r\n    <div class=\"grid-stack-item\" data-bind=\"attr: {'data-gs-x': x, 'data-gs-y': y, 'data-gs-width': width, 'data-gs-height': height, 'data-gs-auto-position': true, 'data-gs-id': ReportID}\">\r\n\r\n        <div class=\"card\" data-bind=\"attr: {class: 'card ' + panelStyle + ' grid-stack-item-content'}, css: { expanded: isExpanded }\" style=\"overflow-y: hidden;\">\r\n            <div class=\"padded-div\">\r\n                <div class=\"pull-left\">\r\n                    <button type=\"button\" class=\"btn\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\r\n                        <span class=\"fa fa-ellipsis-v\"></span>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu small\" style=\"z-index: 1001;\">\r\n                        <li class=\"dropdown-item\" data-bind=\"visible: FlyFilters().length> 0\">\r\n                            <a href=\"#\" data-bind=\"click: toggleFlyFilters\">\r\n                                <span class=\"fa fa-filter\"></span> Filter\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"dropdown-item\" data-bind=\"visible: CanEdit\">\r\n                            <a href=\"#\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\" data-bind=\"click: openReport\">\r\n                                <span class=\"fa fa-pencil\"></span> Edit\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"dropdown-item\">\r\n                            <a href=\"#\" data-bind=\"click: downloadExcel\">\r\n                                <span class=\"fa fa-file-excel-o\"></span> Excel\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"dropdown-item\">\r\n                            <a href=\"#\" data-bind=\"click: downloadPdfAlt\">\r\n                                <span class=\"fa fa-file-pdf-o\"></span> PDF\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"dropdown-item\">\r\n                            <a href=\"#\" data-bind=\"click: function() { $parent.removeReportFromDashboard(ReportID()); }\">\r\n                                <span class=\"fa fa-close\"></span> Remove\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n\r\n                <h2 class=\"pull-left\" data-bind=\"text: ReportName\"></h2>\r\n                <div class=\"pull-right\">\r\n                    <a class=\"btn btn-link\" data-bind=\"click: toggleExpand\"><span class=\"fa\" data-bind=\"css: {'fa-expand': !isExpanded(), 'fa-minus': isExpanded() }, visible: ReportType() != 'Single'\"></span></a>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-body list-overflow-auto\">\r\n                <p data-bind=\"html: ReportDescription, visible: ReportDescription\"></p>\r\n                <div data-bind=\"template: {name: 'fly-filter-template'}, visible: showFlyFilters\"></div>\r\n                <div data-bind=\"with: ReportResult\" class=\"small\">\r\n                    <div data-bind=\"template: 'report-template', data: $data\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"form-inline\">\r\n                <div class=\"small\" data-bind=\"with: pager\">\r\n                    <div class=\"form-group pull-left total-records\" data-bind=\"if: totalRecords()>1\">\r\n                        <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span><br />\r\n                    </div>\r\n                    <div class=\"form-group pull-right\" data-bind=\"if: pages()>1\">\r\n                        <div data-bind=\"template: 'pager-template', data: $data\"></div>\r\n                    </div>\r\n                    <div class=\"clearfix\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Report Builder -->\r\n<div class=\"modal modal-fullscreen\" id=\"modal-reportbuilder\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" style=\"padding-right: 0px !important;\" data-bind=\"with: selectedReport\"> \r\n<div data-bind=\"template: {name: 'report-designer', data: $data}\"></div>\r\n</div>\r\n\r\n<!-- Field Options Modal -->\r\n<div class=\"modal\" id=\"fieldOptionsModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" data-bind=\"with: selectedReport\">\r\n<div data-bind=\"template: {name: 'report-field-options', data: $data}\"></div>\r\n</div>\r\n\r\n<!-- Link Edit Modal -->\r\n<div class=\"modal\" id=\"linkModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" data-bind=\"with: selectedReport\">\r\n<div data-bind=\"template: {name: 'report-link-edit', data: $data}\"></div>\r\n</div>\r\n\r\n<div class=\"modal\" id=\"noaccountModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                <h4 class=\"modal-title\">Account not Setup</h4>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <p class=\"alert alert-danger\">dotnet Report Account Configuration missing!</p>\r\n                <p>You do not have the neccessary initial configuration completed to use dotnet Report.</p>\r\n                <p>Please view the <a href=\"https://dotnetreport.com/blog/2016/03/getting-started-with-dotnet-report/\" target=\"_blank\">Getting Started Guide</a> to correctly configure dotnet Report.</p>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Templates -->\r\n<div [innerHtml]=\"reportTemplates\"></div>\r\n<!-- Templates -->\r\n\r\n</div>", styles: [".report-chart{min-height:auto!important}.expanded{position:fixed!important;padding:0!important;margin:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:99993!important}\n"] });
+    DotnetdashboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DotnetdashboardComponent, selector: "app-dotnetdashboard", ngImport: i0__namespace, template: "<div id=\"dot-net-report\" class=\"body-content\">\r\n\r\n<div class=\"row\">\r\n    <div class=\"col-4\" data-bind=\"with: currentDashboard\">\r\n        <h2 title=\"Switch Dashboard\">\r\n            <select class=\"form-control select-as-text\" title=\"Switch Dashboard\" data-bind=\"select2: {minimumResultsForSearch: Infinity}, options: $parent.dashboards, optionsText: 'name', optionsValue: 'id', value: $parent.selectDashboard\"></select>\r\n        </h2>\r\n        <p data-bind=\"text: description\"></p>\r\n    </div>\r\n    <div class=\"col-4\">\r\n        &nbsp;\r\n    </div>\r\n</div>\r\n<div class=\"clearfix\"></div>\r\n\r\n<div data-bind=\"template: {name: 'admin-mode-template'}, visible: allowAdmin\" style=\"display: none;\"></div>\r\n\r\n<div class=\"row padded-top\">\r\n    <div class=\"col-md-12\">\r\n        <button class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#add-dashboard-modal\" title=\"Edit Dashboard Settings\" data-bind=\"click: editDashboard\">Edit this Dashboard</button>\r\n        <button class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#add-dashboard-modal\" title=\"Add a New Dashboard\" data-bind=\"click: newDashboard\">Add a new Dashboard</button>\r\n    </div>\r\n</div>\r\n<div class=\"padded-top\"></div>\r\n\r\n<div class=\"centered\" style=\"display: none;\" data-bind=\"visible: dashboards().length == 0 \">\r\n    No Dashboards yet. Click below to Start<br />\r\n    <button class=\"btn btn-lg btn-primary\" data-toggle=\"modal\" data-target=\"#add-dashboard-modal\"><i class=\"fa fa-dashboard\"></i> Create a New Dashboard</button>\r\n</div>\r\n\r\n<div class=\"modal modal-fullscreen\" id=\"add-dashboard-modal\" role=\"dialog\">\r\n    <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\" data-bind=\"with: dashboard\">\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\"><span data-bind=\"text: Id() ? 'Edit' : 'Add'\"></span> Dashboard</h4>\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"form-horizontal\">\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\">Name</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <input class=\"form-control text-box\" style=\"width: 100%;\" data-val=\"true\" data-val-required=\"Dashboard Name is required.\" type=\"text\" data-bind=\"value: Name\" placeholder=\"Dashboard Name, ex Sales, Accounting\" id=\"add-dash-name\" />\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\">Description</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <textarea class=\"form-control text-box\" style=\"width: 100%;\" data-bind=\"value: Description\" placeholder=\"Optional Description for the Dashboard\">\r\n                                    </textarea>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <hr />\r\n                <h5><span class=\"fa fa-paperclip\"></span> Choose Reports for the Dashboard</h5>\r\n                <div data-bind=\"foreach: $parent.reportsAndFolders\" class=\"card\" style=\"margin-left: 20px;\">\r\n                    <div class=\"card-body\">\r\n                        <a class=\"btn btn-link\" role=\"button\" data-toggle=\"collapse\" data-bind=\"attr: {href: '#folder-' + folderId }\">\r\n                            <i class=\"fa fa-folder\"></i>&nbsp;<span data-bind=\"text: folder\"></span>\r\n                        </a>\r\n                        <div class=\"collapse\" data-bind=\"attr: {id: 'folder-' + folderId }\">\r\n                            <ul class=\"list-group\" data-bind=\"foreach: reports\">\r\n                                <li class=\"list-group-item\">\r\n                                    <div class=\"checkbox\">\r\n                                        <label class=\"list-group-item-heading\">\r\n                                            <input type=\"checkbox\" data-bind=\"checked: selected\">\r\n                                            <span class=\"fa\" data-bind=\"css: {'fa-file': reportType=='List', 'fa-th-list': reportType=='Summary', 'fa-bar-chart': reportType=='Bar', 'fa-pie-chart': reportType=='Pie',  'fa-line-chart': reportType=='Line', 'fa-globe': reportType =='Map'}\" style=\"font-size: 14pt; color: #808080\"></span>\r\n                                            <span data-bind=\"text: reportName\"></span>\r\n                                        </label>\r\n                                    </div>\r\n                                    <p class=\"list-group-item-text small\" data-bind=\"text: reportDescription\"></p>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div data-bind=\"if: $parent.adminMode\">\r\n                    <hr />\r\n                    <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: $root.deleteDashboard, visible: Id\">Delete Dashboard</button>\r\n                <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: $root.saveDashboard\">Save Dashboard</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"clearfix\"></div>\r\n<div class=\"row\">\r\n    <div class=\"col-md-12\">\r\n        <div data-bind=\"template: {name: 'fly-filter-template'}\"></div>\r\n        <br />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"grid-stack\" data-bind=\"visible: reports().length>0, foreach: reports\" style=\"display: none;\">\r\n    <div class=\"grid-stack-item\" data-bind=\"attr: {'data-gs-x': x, 'data-gs-y': y, 'data-gs-width': width, 'data-gs-height': height, 'data-gs-auto-position': true, 'data-gs-id': ReportID}\">\r\n\r\n        <div class=\"card\" data-bind=\"attr: {class: 'card ' + panelStyle + ' grid-stack-item-content'}, css: { expanded: isExpanded }\" style=\"overflow-y: hidden;\">\r\n            <div class=\"padded-div\">\r\n                <div class=\"pull-left\">\r\n                    <button type=\"button\" class=\"btn\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\r\n                        <span class=\"fa fa-ellipsis-v\"></span>\r\n                    </button>\r\n                    <ul class=\"dropdown-menu small\" style=\"z-index: 1001;\">\r\n                        <li class=\"dropdown-item\" data-bind=\"visible: FlyFilters().length> 0\">\r\n                            <a href=\"#\" data-bind=\"click: toggleFlyFilters\">\r\n                                <span class=\"fa fa-filter\"></span> Filter\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"dropdown-item\" data-bind=\"visible: CanEdit\">\r\n                            <a href=\"#\" data-toggle=\"modal\" data-target=\"#modal-reportbuilder\" data-bind=\"click: openReport\">\r\n                                <span class=\"fa fa-pencil\"></span> Edit\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"dropdown-item\">\r\n                            <a href=\"#\" data-bind=\"click: downloadExcel\">\r\n                                <span class=\"fa fa-file-excel-o\"></span> Excel\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"dropdown-item\">\r\n                            <a href=\"#\" data-bind=\"click: downloadPdfAlt\">\r\n                                <span class=\"fa fa-file-pdf-o\"></span> PDF\r\n                            </a>\r\n                        </li>\r\n                        <li class=\"dropdown-item\">\r\n                            <a data-bind=\"attr: {href: '/DotNetReport/Report?linkedreport=true&noparent=true&reportId=' + ReportID() }\" target=\"_blank\">\r\n                                <span class=\"fa fa-file\"></span> Report\r\n                            </a>\r\n                        </li>\r\n\r\n                        <li class=\"dropdown-item\">\r\n                            <a href=\"#\" data-bind=\"click: function() { $parent.removeReportFromDashboard(ReportID()); }\">\r\n                                <span class=\"fa fa-close\"></span> Remove\r\n                            </a>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n\r\n                <h2 class=\"pull-left\" data-bind=\"text: ReportName\"></h2>\r\n                <div class=\"pull-right\">\r\n                    <a class=\"btn btn-link\" data-bind=\"click: toggleExpand\"><span class=\"fa\" data-bind=\"css: {'fa-expand': !isExpanded(), 'fa-minus': isExpanded() }, visible: ReportType() != 'Single'\"></span></a>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-body list-overflow-auto\">\r\n                <p data-bind=\"html: ReportDescription, visible: ReportDescription\"></p>\r\n                <div data-bind=\"template: {name: 'fly-filter-template'}, visible: showFlyFilters\"></div>\r\n                <div data-bind=\"with: ReportResult\" class=\"small\">\r\n                    <div data-bind=\"template: 'report-template', data: $data\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"form-inline\">\r\n                <div class=\"small\" data-bind=\"with: pager\">\r\n                    <div class=\"form-group pull-left total-records\" data-bind=\"if: totalRecords()>1\">\r\n                        <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span><br />\r\n                    </div>\r\n                    <div class=\"form-group pull-right\" data-bind=\"if: pages()>1\">\r\n                        <div data-bind=\"template: 'pager-template', data: $data\"></div>\r\n                    </div>\r\n                    <div class=\"clearfix\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n\r\n<!-- Report Builder -->\r\n<div class=\"modal modal-fullscreen\" id=\"modal-reportbuilder\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" style=\"padding-right: 0px !important;\" data-bind=\"with: selectedReport\">\r\n    <div data-bind=\"template: {name: 'report-designer', data: $data}\"></div>\r\n</div>\r\n\r\n<!-- Field Options Modal -->\r\n<div class=\"modal\" id=\"fieldOptionsModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" data-bind=\"with: selectedReport\">\r\n    <div data-bind=\"template: {name: 'report-field-options', data: $data}\"></div>\r\n</div>\r\n\r\n<!-- Link Edit Modal -->\r\n<div class=\"modal\" id=\"linkModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\" data-bind=\"with: selectedReport\">\r\n    <div data-bind=\"template: {name: 'report-link-edit', data: $data}\"></div>\r\n</div>\r\n\r\n<!-- Templates -->\r\n<div [innerHtml]=\"reportTemplates\"></div>\r\n<!-- Templates -->\r\n\r\n</div>", styles: [".report-chart{min-height:auto!important}.expanded{position:fixed!important;padding:0!important;margin:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:99993!important}\n"] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DotnetdashboardComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -286,7 +286,8 @@
             var loadSetupSchemaUrl = this.baseServiceUrl + "/DotNetReportApi/LoadSetupSchema";
             this.queryParams = this.route.snapshot.queryParams;
             var databaseApiKey = this.queryParams['databaseApiKey'] || '';
-            this.http.get(loadSetupSchemaUrl + "?databaseApiKey=" + databaseApiKey).subscribe(function (model) {
+            var onlyApi = this.queryParams['onlyApi'] === 'false';
+            this.http.get(loadSetupSchemaUrl + "?databaseApiKey=" + databaseApiKey + '&onlyApi=' + onlyApi).subscribe(function (model) {
                 var options = {
                     model: model,
                     saveTableUrl: model.ApiUrl + 'ReportApi/SaveTable',
@@ -302,6 +303,7 @@
                     searchProcUrl: _this.baseServiceUrl + '/DotNetReportApi/SearchProcedure',
                     getSchemaFromSql: _this.baseServiceUrl + '/DotNetReportApi/GetSchemaFromSql',
                     apiUrl: _this.baseServiceUrl + '/DotNetReportApi/CallReportApi',
+                    onlyApi: onlyApi
                 };
                 _this.renderKOTemplates();
                 var vm = new manageViewModel(options);
@@ -319,13 +321,13 @@
             this.ngOnInit();
         };
         DotnetsetupComponent.prototype.renderKOTemplates = function () {
-            this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n  <!-- Dotnet Report HTML Templates -->\n  <script type=\"text/html\" id=\"report-filter\">\n      <div class=\"form-group\">\n          <!-- ko if: !hasForeignKey-->\n          <!-- ko if: fieldType=='DateTime'-->\n          <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n          <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n          <!-- /ko -->\n          <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n          From\n          <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n          to\n          <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n          <!-- /ko -->\n          <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n          <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n              <option value=\"\"></option>\n              <option>Today</option>\n              <option>Today +</option>\n              <option>Today -</option>\n              <option>Yesterday</option>\n              <option>This Week</option>\n              <option>Last Week</option>\n              <option>This Month</option>\n              <option>Last Month</option>\n              <option>This Year</option>\n              <option>Last Year</option>\n              <option>This Month To Date</option>\n              <option>This Year To Date</option>\n              <option>Last 30 Days</option>\n              <optgroup label=\"Comparison Options\">\n                  <option>>= Today</option>\n                  <option><= Today</option>\n                  <option>>= Today +</option>\n                  <option><= Today +</option>\n                  <option>>= Today -</option>\n                  <option><= Today -</option>\n              </optgroup>\n          </select>\n          <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n              <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n          </div>\n          <!-- /ko -->\n          <!-- /ko -->\n          <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n          <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n          <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n          <!-- /ko -->\n          <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n          From\n          <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n          to\n          <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n          <!-- /ko -->\n          <!-- /ko -->\n          <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n          <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n              <option value=\"1\">Yes</option>\n              <option value=\"0\">No</option>\n          </select>\n          <!-- /ko -->\n          <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n          <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n          <!-- /ko -->\n          <!-- /ko -->\n          <!-- ko if: hasForeignKey-->\n          <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n          <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n          <!-- /ko -->\n          <!-- ko if: $parent.Operator()=='='-->\n          <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n          <!-- /ko -->\n          <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n          <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n          <!-- /ko -->\n          <!-- /ko -->\n      </div>\n  </script>\n  <script type=\"text/html\" id=\"pager-template\">\n      <div class=\"pager-container\">\n          <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a>&nbsp;\n          <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n          <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n          <span class=\"pager-pageinfo\">\n              <span>Page</span>&nbsp;\n              <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n                                  value: currentPage,\n                                  attr: { max: pages() }\" />&nbsp;\n              <span>of</span>&nbsp;\n              <span data-bind=\"text: pages\"></span>\n          </span>&nbsp;\n  \n          <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a>&nbsp;\n          <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n      </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-column-header\">\n      <!-- ko foreach: Columns -->\n      <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n          <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n          <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor(), 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n          <!-- /ko -->\n          <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false)  -->\n          <a href=\"\" data-bind=\"click: function(){ !$parent.IsDrillDown() ? $parents[3].changeSort(SqlField) : $parents[1].changeSort(SqlField); }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n              <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n              <span data-bind=\"text: (!$parent.IsDrillDown() ? $parents[3].pager.sortColumn() : $parents[1].pager.sortColumn()) === SqlField ? ((!$parent.IsDrillDown() ? $parents[3].pager.sortDescending() : $parents[1].pager.sortDescending()) ? '&#9660;' : '&#9650;') : ''\"></span>\n          </a>\n          <!-- /ko -->\n  \n          <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n              <div class=\"dropup\">\n              <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                  <span class=\"fa fa-ellipsis-v\"></span>\n              </a>\n                  <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n                      <li class=\"dropdown-item small\">\n                          <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n                              <span class=\"fa fa-clone\"></span> Outer Group\n                          </a>\n                      </li>\n                      <li class=\"dropdown-item small\">\n                          <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n                              <span class=\"fa fa-gear\"></span> Field Settings\n                          </a>\n                      </li>\n                  </ul>\n              </div>\n          </div>\n  \n      </th>\n      <!-- /ko -->\n  </script>\n  \n  <script type=\"text/html\" id=\"report-column\">\n      <!-- ko foreach: Items -->\n      <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign() ? fieldAlign() : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '64px' : ''}\">\n          <div data-bind=\"style: {'width': fieldWidth }\">\n          <!-- ko if: LinkTo-->\n          <a data-bind=\"attr: {href: LinkTo}\"><span data-bind=\"html: FormattedValue\"></span></a>\n          <!-- /ko-->\n          <!-- ko ifnot: LinkTo-->\n          <span data-bind=\"html: FormattedValue\"></span>\n          <!-- /ko-->\n          </div>\n      </td>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-pivot\">\n          <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n          <table class=\"table table-hover table-condensed\">\n              <thead>\n                  <tr>\n                      <th></th>\n                      <!-- ko foreach: Rows -->\n                      <th>\n                          <span data-bind=\"text: Items[0].FormattedValue\"></span>\n                      </th>\n                      <!-- /ko -->\n                  </tr>\n              </thead>\n              <tbody data-bind=\"foreach: Columns\">\n                  <tr>\n                  <!-- ko if: $index() > 0 -->\n                  <td>\n                      <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n                  </td>\n                  <!-- ko foreach: $parent.Rows -->\n                  <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n                      <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n                  </td>\n                  <!-- /ko -->\n                  <!-- /ko -->\n                  </tr>\n              </tbody>\n          </table>\n  \n      </div>\n  \n  </script>\n  \n  <script type=\"text/html\" id=\"report-table\">\n          <div class=\"table-responsive\" >\n          <table class=\"table table-hover table-condensed\">\n              <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n                  <tr class=\"no-highlight\">\n                      <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() -->\n                      <th style=\"width: 30px; border-left: 1px solid;\"></th>\n                      <!-- /ko -->\n                      <!-- ko template: 'report-column-header', data: $data -->\n                      <!-- /ko-->\n                  </tr>\n              </thead>\n              <tbody>\n                  <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                      <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                          No records found\n                      </td>\n                  </tr>\n                  <!-- ko foreach: $parent.rows  -->\n                  <tr>\n                      <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n                      <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n                      <!-- /ko -->\n                      <!-- ko template: 'report-column', data: $data -->\n                      <!-- /ko-->\n                  </tr>\n                  <!-- ko if: isExpanded -->\n                  <tr>\n                      <td style=\"width: 30px;\"></td>\n                      <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n                          <!-- ko if: DrillDownData -->\n                          <table class=\"table table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n                              <thead>\n                                  <tr class=\"no-highlight\">\n                                      <!-- ko template: 'report-column-header', data: $data -->\n                                      <!-- /ko-->\n                                  </tr>\n                              </thead>\n                              <tbody>\n                                  <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                                      <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                          No records found\n                                      </td>\n                                  </tr>\n                                  <!-- ko foreach: Rows  -->\n                                  <tr>\n                                      <!-- ko template: 'report-column', data: $data -->\n                                      <!-- /ko-->\n                                  </tr>\n                                  <!-- /ko -->\n                              </tbody>\n                          </table>\n                          <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                              <div class=\"form-inline small text-muted\">\n                                  <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                      <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                                  </div>\n                                  <div class=\"pull-left\">\n                                      <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                                  </div>\n                                  <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                      <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                                  </div>\n                              </div>\n                          </div>\n                          <!-- /ko -->\n                      </td>\n                  </tr>\n                  <!-- /ko -->\n                  <!-- /ko -->\n              </tbody>\n              <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n              <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n                  <tr>\n                      <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n                      <td></td>\n                      <!-- /ko -->\n                      <!-- ko foreach: Items -->\n                      <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n                      <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '64px' : ''}\">\n                          <span data-bind=\"html: FormattedValue, css: {'right-align': true}\"></span>\n                      </td>\n                      <!-- /ko -->\n                      <!-- /ko -->\n                  </tr>\n              </tfoot>\n              <!-- /ko -->\n          </table>\n      </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-template\">\n      <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n      <!-- ko if: $parent.ReportType() == 'Pivot' -->\n      <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n      <!-- /ko -->\n  \n      <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n      <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n          <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n              Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n          </a>\n          <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n              <li class=\"dropdown-item small\">\n                  <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n                      <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n                  </a>\n              </li>\n          </ul>\n      </div>\n      <div class=\"clear-fix\"></div>\n  \n      <div data-bind=\"foreach: outerGroupData\">\n          <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n          <h6 data-bind=\"html: display\"></h6>\n          <div class=\"\" style=\"padding-top: 5px;\"></div>\n          <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n          <!-- /ko -->\n      </div>\n      <!-- /ko -->\n  </script>\n  <script type=\"text/html\" id=\"admin-mode-template\">\n      <div class=\"row\" style=\"padding: 10px 10px\">\n          <div class=\"material-switch pull-right\">\n              <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n              <label for=\"admin-mode\" class=\"label-primary\"></label>\n          </div>\n          <div class=\"pull-right\">Admin Mode</div>\n      </div>\n  \n      <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n          <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n      </div>\n  </script>\n  <script type=\"text/html\" id=\"manage-access-template\">\n      <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n      <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n  \n          <div class=\"form-group row\" data-bind=\"ifnot: manageAccess.isDashboard\">\n              <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n              <div class=\"col-md-3 col-sm-3\">\n                  <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n              </div>\n              <div class=\"col-md-1 col-sm-1\">\n                  <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n              </div>\n          </div>\n          <div class=\"alert alert-info\">\n              <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n          </div>\n  \n          <div class=\"row small\">\n              <div class=\"col-md-6\">\n                  <b>Manage by User</b> (allow edit)\n                  <div class=\"row container-fluid\">\n                      <!-- ko foreach: manageAccess.users -->\n                      <div class=\"pull-left\">\n                          <div class=\"checkbox\">\n                              <label class=\"label label-info\">\n                                  <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                              </label>\n                          </div>\n                      </div>\n                      <!-- /ko -->\n                      <div data-bind=\"if: manageAccess.users.length == 0\">\n                          Users list not populated or not applicable\n                      </div>\n                  </div>\n                  <br />\n                  <b>View only by User</b> (no edit/delete)\n                  <div class=\"row container-fluid\">\n                      <!-- ko foreach: manageAccess.viewOnlyUsers -->\n                      <div class=\"pull-left\">\n                          <div class=\"checkbox\">\n                              <label class=\"label label-info\">\n                                  <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                              </label>\n                          </div>\n                      </div>\n                      <!-- /ko -->\n                      <div data-bind=\"if: manageAccess.users.length == 0\">\n                          Users list not populated or not applicable\n                      </div>\n                  </div>\n                  <br />\n                  <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                      <b>Delete by User</b> (allow delete)\n                      <div class=\"row container-fluid\">\n                          <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n                          <div class=\"pull-left\">\n                              <div class=\"checkbox\">\n                                  <label class=\"label label-info\">\n                                      <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                  </label>\n                              </div>\n                          </div>\n                          <!-- /ko -->\n                          <div data-bind=\"if: manageAccess.users.length == 0\">\n                              Users list not populated or not applicable\n                          </div>\n                      </div>\n                      <br />\n                  </div>\n              </div>\n              <div class=\"col-md-6\">\n                  <b>Manage by User Role</b> (allow edit)\n                  <div class=\"row container-fluid\">\n                      <!-- ko foreach: manageAccess.userRoles -->\n                      <div class=\"pull-left\">\n                          <div class=\"checkbox\">\n                              <label class=\"label label-info\">\n                                  <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                              </label>\n                          </div>\n                      </div>\n                      <!-- /ko -->\n                      <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                          User Roles list not populated or not applicable\n                      </div>\n                  </div>\n                  <br />\n                  <b>View only by User Role</b> (no edit/delete)\n                  <div class=\"row container-fluid\">\n                      <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n                      <div class=\"pull-left\">\n                          <div class=\"checkbox\">\n                              <label class=\"label label-info\">\n                                  <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                              </label>\n                          </div>\n                      </div>\n                      <!-- /ko -->\n                      <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                          User Roles list not populated or not applicable\n                      </div>\n                  </div>\n                  <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                      <br />\n                      <b>Delete by User Role</b> (allow delete)\n                      <div class=\"row container-fluid\">\n                          <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n                          <div class=\"pull-left\">\n                              <div class=\"checkbox\">\n                                  <label class=\"label label-info\">\n                                      <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                  </label>\n                              </div>\n                          </div>\n                          <!-- /ko -->\n                          <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                              User Roles list not populated or not applicable\n                          </div>\n                      </div>\n                  </div>\n              </div>\n          </div>\n      </div>\n  </script>\n  <script type=\"text/html\" id=\"filter-group\">\n      <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n          <div class=\"rules-group-container\">\n              <div class=\"rules-group-header\">\n                  <div data-bind=\"visible: !isRoot\">\n                      <div class=\"pull-left\">\n                          <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n                          <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n                              <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n                          </label>\n                          <label class=\"btn btn-primary\">\n                              <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n                          </label>\n                          </div>\n                      </div>\n                      <div class=\"pull-right\">\n                          <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button>&nbsp;\n                      </div>\n                  </div>\n                  <div data-bind=\"visible: isRoot\">\n                      <div class=\"btn-group btn-group-sm\">\n                          <label class=\"btn btn-primary\">Filter Conditions</label>\n                      </div>\n                  </div>\n                  <div class=\"clearfix\"></div>\n              </div>\n  \n              <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n          </div>\n      </div>\n  </script>\n  <script type=\"text/html\" id=\"fly-filter-template\">\n      <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n          <div class=\"card-header\">\n              <h5 class=\"card-title\">\n                  <a data-toggle=\"collapse\" data-target=\"#filter-panel\" href=\"#\">\n                      <i class=\"fa fa-filter\"></i>Choose filter options\n                  </a>\n              </h5>\n          </div>\n          <div id=\"filter-panel\" class=\"card-body\">\n              <div>\n                  <!-- ko foreach: FlyFilters -->\n                  <div class=\"row\">\n  \n                      <div class=\"col-sm-5 col-xs-4\">\n                          <div data-bind=\"with: Field\" class=\"checkbox\">\n                              <div class=\"checkbox\">\n                                  <label>\n                                      <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /><span data-bind=\"text: selectedFieldName\"></span>\n                                  </label>\n                              </div>\n                          </div>\n                      </div>\n                      <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n                          <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n                              <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                          </div>\n                      </div>\n                      <div data-bind=\"with: Field\" class=\"col-xs-5\">\n                          <div data-bind=\"if: $parent.Apply\">\n                              <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                          </div>\n                      </div>\n                  </div>\n                  <!-- /ko -->\n                  <button class=\"btn btn-primary\" data-bind=\"click: RunReport\">Refresh Report</button>\n              </div>\n          </div>\n      </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"filter-inner\">\n      <div class=\"rules-list\" >\n          <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n          <table class=\"table table-hover table-borderless\">\n              <thead>\n                  <tr>\n                      <th style=\"width: 10%\"></th>\n                      <th style=\"width: 30%\">Field</th>\n                      <th style=\"width: 10%\"></th>\n                      <th style=\"width: 30%\">Filter</th>\n                      <th></th>\n                  </tr>\n              </thead>\n              <tbody data-bind=\"foreach: Filters\">\n                  <tr class=\"rule-container\">\n                      <td>\n                          <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n                              <option>And</option>\n                              <option>Or</option>\n                          </select>\n                      </td>\n                      <td>\n                          <div class=\"form-group\">\n                              <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: $parentContext.$parent.selectedFieldsCanFilter, optionsText: 'selectedFieldName', optionsCaption: 'Please Choose', value: Field, attr: {required: Field()==null?'required':false}, disable: Field() && Field().forced\"></select>\n                          </div>\n                      </td>\n                      <td data-bind=\"with: Field\">\n                          <div class=\"form-group\">\n                              <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                          </div>\n                      </td>\n                      <td data-bind=\"with: Field\">\n                          <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                      </td>\n                      <td>\n                          <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n                          <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n                          <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $parentContext.$parent.canAddSeries() && $index()==0 -->\n                          <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parentContext.$parent.AddSeries.bind($data)\">Add Comparison</button>\n                          <!--/ko -->\n                      </td>\n                  </tr>\n                  <!-- ko foreach: compareTo -->\n                  <tr>\n                      <td></td>\n                      <td style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></td>\n                      <td>Compare To</td>\n                      <td>\n                          <div class=\"form-group\">\n                              <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n                          </div>\n                      </td>\n                  </tr>\n                  <!-- /ko -->\n              </tbody>\n          </table>\n          </div>\n  \n          <div class=\"rule-container\" >\n              <div data-bind=\"template: {name: 'filter-group'}\"></div>\n              <div>\n                  <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n                  <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n              </div>\n          </div>\n      </div>\n  \n  </script>\n  \n  <script type=\"text/html\" id=\"filter-parameters\">\n      <div class=\"table-responsive card\" style=\"margin-left: 20px;\">\n          <div class=\"card-body\">\n              <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n              <table class=\"table  table-hover table-borderless\" data-bind=\"visible: showParameters\">\n                  <thead>\n                      <tr>\n                          <th style=\"width: 30%\">Paramter</th>\n                          <th style=\"width: 20%\"></th>\n                          <th style=\"width: 30%\">Value</th>\n                          <th></th>\n                      </tr>\n                  </thead>\n                  <tbody data-bind=\"foreach: Parameters\">\n                      <tr data-bind=\"ifnot: Hidden\">\n                          <td data-bind=\"text: DisplayName\">\n                          </td>\n                          <td>\n                              <div class=\"form-group\">\n                                  <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n                              </div>\n                          </td>\n                          <td data-bind=\"with: Field\">\n                              <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                          </td>\n                          <td></td>\n                      </tr>\n  \n                  </tbody>\n              </table>\n          </div>\n      </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-schedule\">\n      <div data-bind=\"with: scheduleBuilder\">\n              <div class=\"checkbox\">\n                 <label>\n                    <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n                   Schedule Report\n               </label>\n          </div>\n          <div data-bind=\"if: hasSchedule\">\n  \n                  <div class=\"form-inline form-group\">\n                     <div class=\"row col-sm-12\">\n                         <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span>&nbsp;\n                        <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n                       <div data-bind=\"if: selectedOption() == 'once'\">\n                          &nbsp;on&nbsp;<input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n                      </div>\n                          <div data-bind=\"if: showDays\">\n                             &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n                         </div>\n                        <div data-bind=\"if: showDates\">\n                            &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n                       </div>\n                       <div data-bind=\"if: showMonths\">\n                          &nbsp;of&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n                      </div>\n                          <div data-bind=\"if: showAtTime\">\n                             &nbsp;at&nbsp;<select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n                             <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n                            <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n                                <option>AM</option>\n                               <option>PM</option>\n                          </select>\n                          </div>\n                     </div>\n                 </div>\n                <div class=\"alert alert-info\">\n                    Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n                   <span data-bind=\"if: selectedOption() == 'once'\">\n                       on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n                  </span>\n                      <span data-bind=\"if: showDays\">\n                         on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n                    </span>\n                    <span data-bind=\"if: showDates\">\n                       on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n                       <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n                  </span>\n                  <span data-bind=\"if: showMonths\">\n                          of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n                     </span>\n                    <span data-bind=\"if: showAtTime\">\n                       at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n                   </span>\n              </div>\n              <div class=\"form-horizontal form-group\">\n                      <div class=\"form-group row\">\n                         <label class=\"col-sm-2 control-label\">Email to</label>\n                         <div class=\"col-sm-6\">\n                            <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n                        </div>\n                       <label class=\"col-sm-2 control-label\">Report Format</label>\n                       <div class=\"col-sm-2\">\n                          <select class=\"form-control\" data-bind=\"value: format\">\n                              <option value=\"EXCEL\">Excel</option>\n                                  <option value=\"CSV\">CSV</option>\n                                 <option value=\"PDF\">PDF</option>\n                             </select>\n                        </div>\n                   </div>\n              </div>\n              <div class=\"form-horizontal form-group\">\n                      <div class=\"form-group row\">\n                         <div class=\"col-sm-2 control-label\">\n                             <div class=\"checkbox\">\n                                <label title=\"Set a date to start sending scheduled report\">\n                                    <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n                                   Set Schedule Start Date\n                              </label>\n                              </div>\n                         </div>\n                         <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n                            <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n                        </div>\n                   </div>\n               </div>\n  \n              <div class=\"form-horizontal form-group\">\n                      <div class=\"form-group row\">\n                         <div class=\"col-sm-2 control-label\">\n                            <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n                                <label>\n                                   <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n                                   Set Schedule End Date\n                              </label>\n                          </div>\n                          </div>\n                         <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n                             <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n                        </div>\n                    </div>\n               </div>\n           </div>\n      </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-field-options\">\n      <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n          <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n              <div class=\"modal-header\">\n                  <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n              </div>\n              <div class=\"modal-body needs-validation\">\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n                      </div>\n                  </div>\n                  <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                          <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                          <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n                              <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                          </button>\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                          <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                          <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n                              <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                          </button>\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n                          <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n                          <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n                              <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                          </button>\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n                          <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n                          <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n                              <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                          </button>\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <div class=\"col-sm-12\">\n                          <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                              <label>\n                                  <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n                                  Make Header Text Bold\n                              </label>\n                          </div>\n                          <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n                              <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n                          </button>\n                      </div>\n                  </div>\n                  <div class=\"form-group row\">\n                      <div class=\"col-sm-12\">\n                          <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                              <label>\n                                  <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n                                  Make Text Bold\n                              </label>\n                          </div>\n                          <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n                              <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n                          </button>\n                      </div>\n                  </div>\n                  <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc()\">\n                      <div class=\"col-sm-12\">\n                          <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                              <label>\n                                  <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n                                  Outer Group\n                              </label>\n                          </div>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"modal-footer\">\n                  <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n                  <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n              </div>\n          </div>\n      </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-link-edit\">\n      <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n          <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n              <div class=\"modal-header\">\n                  <h5 class=\"modal-title\">Setup Link Field</h5>\n              </div>\n              <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n                  <div class=\"form-group row\">\n                      <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n                      <div class=\"col-sm-7 col-md-7\">\n                          <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n                      </div>\n                  </div>\n                  <div data-bind=\"if: LinksToReport\">\n                      <div class=\"form-group row\">\n                          <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n                          <div class=\"col-sm-7 col-md-7\">\n                              <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n                          </div>\n                      </div>\n                      <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n                          <label>\n                              <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n                              Send field value as Report Filter Parameter\n                          </label>\n                      </div>\n                      <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n                          <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n                          <div class=\"col-sm-7 col-md-7\">\n                              <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n                          </div>\n                      </div>\n                  </div>\n                  <div data-bind=\"ifnot: LinksToReport\">\n                      <div class=\"form-group row\">\n                          <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n                          <div class=\"col-sm-7 col-md-7\">\n                              <input type=\"url\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n                          </div>\n                      </div>\n                      <div class=\"checkbox\">\n                          <label>\n                              <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n                              Send field value as Query Parameter\n                          </label>\n                      </div>\n                      <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n                          <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n                          <div class=\"col-sm-7 col-md-7\">\n                              <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n                          </div>\n                      </div>\n                      <br />\n                  </div>\n              </div>\n              <div class=\"modal-footer\">\n                  <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n                  <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n              </div>\n          </div>\n      </div>\n  </script>\n  \n  <script type=\"text/html\" id=\"report-designer\">\n      <div class=\"modal-dialog\">\n          <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                  <h5 class=\"modal-title\" id=\"myModalLabel\">\n                      <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/docs/designing-reports/\">\n                          <span class=\"fa fa-question-circle\"></span>\n                      </a>Design your Report\n                  </h5>\n                  <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\n              </div>\n              <div class=\"modal-body needs-validation\">\n                  <h5><span class=\"fa fa-file\"></span>&nbsp;Choose Report Type</h5>\n                  <div class=\"row\">\n                      <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                          <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n                              <span class=\"fa fa-2x fa-list-alt\"></span>\n                              <p>List</p>\n                          </div>\n                      </div>\n                      <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                          <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n                              <span class=\"fa fa-2x fa-table\"></span>\n                              <p>Summary</p>\n                          </div>\n                      </div>\n                      <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                          <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n                              <span class=\"fa fa-2x fa-bar-chart\"></span>\n                              <p>Bar</p>\n                          </div>\n                      </div>\n                      <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                          <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n                              <span class=\"fa fa-2x fa-pie-chart\"></span>\n                              <p>Pie</p>\n                          </div>\n                      </div>\n                      <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                          <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n                              <span class=\"fa fa-2x fa-line-chart\"></span>\n                              <p>Line</p>\n                          </div>\n                      </div>\n                      <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                          <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType()=='Map'}\">\n                              <span class=\"fa fa-2x fa-globe\"></span>\n                              <p>Map</p>\n                          </div>\n                      </div>\n                      <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                          <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n                              <span class=\"fa fa-2x fa-window-maximize\"></span>\n                              <p>Single Value</p>\n                          </div>\n                      </div>\n                      <div class=\"col-md-3 col-sm-3 col-xs-6\">\n                          <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n                              <span class=\"fa fa-2x fa-random\"></span>\n                              <p>Pivot</p>\n                          </div>\n                      </div>\n                  </div>\n                  <hr />\n                  <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span>&nbsp;Choose Data for Report</h5>\n                  <div class=\"pull-right btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n                      <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n                          <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n                      </label>\n                      <label class=\"btn btn-primary\">\n                          <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n                      </label>\n                  </div>\n                  <div class=\"clearfix\"></div>\n                  <div class=\"row\">\n                      <div class=\"col-md-6\">\n                          <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n                          <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n                      </div>\n  \n                      <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n                          <div data-bind=\"with: textQuery.searchFields\">\n                              <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n                          </div>\n                      </div>\n  \n                      <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n                          <div class=\"small pull-left\">\n                              Check the fields you would like to use in the Report\n                          </div>\n                          <div class=\"pull-right btn-toolbar\">\n                              <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n  \n                              <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n                              <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n                          </div>\n                      </div>\n                      <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n                          <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                              <div class=\"list-group-item\">\n                                  <div class=\"checkbox\">\n                                      <label>\n                                          <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n                                          <span data-bind=\"text: fieldName\"></span>\n                                      </label>\n                                  </div>\n                              </div>\n                          </div>\n                      </div>\n                  </div>\n  \n                  <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n                      <br />\n                      <div class=\"card\">\n                          <div class=\"card-header\">\n                              <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n                          </div>\n                          <div class=\"card-body\">\n                              <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n                                  <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                      <div class=\"list-group-item\">\n                                          <div class=\"checkbox\">\n                                              <label>\n                                                  <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n                                                  <span data-bind=\"text: jsonColumnName\"></span>\n                                              </label>\n                                          </div>\n                                      </div>\n                                  </div>\n                              </div>\n                          </div>\n                      </div>\n                  </div>\n  \n                  <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n                      <br />\n                      <br />\n                      <div class=\"card\">\n                          <div class=\"card-body\">\n                              <div class=\"row\">\n                                  <div class=\"col-md-12 pull-right\">\n                                      <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n                                      <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n  \n                                  </div>\n                                  <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n                                      <div class=\"alert alert-info\">\n                                          You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n                                          Please note that Custom Field must be chosen in within the same Section and their data types must match.\n                                      </div>\n                                  </div>\n                              </div>\n                              <div class=\"row\">\n                                  <div class=\"col-sm-6 small\">\n                                      Setup your Formula for calculating this Field\n                                  </div>\n                                  <div class=\"col-sm-6 right-align\">\n                                      <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n                                      <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n                                      <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n                                  </div>\n                              </div>\n                              <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n                                  <div class=\"col-sm-12\">\n                                      <div class=\"alert alert-info\">\n                                          For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n                                      </div>\n                                  </div>\n                              </div>\n                              <div class=\"form-group row\">\n                                  <label class=\"col-sm-2 control-label\">Field Label</label>\n                                  <div class=\"col-sm-10\">\n                                      <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n                                  </div>\n                              </div>\n                              <div class=\"form-group row\">\n                                  <label class=\"col-sm-2 control-label\">Data Format</label>\n                                  <div class=\"col-sm-10\">\n                                      <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n                                          <!-- ko ifnot: formulaOnlyHasDateFields -->\n                                          <option>String</option>\n                                          <option>Integer</option>\n                                          <option>Decimal</option>\n                                          <option>Currency</option>\n                                          <!-- /ko -->\n                                          <!-- ko if: formulaOnlyHasDateFields -->\n                                          <option>Days</option>\n                                          <option>Hours</option>\n                                          <option>Minutes</option>\n                                          <option>Seconds</option>\n                                          <!-- /ko -->\n                                      </select>\n                                  </div>\n                              </div>\n                              <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n                                  <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n                                  <div class=\"col-sm-10\">\n                                      <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n                                  </div>\n                              </div>\n  \n                              <div class=\"form-group row\">\n                                  <label class=\"col-sm-2 control-label\">Field Formula</label>\n                                  <div class=\"col-sm-10\">\n                                      <div data-bind=\"foreach: formulaFields\">\n                                          <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n                                          <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n                                              <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n                                                  <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n                                                  <div data-bind=\"if: setupFormula.isConstantValue\">\n                                                      <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n                                                  </div>\n                                              </div>\n                                          </div>\n                                          <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n                                          <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n                                              <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n                                                  <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n                                                  <option>+</option>\n                                                  <!-- /ko -->\n                                                  <option>-</option>\n                                                  <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n                                                  <option>*</option>\n                                                  <option>/</option>\n                                                  <!-- /ko -->\n                                              </select>\n                                          </div>\n                                      </div>\n                                  </div>\n                              </div>\n                          </div>\n                      </div>\n                      <div class=\"clearfix\"></div>\n                  </div>\n                  <div data-bind=\"if: SelectedFields().length>0\">\n                      <hr />\n                      <h5><span class=\"fa fa-table\"></span>&nbsp;Selected data for the Report</h5>\n                      <div>\n                          <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Bar'\">\n                              <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n                          </div>\n                          <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n                              <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n                          </div>\n                          <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n                              <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Pivot report, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n                          </div>\n                          <div data-bind=\"visible: ReportType()=='Map'\">\n                              <div class=\"alert alert-info\">\n                                  <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Map Graph, the first field below has to be a Region, like a Country.\n                              </div>\n                              <div class=\"form-group row\">\n                                  <label class=\"col-sm-2 control-label\">Map Display</label>\n                                  <div class=\"col-sm-4\">\n                                      <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n                                  </div>\n                              </div>\n                          </div>\n                          <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n                              <li class=\"list-group-item\">\n                                  <div class=\"row\">\n                                      <div class=\"col\">\n                                          <span class=\"fa fa-columns\"></span>\n                                          <span data-bind=\"text: selectedFieldName\"></span>\n                                          <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n                                          <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n                                              <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n                                          </span>\n                                      </div>\n                                      <div class=\"col\">\n                                          <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n                                              <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n                                          </div>\n                                          <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                              <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                              <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n                                              <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                              <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n                                                  <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n                                              </span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                              <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n                                                  <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n                                              </span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n                                              <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n                                                  <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n                                              </span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())  && $parent.isChart() && $index()>0\">\n                                              <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n                                                  <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n                                              </span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal()  &&  (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n                                              <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n                                                  <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n                                              </span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                              <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n                                                  <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n                                              </span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\">\n                                              <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n                                                  <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n                                              </span>\n                                          </div>\n                                          <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n                                              <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n                                                  <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n                                              </span>\n                                          </div>\n                                      </div>\n                                  </div>\n                              </li>\n                          </ul>\n                      </div>\n                      <hr />\n                      <div data-bind=\"if: useStoredProc\">\n                          <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\n  \n                          <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n                              <div data-bind=\"template: {name: 'filter-parameters'}\" class=\"col\"></div>\n                              <br />\n                          </div>\n                      </div>\n                      <div data-bind=\"ifnot: useStoredProc\">\n                          <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\n  \n                          <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n                              <div data-bind=\"template: {name: 'filter-group'}\" class=\"col-12\"></div>\n                              <br />\n  \n                              <div class=\"checkbox col-12\">\n                                  <label>\n                                      <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n                                      Allow setting up and saving filters on Report\n                                  </label>\n                              </div>\n                          </div>\n                      </div>\n                  </div>\n                  <hr />\n                  <div data-bind=\"if: SaveReport\">\n                  <h5><span class=\"fa fa-hourglass\"></span>&nbsp;Choose Schedule</h5>\n  \n                  <div style=\"padding: 10px 10px\">\n                      <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n                  </div>\n                  <hr />\n                  </div>\n                  <div>\n                      <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n                          <label class=\"col-sm-2 control-label\">Report Name</label>\n                          <div class=\"col-sm-10\">\n                              <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n                          </div>\n                      </div>\n                      <div class=\"form-group row\">\n                          <label class=\"col-sm-2 control-label\">Report Description</label>\n                          <div class=\"col-sm-10\">\n                              <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n                          </div>\n                      </div>\n                      <div data-bind=\"ifnot: useStoredProc\">\n                          <div class=\"form-group row\">\n                              <label class=\"col-sm-2 control-label\">Sort By</label>\n                              <div class=\"col-sm-6\">\n                                  <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n                              </div>\n                              <div class=\"col-sm-2\">\n                                  <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n                              </div>\n                              <div class=\"col-sm-2\">\n                                  <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n                              </div>\n                          </div>\n                          <div data-bind=\"foreach: SortFields\">\n                              <div class=\"form-group row\">\n                                  <label class=\"col-sm-2 control-label\">&nbsp;&nbsp;Then Sort By</label>\n                                  <div class=\"col-sm-4\">\n                                      <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n                                  </div>\n                                  <div class=\"col-sm-2\">\n                                      <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n                                  </div>\n                                  <div class=\"col-sm-2\">\n                                      <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n                                  </div>\n                                  <div class=\"col-sm-2\">\n                                      <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n                                  </div>\n                              </div>\n                          </div>\n                          <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n                              <label>\n                                  <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n                                  Include Total Row\n                              </label>\n                          </div>\n                          <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n                              <label>\n                                  <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n                                  Show only Unique Records\n                              </label>\n                          </div>\n                          <div class=\"form-group row\">\n                              <div class=\"checkbox col-md-2\">\n                                  <label >\n                                      <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n                                      Max Records\n                                  </label>\n                              </div>\n                              <div class=\"col-sm-10\" data-bind=\"if: maxRecords\">\n                                  <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n                              </div>\n                          </div>\n                      </div>\n                      <div class=\"checkbox\" data-bind=\"visible: isChart\">\n                          <label>\n                              <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n                              Show Data along with Graph\n                          </label>\n                      </div>\n                      <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n                          <label>\n                              <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n                              Save Report\n                          </label>\n                      </div>\n                      <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n                          <label class=\"col-sm-2 control-label\">Choose Folder</label>\n                          <div class=\"col-sm-10\">\n                              <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n                          </div>\n                      </div>\n  \n                      <div data-bind=\"if: adminMode\">\n                          <hr />\n                          <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n                      </div>\n                  </div>\n              </div>\n              <div class=\"modal-footer\">\n                  <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n                  <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n                  <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n              </div>\n          </div>\n      </div>\n  </script>\n  ");
+            this.reportTemplates = this.sanitizer.bypassSecurityTrustHtml("\n  <!-- Dotnet Report HTML Templates -->\n<script type=\"text/html\" id=\"report-filter\">\n    <div class=\"form-group\">\n        <!-- ko if: !hasForeignKey-->\n        <!-- ko if: fieldType=='DateTime'-->\n        <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 -->\n        <input class=\"form-control\" data-bind=\"datepicker: $parent.Value\" required />\n        <!-- /ko -->\n        <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n        From\n        <input required class=\"form-control\" data-bind=\"datepicker: $parent.Value\" />\n        to\n        <input data-bind=\"datepicker: $parent.Value2\" class=\"form-control\" required />\n        <!-- /ko -->\n        <!-- ko if: ['range'].indexOf($parent.Operator()) != -1 -->\n        <select data-bind=\"value: $parent.Value\" class=\"form-control\" required>\n            <option value=\"\"></option>\n            <option>Today</option>\n            <option>Today +</option>\n            <option>Today -</option>\n            <option>Yesterday</option>\n            <option>This Week</option>\n            <option>Last Week</option>\n            <option>This Month</option>\n            <option>Last Month</option>\n            <option>This Year</option>\n            <option>Last Year</option>\n            <option>This Week To Date</option>\n            <option>This Month To Date</option>\n            <option>This Year To Date</option>\n            <option>Last 30 Days</option>\n            <optgroup label=\"Comparison Options\">\n                <option>>= Today</option>\n                <option><= Today</option>\n                <option>>= Today +</option>\n                <option><= Today +</option>\n                <option>>= Today -</option>\n                <option><= Today -</option>\n            </optgroup>\n        </select>\n        <div data-bind=\"if: $parent.Value().indexOf('Today +') >= 0 || $parent.Value().indexOf('Today -') >= 0\" class=\"form-group pull-left\" style=\"padding-top: 5px;\">\n            <input type=\"number\" class=\"form-control input-sm pull-left\" style=\"width: 80px;\" data-bind=\"value: $parent.Value2\" required /><span style=\"padding: 5px 5px;\" class=\"pull-left\"> days</span>\n        </div>\n        <!-- /ko -->\n        <!-- /ko -->\n        <!-- ko if: ['Int','Money','Float','Double'].indexOf(fieldType) != -1 -->\n        <!-- ko if: ['=','>','<','>=','<=', 'not equal'].indexOf($parent.Operator()) != -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n        <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n        <!-- /ko -->\n        <!-- ko if: ['between'].indexOf($parent.Operator()) != -1 -->\n        From\n        <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value\" required />\n        to\n        <input class=\"form-control\" type=\"number\" data-bind=\"value: $parent.Value2\" required />\n        <!-- /ko -->\n        <!-- /ko -->\n        <!-- ko if: fieldType=='Boolean' && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n        <select required class=\"form-control\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\">\n            <option value=\"1\">Yes</option>\n            <option value=\"0\">No</option>\n        </select>\n        <!-- /ko -->\n        <!-- ko if: ['Int','Money','Float','Double','Date','DateTime','Boolean'].indexOf(fieldType) == -1 && ['is blank', 'is not blank', 'is null', 'is not null'].indexOf($parent.Operator()) == -1 -->\n        <input class=\"form-control\" type=\"text\" data-bind=\"value: $parent.Value, disable: $parent.Operator() == 'is default'\" required />\n        <!-- /ko -->\n        <!-- /ko -->\n        <!-- ko if: hasForeignKey && $parent.Operator() != 'all' -->\n        <!-- ko if: hasForeignParentKey && $parent.showParentFilter() -->\n        <select multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.ParentList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ParentIn\"></select>\n        <!-- /ko -->\n        <!-- ko if: $parent.Operator()=='='-->\n        <select required class=\"form-control\" data-bind=\"options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', value: $parent.Value, optionsCaption: 'Please Choose'\"></select>\n        <!-- /ko -->\n        <!-- ko if: $parent.Operator()=='in' || $parent.Operator()=='not in'-->\n        <select required multiple class=\"form-control\" data-bind=\"select2: { placeholder: 'Please Choose', allowClear: true }, options: $parent.LookupList, optionsText: 'text', optionsValue: 'id', selectedOptions: $parent.ValueIn\"></select>\n        <!-- /ko -->\n        <!-- /ko -->\n    </div>\n</script>\n<script type=\"text/html\" id=\"pager-template\">\n    <div class=\"pager-container\">\n        <a href=\"\" title=\"first\" data-bind=\"click: first, enable: !isFirstPage()\"><i class=\"fa fa-backward report-pager-btn\" style=\"font-size: 18px;\"></i></a>&nbsp;\n        <a href=\"\" title=\"previous\" data-bind=\"click: previous, enable: !isFirstPage()\"><i class=\"fa fa-caret-left fa-2x report-pager-btn\"></i></a>\n        <select class=\"form-control form-control-sm\" data-bind=\"options: [10,30,50,100,150,200,500], value: pageSize\"></select>\n        <span class=\"pager-pageinfo\">\n            <span>Page</span>&nbsp;\n            <input type=\"number\" min=\"1\" pattern=\"[0-9]*\" class=\"form-control form-control-sm text-center\" data-bind=\"\n                                value: currentPage,\n                                attr: { max: pages() }\" />&nbsp;\n            <span>of</span>&nbsp;\n            <span data-bind=\"text: pages\"></span>\n        </span>&nbsp;\n\n        <a href=\"\" title=\"next\" data-bind=\"click: next, enable: !isLastPage()\"><i class=\"fa fa-caret-right fa-2x report-pager-btn\"></i></a>&nbsp;\n        <a href=\"\" title=\"last\" data-bind=\"click: last, enable: !isLastPage()\"><i class=\"fa fa-forward report-pager-btn\" style=\"font-size: 18px;\"></i></a>\n    </div>\n</script>\n\n<script type=\"text/html\" id=\"report-column-header\">\n    <!-- ko foreach: Columns -->\n    <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n        <!-- ko if: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false) -->\n        <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n        <!-- /ko -->\n        <!-- ko ifnot: $parents[3].useStoredProc ? $parents[3].useStoredProc() : ($parents[5].useStoredProc ? $parents[5].useStoredProc() : false)  -->\n        <a href=\"\" data-bind=\"click: function(){ $parents[pagerIndex($parents)].changeSort(SqlField) }, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\">\n            <span data-bind=\"text: fieldLabel() ? fieldLabel() : ColumnName\"></span>\n            <span data-bind=\"text: $parents[pagerIndex($parents)].pager.sortColumn() === SqlField ? ($parents[pagerIndex($parents)].pager.sortDescending() ? '&#9660;' : '&#9650;') : ''\"></span>\n        </a>\n        <!-- /ko -->\n\n        <div class=\"pull-right\" data-bind=\"if: !$parent.IsDrillDown() && !IsNumeric\">\n            <div class=\"dropup\">\n            <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n                <span class=\"fa fa-ellipsis-v\"></span>\n            </a>\n                <ul class=\"dropdown-menu\" style=\"z-index: 1001;\">\n                    <li class=\"dropdown-item small\">\n                        <a href=\"#\" data-bind=\"click: toggleOuterGroup\">\n                            <span class=\"fa fa-clone\"></span> Outer Group\n                        </a>\n                    </li>\n                    <li class=\"dropdown-item small\">\n                        <a href=\"#\" data-bind=\"click: setupFieldOptions\">\n                            <span class=\"fa fa-gear\"></span> Field Settings\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n\n    </th>\n    <!-- /ko -->\n</script>\n\n<script type=\"text/html\" id=\"report-column\">\n    <!-- ko foreach: Items -->\n    <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n        <div data-bind=\"style: {'width': fieldWidth }\">\n        <!-- ko if: LinkTo-->\n        <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: formattedVal\"></span></a>\n        <!-- /ko-->\n        <!-- ko ifnot: LinkTo-->\n        <span data-bind=\"html: formattedVal\"></span>\n        <!-- /ko-->\n        </div>\n    </td>\n</script>\n\n<script type=\"text/html\" id=\"report-pivot\">\n        <div class=\"table-responsive\" data-bind=\"with: ReportData\">\n        <table class=\"table table-striped table-hover table-condensed\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <!-- ko foreach: Rows -->\n                    <th>\n                        <span data-bind=\"text: Items[0].FormattedValue\"></span>\n                    </th>\n                    <!-- /ko -->\n                </tr>\n            </thead>\n            <tbody data-bind=\"foreach: Columns\">\n                <tr>\n                <!-- ko if: $index() > 0 -->\n                <td>\n                    <span data-bind=\"text: fieldLabel || ColumnName\"></span>\n                </td>\n                <!-- ko foreach: $parent.Rows -->\n                <td data-bind=\"style: {'background-color': $parent.backColor, 'color': $parent.fontColor, 'font-weight': $parent.fontBold() ? 'bold' : 'normal', 'text-align': $parent.fieldAlign ? $parent.fieldAlign : ($parent.IsNumeric ? 'right' : 'left') }\">\n                    <span data-bind=\"text: Items[$parentContext.$index()].FormattedValue\"></span>\n                </td>\n                <!-- /ko -->\n                <!-- /ko -->\n                </tr>\n            </tbody>\n        </table>\n\n    </div>\n\n</script>\n\n<script type=\"text/html\" id=\"report-table\">\n    <div class=\"table-responsive\" >\n        <table class=\"table table-hover table-condensed\" data-bind=\"attr: {class: 'table table-striped table-hover table-condensed ' + $parents[2].selectedStyle()}\">        \n            <thead data-bind=\"if: $parents[2].ReportType() != 'Single'\">\n                <tr class=\"no-highlight\">\n                    <!-- ko if: $parentContext.$parentContext.$parent.canDrilldown() && !IsDrillDown() && !CanExpandOption() -->\n                    <th style=\"width: 30px; border-left: 1px solid;\"></th>\n                    <!-- /ko -->\n                    <!-- ko template: 'report-column-header', data: $data -->\n                    <!-- /ko-->\n                </tr>\n            </thead>\n            <tbody>\n                <tr style=\"display: none;\" data-bind=\"visible: Rows.length < 1\">\n                    <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                        <!-- ko if: $parents[2].ReportType()=='Single' -->\n                        <div style=\"text-align: center; width: 100%\">\n                        <span style=\"font-size: 48px\" title=\"No data found\">/</span>\n                        </div>\n                        <!-- /ko -->\n                        <!-- ko if: $parents[2].ReportType()!='Single' -->\n                        No records found\n                        <!-- /ko -->\n                    </td>\n                </tr>\n                <!-- ko foreach: $parent.rows  -->\n                <tr>\n                    <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() && !$parent.CanExpandOption() && $parentContext.$parentContext.$parentContext.$parent.ReportType() != 'Single' -->\n                    <td style=\"width: 30px; vertical-align: middle;\"><a href=\"#\" data-bind=\"click: function(){ toggle(); }\"><span class=\"fa\" data-bind=\"css: {'fa-plus': !isExpanded(), 'fa-minus': isExpanded()}\"></span></a></td>\n                    <!-- /ko -->\n                    <!-- ko template: 'report-column', data: $data -->\n                    <!-- /ko-->\n                </tr>\n                <!-- ko if: isExpanded -->\n                <tr>\n                    <td style=\"width: 30px;\"></td>\n                    <td data-bind=\"attr:{colspan: $parent.Columns.length }\" style=\"padding-left: 0px;\">\n                        <!-- ko if: DrillDownData -->\n                        <table class=\"table table-striped table-hover table-condensed\" data-bind=\"with: DrillDownData\">\n                            <thead>\n                                <tr class=\"no-highlight\">\n                                    <!-- ko template: 'report-column-header', data: $data -->\n                                    <!-- /ko-->\n                                </tr>\n                            </thead>\n                            <tbody>\n                                <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n                                    <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                        No records found\n                                    </td>\n                                </tr>\n                                <!-- ko foreach: Rows  -->\n                                <tr>\n                                    <!-- ko template: 'report-column', data: $data -->\n                                    <!-- /ko-->\n                                </tr>\n                                <!-- /ko -->\n                            </tbody>\n                        </table>\n                        <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                            <div class=\"form-inline small text-muted\">\n                                <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                                    <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                                </div>\n                                <div class=\"pull-left\">\n                                    <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                                </div>\n                                <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                                    <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                                </div>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                    </td>\n                </tr>\n                <!-- /ko -->\n                <!-- /ko -->\n            </tbody>\n            <!-- ko if: $parentContext.$parent.SubTotals().length == 1 && $parentContext.$parentContext.$parent.OuterGroupColumns().length == 0 -->\n            <tfoot data-bind=\"foreach: $parentContext.$parent.SubTotals\">\n                <tr>\n                    <!-- ko if: $parentContext.$parentContext.$parentContext.$parent.canDrilldown() && !$parent.IsDrillDown() -->\n                    <td></td>\n                    <!-- /ko -->\n                    <!-- ko foreach: Items -->\n                    <!-- ko if: Value != 'NA' && Value != 'NaN' && !outerGroup() -->\n                    <td data-bind=\"style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal', 'text-align': $parents[4].pager && $parents[4].ReportType()=='Single' ? 'center' : (fieldAlign ? fieldAlign : (Column.IsNumeric ? 'right' : 'left')), 'font-size':$parents[4].pager && $parents[4].ReportType()=='Single' ? '48px' : ''}\">\n                        <span data-bind=\"html: formattedVal, css: {'right-align': true}\"></span>\n                    </td>\n                    <!-- /ko -->\n                    <!-- /ko -->\n                </tr>\n            </tfoot>\n            <!-- /ko -->\n        </table>\n    </div>\n</script>\n\n<script type=\"text/html\" id=\"report-template\">\n    <div class=\"report-chart\" data-bind=\"attr: {id: 'chart_div_' + $parent.ReportID()}, visible: $parent.isChart\"></div>\n    <!-- ko if: $parent.ReportType() == 'Pivot' -->\n    <div data-bind=\"template: {name: 'report-pivot', data: $data }\"></div>\n    <!-- /ko -->\n\n    <!-- ko if: $parent.ReportType() != 'Pivot' && (!$parent.isChart() || $parent.ShowDataWithGraph()) -->\n    <div class=\"pull-right\" data-bind=\"if: $parent.OuterGroupColumns().length > 0\">\n        <a href=\"#\" data-toggle=\"dropdown\" aria-haspopup=\"false\" aria-expanded=\"false\">\n            Manage Groups <span class=\"fa fa-ellipsis-v\"></span>\n        </a>\n        <ul class=\"dropdown-menu\" style=\"z-index: 1001;\" data-bind=\"foreach: $parent.OuterGroupColumns\">\n            <li class=\"dropdown-item small\">\n                <a href=\"#\" data-bind=\"click: remove\" title=\"Remove from Group\">\n                    <span class=\"fa fa-close\"></span> <span data-bind=\"text: fieldName\"></span>\n                </a>\n            </li>\n        </ul>\n    </div>\n    <div class=\"clear-fix\"></div>\n\n    <div data-bind=\"foreach: outerGroupData\">\n        <!-- ko if: rows.length > 0 || ($parent.outerGroupData && $parent.outerGroupData().length == 1) -->\n        <h6 data-bind=\"html: display\"></h6>\n        <div class=\"\" style=\"padding-top: 5px;\"></div>\n        <div data-bind=\"template: {name: 'report-table', data: $parent.ReportData }\"></div>\n        <!-- /ko -->\n    </div>\n    <!-- /ko -->\n</script>\n<script type=\"text/html\" id=\"admin-mode-template\">\n    <div class=\"row\" style=\"padding: 10px 10px\">\n        <div class=\"material-switch pull-right\">\n            <input id=\"admin-mode\" type=\"checkbox\" data-bind=\"checked: adminMode\" />\n            <label for=\"admin-mode\" class=\"label-primary\"></label>\n        </div>\n        <div class=\"pull-right\">Admin Mode</div>\n    </div>\n\n    <div class=\"alert alert-info\" data-bind=\"visible: adminMode\">\n        <i class=\"fa fa-user-circle\"></i>Admin Mode is turned on now, it allows you to setup and view Reports or Dashboards for all roles and users. You should remove the Admin mode toggle for non-admin users.<br />\n    </div>\n</script>\n<script type=\"text/html\" id=\"manage-access-template\">\n    <h5><span class=\"fa fa-key\"></span>Manage Access</h5>\n    <div class=\"panel panel-default panel-body\" style=\"margin-left: 20px;\">\n\n        <div class=\"form-group row\">\n            <label class=\"col-md-3 col-sm-3 control-label\">Client Id to Restrict Access</label>\n            <div class=\"col-md-3 col-sm-3\">\n                <input class=\"form-control text-box single-line\" type=\"text\" data-bind=\"value: manageAccess.clientId\">\n            </div>\n            <div class=\"col-md-1 col-sm-1\">\n                <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Leave blank to give all clients access (Global Reports)\"></span>\n            </div>\n        </div>\n        <div class=\"alert alert-info\">\n            <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;User level rights over rule Role level rights. No selection for a rule implies report is available to all.\n        </div>\n\n        <div class=\"row small\">\n            <div class=\"col-md-6\">\n                <b>Manage by User</b> (allow edit)\n                <div class=\"row container-fluid\">\n                    <!-- ko foreach: manageAccess.users -->\n                    <div class=\"pull-left\">\n                        <div class=\"checkbox\">\n                            <label class=\"label label-info\">\n                                <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                            </label>\n                        </div>\n                    </div>\n                    <!-- /ko -->\n                    <div data-bind=\"if: manageAccess.users.length == 0\">\n                        Users list not populated or not applicable\n                    </div>\n                </div>\n                <br />\n                <b>View only by User</b> (no edit/delete)\n                <div class=\"row container-fluid\">\n                    <!-- ko foreach: manageAccess.viewOnlyUsers -->\n                    <div class=\"pull-left\">\n                        <div class=\"checkbox\">\n                            <label class=\"label label-info\">\n                                <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                            </label>\n                        </div>\n                    </div>\n                    <!-- /ko -->\n                    <div data-bind=\"if: manageAccess.users.length == 0\">\n                        Users list not populated or not applicable\n                    </div>\n                </div>\n                <br />\n                <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                    <b>Delete by User</b> (allow delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.deleteOnlyUsers -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.users.length == 0\">\n                            Users list not populated or not applicable\n                        </div>\n                    </div>\n                    <br />\n                </div>\n            </div>\n            <div class=\"col-md-6\">\n                <b>Manage by User Role</b> (allow edit)\n                <div class=\"row container-fluid\">\n                    <!-- ko foreach: manageAccess.userRoles -->\n                    <div class=\"pull-left\">\n                        <div class=\"checkbox\">\n                            <label class=\"label label-info\">\n                                <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                            </label>\n                        </div>\n                    </div>\n                    <!-- /ko -->\n                    <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                        User Roles list not populated or not applicable\n                    </div>\n                </div>\n                <br />\n                <b>View only by User Role</b> (no edit/delete)\n                <div class=\"row container-fluid\">\n                    <!-- ko foreach: manageAccess.viewOnlyUserRoles -->\n                    <div class=\"pull-left\">\n                        <div class=\"checkbox\">\n                            <label class=\"label label-info\">\n                                <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                            </label>\n                        </div>\n                    </div>\n                    <!-- /ko -->\n                    <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                        User Roles list not populated or not applicable\n                    </div>\n                </div>\n                <div data-bind=\"ifnot: manageAccess.isDashboard\">\n                    <br />\n                    <b>Delete by User Role</b> (allow delete)\n                    <div class=\"row container-fluid\">\n                        <!-- ko foreach: manageAccess.deleteOnlyUserRoles -->\n                        <div class=\"pull-left\">\n                            <div class=\"checkbox\">\n                                <label class=\"label label-info\">\n                                    <input type=\"checkbox\" data-bind=\"checked: selected\">&nbsp;<span data-bind=\"text: text\"></span>&nbsp;\n                                </label>\n                            </div>\n                        </div>\n                        <!-- /ko -->\n                        <div data-bind=\"if: manageAccess.userRoles.length == 0\">\n                            User Roles list not populated or not applicable\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</script>\n<script type=\"text/html\" id=\"filter-group\">\n    <div class=\"query-builder form-inline\" data-bind=\"foreach: FilterGroups\">\n        <div class=\"rules-group-container\">\n            <div class=\"rules-group-header\">\n                <div data-bind=\"visible: !isRoot\">\n                    <div class=\"pull-left\">\n                        <div class=\"btn-group btn-group-toggle btn-group-sm\" data-toggle=\"buttons\" role=\"group\">\n                        <label class=\"btn btn-primary active\" style=\"margin-right: 0px;\" >\n                            <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'And'\"> And\n                        </label>\n                        <label class=\"btn btn-primary\">\n                            <input type=\"radio\" name=\"andoroption\" data-bind=\"checked: AndOr, checkedValue: 'Or'\"> Or\n                        </label>\n                        </div>\n                    </div>\n                    <div class=\"pull-right\">\n                        <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilterGroup, visible: !isRoot\">Remove Group</button>&nbsp;\n                    </div>\n                </div>\n                <div data-bind=\"visible: isRoot\">\n                    <div class=\"pull-left padded-div\">\n                        <label> &nbsp;Filter Conditions</label>\n                    </div>\n                </div>\n                <div class=\"clearfix\"></div>\n            </div>\n\n            <div class=\"rules-group-body\" data-bind=\"template: {name: 'filter-inner'}\"></div>\n        </div>\n    </div>\n</script>\n<script type=\"text/html\" id=\"fly-filter-template\">\n    <div class=\"card\" data-bind=\"visible: FlyFilters().length>0\">\n        <div class=\"card-header\">\n            <a data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#filter-panel-' + ReportID() }\" href=\"#\">\n                <i class=\"fa fa-filter\"></i> Choose Filters\n            </a>\n        </div>\n        <div data-bind=\"attr: {id: 'filter-panel-' + ReportID() }, css: {collpased: !DontExecuteOnRun(), collapse: !DontExecuteOnRun()}\" class=\"card-body\">\n            <div>\n                <!-- ko foreach: FlyFilters -->\n                <div class=\"row\">\n                    <div class=\"col-sm-5 col-xs-4\">\n                        <div data-bind=\"with: Field\" class=\"checkbox\">\n                            <div class=\"checkbox\">\n                                <label>\n                                    <input type=\"checkbox\" title=\"Apply this filter\" data-bind=\"checked: $parent.Apply\" /> <span data-bind=\"text: selectedFilterName\"></span>\n                                </label>\n                            </div>\n                        </div>\n                    </div>\n                    <div data-bind=\"with: Field\" class=\"col-sm-2 col-xs-3\">\n                        <div class=\"form-group\" data-bind=\"if: $parent.Apply\">\n                            <select class=\"form-control\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                        </div>\n                    </div>\n                    <div data-bind=\"with: Field\" class=\"col-sm-5 col-xs-5\">\n                        <div data-bind=\"if: $parent.Apply\">\n                            <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                        </div>\n                    </div>\n                </div>\n                <!-- /ko -->\n                <button class=\"btn btn-primary\" data-bind=\"click: ExecuteReport\">Run</button>\n            </div>\n        </div>\n    </div>\n</script>\n\n<script type=\"text/html\" id=\"filter-inner\">\n    <div class=\"rules-list\" >\n        <div class=\"rule-container\" data-bind=\"visible: Filters().length>0\">\n        <table class=\"table table-striped table-hover table-borderless\">\n            <thead>\n                <tr>\n                    <th class=\"row\">\n                        <div class=\"col-md-1\"></div>\n                        <div class=\"col-md-4\">Field</div>\n                        <div class=\"col-md-2\"></div>\n                        <div class=\"col-md-4\">Filter</div>\n                        <div class=\"col-md-1\"></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody data-bind=\"foreach: Filters\">\n                <tr class=\"rule-container\">\n                    <td class=\"row\">\n                        <div class=\"col-md-1\">\n                        <select data-bind=\"value: AndOr, visible: $index()>0\" class=\"form-control\">\n                            <option>And</option>\n                            <option>Or</option>\n                        </select>\n                        </div>\n                        <div class=\"col-md-3\">\n                            <div class=\"form-group\">\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"\n                                        options: $parents[$parents.length-2].selectedFieldsCanFilter != undefined \n                                                    ? $parents[$parents.length-2].selectedFieldsCanFilter\n                                                    : $parents[$parents.length-1].selectedFieldsCanFilter,\n                                        optionsText: 'selectedFieldName', \n                                        optionsCaption: 'Please Choose', \n                                        value: Field, \n                                        attr: {required: Field()==null?'required':false}, \n                                        disable: Field() && Field().forced\"></select>\n                                </div>\n                        </div>\n                        <div class=\"col-md-2\">\n                            <div data-bind=\"with: Field\">\n                            <div class=\"form-group\">\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: fieldFilter, value: $parent.Operator\" required></select>\n                            </div>\n                            </div>\n                        </div>\n                        <div class=\"col-md-5\">\n                            <div data-bind=\"with: Field\">\n                                <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                            </div>\n                            <!-- ko if: Field() && Field().fieldType == 'DateTime' && Operator() == 'range' && $index()==0 -->\n                                <!-- ko if: $parents[$parents.length-2].canAddSeries != undefined && $parents[$parents.length-2].canAddSeries() -->\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parents[$parents.length-2].AddSeries.bind($data)\">Add Comparison</button>\n                                <!--/ko -->\n                                <!-- ko if: $parents[$parents.length-2].canAddSeries == undefined && $parentContext.$parent.canAddSeries != undefined && $parentContext.$parent.canAddSeries()-->\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parentContext.$parent.AddSeries.bind($data)\">Add Comparison</button>\n                                <!--/ko -->\n                            <!--/ko -->\n                            <span data-bind=\"visible: Field() && Field().forced\" class=\"badge badge-info\">Required Filter</span>\n                        </div>\n                        <div class=\"col-md-1\">\n                            <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.RemoveFilter, hidden: Field() && Field().forced\">Remove</button>\n                        </div>\n                    </td>\n                </tr>\n                <!-- ko foreach: compareTo -->\n                <tr>\n                    <td class=\"row\">\n                        <div class=\"col-md-6\">&nbsp;</div>\n                        <div class=\"col-md-2\">\n                        <span style=\"text-align: right\"><button class=\"btn btn-xs\" data-bind=\"click: $parents[2].RemoveSeries\"><span class=\"fa fa-trash-o\"></span></button></span>\n                        <span>Compare To</span>\n                        </div>\n                        <div class=\"col-md-4\">\n                            <select class=\"form-control\" data-bind=\"options: Range, value: Value\" required></select>\n                        </div>\n                    </td>\n                </tr>\n                <!-- /ko -->\n            </tbody>\n        </table>\n        </div>\n\n        <div class=\"rule-container\" >\n            <div data-bind=\"template: {name: 'filter-group'}\"></div>\n            <div>\n                <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilterGroup\">Add Group</button>\n                <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddFilter\">Add Filter</button>\n            </div>\n        </div>\n    </div>\n\n</script>\n\n<script type=\"text/html\" id=\"filter-parameters\">\n    <div class=\"table-responsive card\">\n        <div class=\"card-body\">\n            <span data-bind=\"hidden: showParameters\">No filters available to choose</span>\n            <table class=\"table table-striped table-hover table-borderless\" data-bind=\"visible: showParameters\">\n                <thead>\n                    <tr>\n                        <th style=\"width: 30%\">Filter</th>\n                        <th style=\"width: 20%\"></th>\n                        <th style=\"width: 30%\">Value</th>\n                        <th></th>\n                    </tr>\n                </thead>\n                <tbody data-bind=\"foreach: Parameters\">\n                    <tr data-bind=\"ifnot: Hidden\">\n                        <td data-bind=\"text: DisplayName\">\n                        </td>\n                        <td>\n                            <div class=\"form-group\">\n                                <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: operators, value: Operator\" required></select>\n                            </div>\n                        </td>\n                        <td data-bind=\"with: Field\">\n                            <div data-bind=\"template: 'report-filter', data: $data\"></div>\n                        </td>\n                        <td></td>\n                    </tr>\n\n                </tbody>\n            </table>\n        </div>\n    </div>\n</script>\n\n<script type=\"text/html\" id=\"report-schedule\">\n    <div data-bind=\"with: scheduleBuilder\">\n            <div class=\"checkbox\">\n               <label>\n                  <input type=\"checkbox\" data-bind=\"checked: hasSchedule\" />\n                 Schedule Report\n             </label>\n        </div>\n        <div data-bind=\"if: hasSchedule\">\n                <div class=\"form-inline form-group\">\n                   <div class=\"row col-sm-12\">\n                        <span data-bind=\"text: selectedOption() != 'once' ? 'Every ' : ''\"></span>&nbsp;\n                        <select class=\"form-control\" required data-bind=\"options: options, value: selectedOption\"></select>\n                        <div data-bind=\"if: selectedOption() == 'once'\">\n                            &nbsp;on&nbsp;<input data-bind=\"datepicker: selectedDate\" class=\"form-control\" required />\n                        </div>\n                        <div data-bind=\"if: showDays\">\n                           &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Days', allowClear: true }, options: days, selectedOptions: selectedDays\"></select>\n                        </div>\n                        <div data-bind=\"if: showDates\">\n                           &nbsp;on&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Dates', allowClear: true }, options: dates, selectedOptions: selectedDates\"></select>\n                        </div>\n                        <div data-bind=\"if: showMonths\">\n                          &nbsp;of&nbsp;<select multiple class=\"form-control\" required data-bind=\"select2: { placeholder: 'Choose Months', allowClear: true }, options: months, selectedOptions: selectedMonths\"></select>\n                        </div>\n                        <div data-bind=\"if: showAtTime\">\n                            &nbsp;at&nbsp;<select class=\"form-control\" data-bind=\"options: hours, value: selectedHour\"></select>\n                            <select class=\"form-control\" data-bind=\"options: minutes, value: selectedMinute\"></select>\n                            <select class=\"form-control\" data-bind=\"value: selectedAmPm\">\n                                <option>AM</option>\n                                <option>PM</option>\n                            </select>\n                        </div>\n                   </div>\n               </div>\n              <div class=\"alert alert-info\">\n                  Report will be run and emailed <span data-bind=\"text: selectedOption() != 'once' ? 'every' : ''\"></span> <span data-bind=\"text: selectedOption\"></span>\n                 <span data-bind=\"if: selectedOption() == 'once'\">\n                     on <span class=\"error\" data-bind=\"visible: !selectedDate()\">Please pick a Date</span> <span data-bind=\"text: selectedDate\"></span>\n                </span>\n                    <span data-bind=\"if: showDays\">\n                       on <span class=\"error\" data-bind=\"visible: selectedDays().length == 0\">Please pick Day(s)</span> <span data-bind=\"text: selectedDays\"></span>\n                  </span>\n                  <span data-bind=\"if: showDates\">\n                     on <span class=\"error\" data-bind=\"visible: selectedDates().length == 0\">Please pick Date(s)</span>\n                     <span data-bind=\"foreach: selectedDates\"><span data-bind=\"visible: $index()>0\">, </span><span data-bind=\"text: $data == 1 ? '1st': ($data == 2 ? '2nd' : ($data == 3 ? '3rd' : $data+'th'))\"></span></span>\n                </span>\n                <span data-bind=\"if: showMonths\">\n                        of <span class=\"error\" data-bind=\"visible: selectedMonths().length == 0\">Please pick Month(s)</span> <span data-bind=\"text: selectedMonths\"></span>\n                   </span>\n                  <span data-bind=\"if: showAtTime\">\n                     at <span data-bind=\"text: selectedHour\"></span>:<span data-bind=\"text: selectedMinute\"></span> <span data-bind=\"text: selectedAmPm\"></span>\n                 </span>\n            </div>\n            <div class=\"form-horizontal form-group\">\n                    <div class=\"form-group row\">\n                       <label class=\"col-sm-2 control-label\">Email to</label>\n                       <div class=\"col-sm-6\">\n                          <input type=\"text\" class=\"form-control\" style=\"width: 100%;\" data-bind=\"value: emailTo\" placeholder=\"Enter Email Addresses separated by comma to send the Report to\" required />\n                      </div>\n                     <label class=\"col-sm-2 control-label\">Report Format</label>\n                     <div class=\"col-sm-2\">\n                        <select class=\"form-control\" data-bind=\"value: format\">\n                            <option value=\"EXCEL\">Excel</option>\n                                <option value=\"CSV\">CSV</option>\n                               <option value=\"PDF\">PDF</option>\n                           </select>\n                      </div>\n                 </div>\n            </div>\n            <div class=\"form-horizontal form-group\">\n                    <div class=\"form-group row\">\n                       <div class=\"col-sm-4 control-label\">\n                           <div class=\"checkbox\">\n                              <label title=\"Set a date to start sending scheduled report\">\n                                  <input type=\"checkbox\" data-bind=\"checked: hasScheduleStart\" />\n                                 Set Schedule Start Date\n                            </label>\n                            </div>\n                       </div>\n                       <div class=\"col-sm-4\" data-bind=\"if: hasScheduleStart\">\n                          <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleStart\" title=\"Scheduled Report will not be sent before this date\" required />\n                      </div>\n                 </div>\n             </div>\n\n            <div class=\"form-horizontal form-group\">\n                    <div class=\"form-group row\">\n                       <div class=\"col-sm-4 control-label\">\n                          <div class=\"checkbox\" title=\"Set a date to stop sending scheduled report\">\n                              <label>\n                                 <input type=\"checkbox\" data-bind=\"checked: hasScheduleEnd\" />\n                                 Set Schedule End Date\n                            </label>\n                        </div>\n                        </div>\n                       <div class=\"col-sm-4\" data-bind=\"if: hasScheduleEnd\">\n                           <input type=\"text\" class=\"form-control\" data-bind=\"datepicker: scheduleEnd\" title=\"Scheduled Report will not be sent after this date\" required />\n                      </div>\n                  </div>\n             </div>\n         </div>\n    </div>\n</script>\n\n<script type=\"text/html\" id=\"report-field-options\">\n    <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n        <div class=\"modal-content\" data-bind=\"with: editFieldOptions\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\"><span data-bind=\"text: fieldName\"></span> - Setup Additional Field Options</h5>\n            </div>\n            <div class=\"modal-body needs-validation\">\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Pick Data Format</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <select class=\"form-control\" required data-bind=\"options: $parent.fieldFormatTypes, value: fieldFormat\"></select>\n                    </div>\n                </div>\n                <div class=\"form-group row\" data-bind=\"visible: $parent.decimalFormatTypes.indexOf($data.fieldFormat())>=0\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Pick Decimal Places</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <input type=\"number\" class=\"form-control\" data-bind=\"value: decimalPlaces\" placeholder=\"\" />\n                    </div>\n                </div>\n                  <div class=\"form-group row\" data-bind=\"visible: $parent.dateFormatTypes.indexOf($data.fieldFormat())>=0\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Pick Date Format</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <select class=\"form-control\" required data-bind=\"options: $parent.dateFormats, value: dateFormat\"></select>\n                    </div>\n                </div>\n                   <div class=\"form-group row\" data-bind=\"visible: dateFormat()==='Custom'\">\n                     <label class=\"col-sm-5 col-md-5 control-label\">Enter Custom Date Format</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <input type=\"text\" class=\"form-control\" data-bind=\"value: customDateFormat\" placeholder=\"dd/mm/yyyy\" />\n                    </div>\n                 </div>\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Choose Column Label</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldLabel\" />\n                    </div>\n                </div>\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Choose Text Alignment</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <select class=\"form-control\" required data-bind=\"options: $parent.fieldAlignments, value: fieldAlign\"></select>\n                    </div>\n                </div>\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Text Color</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                        <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerFontColor\" />\n                        <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderFontColor(!applyAllHeaderFontColor()); }\">\n                            <span class=\"fa\" data-bind=\"css: applyAllHeaderFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Pick Header Background Color</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                        <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" required data-bind=\"value: headerBackColor\" />\n                        <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBackColor(!applyAllHeaderBackColor()); }\">\n                            <span class=\"fa\" data-bind=\"css: applyAllHeaderBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Pick Text Color</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: fontColor\" />\n                        <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: fontColor\" />\n                        <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllFontColor(!applyAllFontColor()); }\">\n                            <span class=\"fa\" data-bind=\"css: applyAllFontColor() ? 'fa-check' : 'fa-paste'\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Pick Background Color</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <input type=\"color\" style=\"width: 50px\" class=\"form-control pull-left\" required data-bind=\"value: backColor\" />\n                        <input type=\"text\" style=\"width: 100px\" class=\"form-control pull-left\" data-bind=\"value: backColor\" />\n                        <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBackColor(!applyAllBackColor()); }\">\n                            <span class=\"fa\" data-bind=\"css: applyAllBackColor() ? 'fa-check' : 'fa-paste'\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">Choose Width (leave blank for auto)</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <input type=\"text\" class=\"form-control\" required data-bind=\"value: fieldWidth\" />\n                    </div>\n                </div>\n                <div class=\"form-group row\">\n                    <div class=\"col-sm-12\">\n                        <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: headerFontBold\" />\n                                Make Header Text Bold\n                            </label>\n                        </div>\n                        <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllHeaderBold(!applyAllHeaderBold()); }\">\n                            <span class=\"fa\" data-bind=\"css: applyAllHeaderBold() ? 'fa-check' : 'fa-paste'\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"form-group row\">\n                    <div class=\"col-sm-12\">\n                        <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: fontBold\" />\n                                Make Text Bold\n                            </label>\n                        </div>\n                        <button class=\"btn btn-sm pull-left\" title=\"Apply to all columns\" data-bind=\"click: function(){applyAllBold(!applyAllBold()); }\">\n                            <span class=\"fa\" data-bind=\"css: applyAllBold() ? 'fa-check' : 'fa-paste'\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"form-group row\" data-bind=\"if: $parent.useStoredProc() || $parent.ReportType() == 'List'\">\n                    <div class=\"col-sm-12\">\n                        <div class=\"checkbox pull-left\" style=\"padding-top: 5px;\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: checkOuterGroup\" />\n                                Outer Group\n                            </label>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: cancelFieldOptions\">Cancel</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveFieldOptions\">Save Changes</button>\n            </div>\n        </div>\n    </div>\n</script>\n\n<script type=\"text/html\" id=\"report-link-edit\">\n    <div class=\"modal-dialog\" style=\"max-width: 750px;\">\n        <div class=\"modal-content\" data-bind=\"with: editLinkField\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\">Setup Link Field</h5>\n            </div>\n            <div class=\"modal-body needs-validation\" data-bind=\"with: linkFieldItem\">\n                <div class=\"form-group row\">\n                    <label class=\"col-sm-5 col-md-5 control-label\">This field will link to</label>\n                    <div class=\"col-sm-7 col-md-7\">\n                        <select class=\"form-control\" required data-bind=\"options: linkTypes, value: selectedLinkType\"></select>\n                    </div>\n                </div>\n                <div data-bind=\"if: LinksToReport\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: $parentContext.$parent.SavedReports, optionsText: 'reportName', optionsValue: 'reportId', value: LinkedToReportId, optionsCaption: 'Choose the Report to link to'\"></select>\n                        </div>\n                    </div>\n                    <div class=\"checkbox\" data-bind=\"if: LinkedToReportId\">\n                        <label>\n                            <input type=\"checkbox\" data-bind=\"checked: SendAsFilterParameter\" />\n                            Send field value as Report Filter Parameter\n                        </label>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"if: SendAsFilterParameter\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Link to this Report Filter</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <select class=\"form-control\" required data-bind=\"options: allFields, optionsText: 'fieldName', optionsValue: 'fieldId', value: SelectedFilterId, optionsCaption: 'Choose the Field to Filter by value'\"></select>\n                        </div>\n                    </div>\n                </div>\n                <div data-bind=\"ifnot: LinksToReport\">\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Link to this URL</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required placeholder=\"Enter a url to open\" data-bind=\"value: LinkToUrl\" title=\"Valid URL needs to start with http:// or https://\">\n                        </div>\n                    </div>\n                    <div class=\"checkbox\">\n                        <label>\n                            <input type=\"checkbox\" data-bind=\"checked: SendAsQueryParameter\" />\n                            Send field value as Query Parameter\n                        </label>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"if: SendAsQueryParameter\">\n                        <label class=\"col-sm-5 col-md-5 control-label\">Parameter Name to use</label>\n                        <div class=\"col-sm-7 col-md-7\">\n                            <input type=\"text\" class=\"form-control\" required placeholder=\"Enter parameter name to send value as\" data-bind=\"value: QueryParameterName\">\n                        </div>\n                    </div>\n                    <br />\n                </div>\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-danger\" data-bind=\"click: removeLinkField\">Remove Link</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: saveLinkField\">Save Changes</button>\n            </div>\n        </div>\n    </div>\n</script>\n\n<script type=\"text/html\" id=\"report-designer\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\" id=\"myModalLabel\">\n                    <a title=\"Need help setting up a report?\" target=\"_blank\" href=\"https://dotnetreport.com/blogs/docs/designing-reports\">\n                        <span class=\"fa fa-question-circle\"></span>\n                    </a>Design your Report\n                </h5>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\n            </div>\n            <div class=\"modal-body needs-validation\">\n                <div class=\"card card-body\">\n                    <h5><span class=\"fa fa-file\"></span>&nbsp;Choose Report Type</h5>\n                    <div class=\"row\">\n                        <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('List'); }, css: {active: ReportType()=='List'}\">\n                                <span class=\"fa fa-2x fa-list-alt\"></span>\n                                <p>List</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Summary'); }, css: {active: ReportType()=='Summary'}\">\n                                <span class=\"fa fa-2x fa-table\"></span>\n                                <p>Summary</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Bar'); }, css: {active: ReportType()=='Bar'}\">\n                                <span class=\"fa fa-2x fa-bar-chart\"></span>\n                                <p>Bar</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pie'); }, css: {active: ReportType()=='Pie'}\">\n                                <span class=\"fa fa-2x fa-pie-chart\"></span>\n                                <p>Pie</p>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Line'); }, css: {active: ReportType()=='Line'}\">\n                                <span class=\"fa fa-2x fa-line-chart\"></span>\n                                <p>Line</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Map'); }, css: {active: ReportType().indexOf('Map')==0}\">\n                                <span class=\"fa fa-2x fa-globe\"></span>\n                                <p>Map</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Single'); }, css: {active: ReportType()=='Single'}\">\n                                <span class=\"fa fa-2x fa-window-maximize\"></span>\n                                <p>Widget</p>\n                            </div>\n                        </div>\n                        <div class=\"col-md-2 col-sm-4 col-xs-6\">\n                            <div class=\"button-box\" tabindex=\"0\" data-bind=\"click: function(){ setReportType('Pivot'); }, css: {active: ReportType()=='Pivot'}\">\n                                <span class=\"fa fa-2x fa-random\"></span>\n                                <p>Transpose</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <br />\n                <div class=\"card card-body\">\n                    <h5 class=\"pull-left\"><span class=\"fa fa-database\"></span>&nbsp;Choose Data for Report</h5>\n                    <div class=\"pull-right\" role=\"group\" data-bind=\"if: ReportID() <= 0\">\n                        <label class=\"btn btn-sm btn-primary active\" style=\"margin-right: 0px;\" title=\"You can change the Data source only when creating a new report, changing this will clear all selections\">\n                            <input type=\"radio\" name=\"dataoption\" id=\"table\" checked data-bind=\"checked: useStoredProc, checkedValue: false\"> Dynamic\n                        </label>\n                        <label class=\"btn btn-sm btn-primary\">\n                            <input type=\"radio\" name=\"dataoption\" id=\"proc\" value=\"1\" data-bind=\"checked: useStoredProc, checkedValue: true\"> Predefined\n                        </label>\n                    </div>\n                    <div class=\"clearfix\"></div>\n                    <div class=\"row\">\n                        <div class=\"col-md-6\">\n                            <select class=\"form-control\" data-bind=\"options: Procs, optionsCaption: 'Choose Section...', optionsText: 'DisplayName', value: SelectedProc, disable: isFormulaField, visible: useStoredProc\"></select>\n                            <select class=\"form-control\" data-bind=\"options: Tables, optionsCaption: 'Choose Section...', optionsText: 'tableName', value: SelectedTable, disable: isFormulaField, hidden: useStoredProc\"></select>\n                        </div>\n\n                        <div class=\"col-md-6\" data-bind=\"disable: isFormulaField, hidden: useStoredProc\">\n                            <div data-bind=\"with: textQuery.searchFields\">\n                                <select id=\"search-field\" class=\"form-control\" data-bind=\"select2: {placeholder: 'Or Search for a Data Field...', ajax: { url: url, dataType: 'json', data: query, processResults: processResults, headers: headers }, minimumInputLength: 2, allowClear: true }, value: selectedOption\"></select>\n                            </div>\n                        </div>\n\n                        <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0\">\n                            <div class=\"small pull-left\">\n                                Check the fields you would like to use in the Report\n                            </div>\n                            <div class=\"pull-right btn-toolbar\">\n                                <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n\n                                <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: MoveAllFields, visible: !isFormulaField()\">Select all</a>\n                                <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: RemoveSelectedFields, visible: !isFormulaField()\">Remove all</a>\n                            </div>\n                        </div>\n                        <div class=\"row container-fluid\" data-bind=\"foreach: ChooseFields\">\n                            <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                <div class=\"list-group-item\">\n                                    <div class=\"checkbox\">\n                                        <label>\n                                            <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.isFormulaField() ? $parent.formulaFields : $parent.SelectedFields, value: $data}\">\n                                            <span data-bind=\"text: fieldName\"></span>\n                                        </label>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div data-bind=\"if: lastPickedField() && lastPickedField().fieldType == 'Json'\">\n                        <br />\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h6>Select Data Fields from <span data-bind=\"text: lastPickedField().fieldName\"></span></h6>\n                            </div>\n                            <div class=\"card-body\">\n                                <div class=\"row container-fluid\" data-bind=\"foreach: jsonFields\">\n                                    <div class=\"col-md-3 col-sm-4 col-xs-6\">\n                                        <div class=\"list-group-item\">\n                                            <div class=\"checkbox\">\n                                                <label>\n                                                    <input type=\"checkbox\" data-bind=\"checkedInArray: {array: $parent.SelectedFields, value: $data}\">\n                                                    <span data-bind=\"text: jsonColumnName\"></span>\n                                                </label>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div data-bind=\"if: isFormulaField\" id=\"custom-field-design\">\n                        <br />\n                        <br />\n                        <div class=\"card\">\n                            <div class=\"card-body\">\n                                <div class=\"row\">\n                                    <div class=\"col-md-12 pull-right\">\n                                        <a href=\"#\" class=\"btn btn-primary btn-sm\" title=\"Save Custom Formula Field\" data-bind=\"click: saveFormulaField, visible: isFormulaField\">Save</a>\n                                        <a href=\"#\" class=\"btn btn-sm\" title=\"Custom Field using Formula\" data-bind=\"click: function(){isFormulaField(!isFormulaField())}, text: isFormulaField()? 'Cancel': 'Customize', css: {'btn-primary': !isFormulaField(), 'btn-danger': isFormulaField}\"></a>\n\n                                    </div>\n                                    <div class=\"col-md-12 padded-div\" data-bind=\"visible: ChooseFields().length>0 && isFormulaField()\">\n                                        <div class=\"alert alert-info\">\n                                            You are now creating a Customized Field. Check Fields you want to use in the calculation, then choose the operations you want to perform, and click \"Save\" on the right above to add your Custom field.\n                                            Please note that Custom Field must be chosen in within the same Section and their data types must match.\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"row\">\n                                    <div class=\"col-sm-6 small\">\n                                        Setup your Formula for calculating this Field\n                                    </div>\n                                    <div class=\"col-sm-6 right-align\">\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: addFormulaParentheses\">Add ( )</a>\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" title=\"Add a Constant Value\" data-bind=\"click: addFormulaConstantValue\">Add Value</a>\n                                        <a href=\"#\" class=\"btn btn-secondary btn-sm\" data-bind=\"click: clearFormulaField\">Clear</a>\n                                    </div>\n                                </div>\n                                <div class=\"form-group-row\" data-bind=\"if: formulaOnlyHasDateFields\">\n                                    <div class=\"col-sm-12\">\n                                        <div class=\"alert alert-info\">\n                                            For Dates Field calculation, you can only substract date fields and display the result as days, hours, minutes or seconds.\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Field Label</label>\n                                    <div class=\"col-sm-10\">\n                                        <input type=\"text\" class=\"form-control form-control-sm\" data-bind=\"value: formulaFieldLabel\" required placeholder=\"Custom Field Label\" />\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Data Format</label>\n                                    <div class=\"col-sm-10\">\n                                        <select class=\"form-control form-control-sm\" data-bind=\"value: formulaDataFormat\" required>\n                                            <!-- ko ifnot: formulaOnlyHasDateFields -->\n                                            <option>String</option>\n                                            <option>Integer</option>\n                                            <option>Decimal</option>\n                                            <option>Currency</option>\n                                            <!-- /ko -->\n                                            <!-- ko if: formulaOnlyHasDateFields -->\n                                            <option>Days</option>\n                                            <option>Hours</option>\n                                            <option>Minutes</option>\n                                            <option>Seconds</option>\n                                            <!-- /ko -->\n                                        </select>\n                                    </div>\n                                </div>\n                                <div class=\"form-group row\" data-bind=\"visible: formulaDataFormat() == 'Decimal' || formulaDataFormat() == 'Currency'\">\n                                    <label class=\"col-sm-2 control-label\">Round to Decimal Places</label>\n                                    <div class=\"col-sm-10\">\n                                        <input type=\"number\" class=\"form-control\" data-bind=\"value: formulaDecimalPlaces\" placeholder=\"Choose Decimal places (leave blank to not use rounding)\" title=\"Choose Decimal places (leave blank to not use rounding)\" />\n                                    </div>\n                                </div>\n\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Field Formula</label>\n                                    <div class=\"col-sm-10\">\n                                        <div data-bind=\"foreach: formulaFields\">\n                                            <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesStart\" style=\"margin-top: 0;\">(</h3>\n                                            <div data-bind=\"if: !setupFormula.isParenthesesStart() && !setupFormula.isParenthesesEnd()\">\n                                                <div class=\"list-group-item pull-left\" style=\"margin-left: 15px; padding: 5px 15px\">\n                                                    <span data-bind=\"text: fieldName, visible: !setupFormula.isConstantValue()\"></span>\n                                                    <div data-bind=\"if: setupFormula.isConstantValue\">\n                                                        <input data-bind=\"value: setupFormula.constantValue\" class=\"form-control form-control-sm\" required />\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <h3 class=\"pull-left\" data-bind=\"visible: setupFormula.isParenthesesEnd\" style=\"margin-top: 0;\">)</h3>\n                                            <div class=\"pull-left\" style=\"margin-left: 15px;\" data-bind=\"visible: $parent.showFormulaOperation($index())\">\n                                                <select class=\"form-control form-control-sm\" style=\"max-width: 50px;\" data-bind=\"value: setupFormula.formulaOperation\">\n                                                    <!-- ko if: !$parent.formulaOnlyHasDateFields() || ($parent.formulaOnlyHasDateFields() && $parent.isConstantOperation($index())) -->\n                                                    <option>+</option>\n                                                    <!-- /ko -->\n                                                    <option>-</option>\n                                                    <!-- ko if: ['Integer','Money','Float','Double','Decimal','Currency'].indexOf($parent.formulaDataFormat()) != -1 -->\n                                                    <option>*</option>\n                                                    <option>/</option>\n                                                    <!-- /ko -->\n                                                </select>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"clearfix\"></div>\n                    </div>\n                    <div data-bind=\"if: SelectedFields().length>0\">\n                        <hr />\n                        <h5><span class=\"fa fa-table\"></span>&nbsp;Selected data for the Report</h5>\n                        <div>\n                            <div data-bind=\"visible: ReportType()=='Bar'\" class=\"card card-body\" style=\"margin-bottom: 15px\">\n                                <div class=\"alert alert-info\">\n                                    <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Bar Graph, the first field below will show on the x-axis. All other fields will show on y-axis, but they must be numeric.\n                                </div>\n                                <div class=\"form-group row\">\n                                    <div class=\"checkbox col-6\">\n                                        <label>\n                                            <input type=\"checkbox\" data-bind=\"checked: barChartHorizontal\" />\n                                            Horizontal Bar Chart\n                                        </label>\n                                    </div>\n                                    <div class=\"checkbox col-6\">\n                                        <label>\n                                            <input type=\"checkbox\" data-bind=\"checked: barChartStacked\" />\n                                            Stacked Bar Chart\n                                        </label>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Line'\">\n                                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Line Graph, the first field below will show on the x-axis and it needs to be numeric.\n                            </div>\n                            <div class=\"alert alert-info\" data-bind=\"visible: ReportType()=='Pivot'\">\n                                <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Transpose, the first field below will be used to Pivot/Transpose the rows as columns, and it must be grouped.\n                            </div>\n                            <div data-bind=\"visible: ReportType()=='Map'\" class=\"card card-body\" style=\"margin-bottom: 15px\">\n                                <div class=\"alert alert-info\">\n                                    <span class=\"fa fa-lightbulb-o fa-2x\"></span>&nbsp;For Map Graph, the first field below has to be a Region, like a Country.\n                                </div>\n                                <div class=\"form-group row\">\n                                    <label class=\"col-sm-2 control-label\">Map Display</label>\n                                    <div class=\"col-sm-4\">\n                                        <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.mapRegions, value: mapRegion\"></select>\n                                    </div>\n                                </div>\n                            </div>\n                            <ul class=\"list-group\" data-bind=\"sortable: { data: SelectedFields, options: { handle: '.sortable', cursor: 'move', placeholder: 'drop-highlight' }, strategyMove: true }\">\n                                <li class=\"list-group-item\">\n                                    <div class=\"row\">\n                                        <div class=\"col\">\n                                            <span class=\"fa fa-columns\"></span>\n                                            <span data-bind=\"text: selectedFieldName\"></span>\n                                            <span data-bind=\"text: isFormulaField() ? '(' + fieldFormat() + ')' : ''\"></span>\n                                            <span data-bind=\"visible: !$parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())\">\n                                                <span class=\"badge badge-danger\" data-bind=\"visible: !groupInGraph()\">Will not show in <span data-bind=\"text: $parent.ReportType\"></span>Chart</span>\n                                            </span>\n                                        </div>\n                                        <div class=\"col\">\n                                            <div class=\"pull-right\" style=\"margin-top: -5px;\" data-bind=\"if: $parent.AggregateReport() && !$parent.useStoredProc()\">\n                                                <select class=\"form-control form-control-sm\" data-bind=\"options: $parent.canDrilldown() && $index()>0 ? fieldAggregateWithDrilldown : fieldAggregate, value: selectedAggregate\"></select>\n                                            </div>\n                                            <div class=\"sortable pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"fa fa-arrows \" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"fa fa-trash-o\" title=\"Cannot Delete Required Filter\" data-bind=\"visible: forceFilterForTable\"></span>\n                                                <span class=\"fa fa-trash\" style=\"cursor: pointer;\" aria-hidden=\"true\" title=\"Delete this Field\" data-bind=\"click: $parent.RemoveField, hidden: forceFilterForTable\"></span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"ifnot: $parent.useStoredProc\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ filterOnFly(!filterOnFly()); }, css: {active: filterOnFly()==true}\">\n                                                    <span class=\"fa fa-filter\" aria-hidden=\"true\" title=\"Filter by this field on the Report\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: toggleDisable, css: {active: disabled()==true}\">\n                                                    <span class=\"fa fa-close\" aria-hidden=\"true\" title=\"Do not include in Report\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot' && $parent.ReportType()!='List' && !$parent.useStoredProc()\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ hideInDetail(!hideInDetail()); }, css: {active: hideInDetail()==true}\">\n                                                    <span class=\"fa fa-eye-slash\" aria-hidden=\"true\" title=\"Hide in Details\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.isFieldValidForYAxis($index(), fieldType, selectedAggregate())  && $parent.isChart() && $index()>0\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ groupInGraph(!groupInGraph()); }, css: {active: groupInGraph()==false}\">\n                                                    <span class=\"fa fa-line-chart\" aria-hidden=\"true\" title=\"Include in series\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.IncludeSubTotal()  &&  (['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldType) >= 0 || ['Int', 'Double', 'Money', 'Decimal', 'Currency'].indexOf(fieldFormat()) >= 0)\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: function(){ dontSubTotal(!dontSubTotal()); }, css: {active: dontSubTotal()==true}\">\n                                                    <span class=\"fa fa-plus-circle\" aria-hidden=\"true\" title=\"Don't add to Total row\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"visible: $parent.ReportType()!='Pivot'\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupLinkField, css: {active: linkField()==true}\">\n                                                    <span class=\"fa fa-link\" aria-hidden=\"true\" title=\"Link to another Report or Url\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: setupFieldOptions\">\n                                                    <span class=\"fa fa-gear\" aria-hidden=\"true\" title=\"More Options\"></span>\n                                                </span>\n                                            </div>\n                                            <div class=\"pull-right\" style=\"padding-right: 15px;\" data-bind=\"if: isFormulaField\">\n                                                <span class=\"button-box no-padding\" tabindex=\"0\" data-bind=\"click: editFormulaField\">\n                                                    <span class=\"fa fa-pencil\" aria-hidden=\"true\" title=\"Edit Formula Field\"></span>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n                <br />\n                <div class=\"card card-body\">\n                    <h5><span class=\"fa fa-filter\"></span>&nbsp;Choose filters</h5>\n\n                    <div class=\"row\" style=\"padding: 10px 10px; overflow-x: auto;\">\n                        <div data-bind=\"if: useStoredProc\" class=\"col-md-12\">\n                            <div data-bind=\"template: {name: 'filter-parameters'}\"></div>\n                        </div>\n                        <div data-bind=\"ifnot: useStoredProc\" class=\"col-md-12\">\n                            <div data-bind=\"template: {name: 'filter-group'}\"></div>\n                        </div>\n\n                        <div class=\"checkbox col-12\">\n                            <label>\n                                <input type=\"checkbox\" data-bind=\"checked: EditFiltersOnReport\" />\n                                Allow setting up and saving filters on Report\n                            </label>\n                        </div>\n                        <br />\n                    </div>\n                </div>\n                <br />\n                <div data-bind=\"visible: SaveReport\" class=\"card card-body\">\n                    <h5><span class=\"fa fa-hourglass\"></span>&nbsp;Choose Schedule</h5>\n\n                    <div style=\"padding: 10px 10px\" data-bind=\"if: SaveReport\">\n                        <div data-bind=\"template: {name: 'report-schedule'}\"></div>\n                    </div>\n                </div>\n                <br />\n                <div class=\"card card-body\">\n                    <div class=\"form-group row\" data-bind=\"if: SaveReport\">\n                        <label class=\"col-sm-2 control-label\">Report Name</label>\n                        <div class=\"col-sm-10\">\n                            <input type=\"text\" style=\"width: 100%;\" class=\"form-control\" required placeholder=\"Report Name\" data-bind=\"value: ReportName\">\n                        </div>\n                    </div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-2 control-label\">Report Description</label>\n                        <div class=\"col-sm-10\">\n                            <textarea class=\"form-control\" style=\"width: 100%;\" rows=\"3\" placeholder=\"Optional Report Description\" data-bind=\"value: ReportDescription\"></textarea>\n                        </div>\n                    </div>\n                    <div data-bind=\"ifnot: useStoredProc\">\n                        <div class=\"form-group row\">\n                            <label class=\"col-sm-2 control-label\">Sort By</label>\n                            <div class=\"col-sm-6\">\n                                <select class=\"form-control\" required data-bind=\"options: SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: SortByField\"></select>\n                            </div>\n                            <div class=\"col-sm-2\">\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !SortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { SortDesc(!SortDesc()); return false; }\"></button>\n                            </div>\n                            <div class=\"col-sm-2\">\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: addSortField\">Add Sort Field</button>\n                            </div>\n                        </div>\n                        <div data-bind=\"foreach: SortFields\">\n                            <div class=\"form-group row\">\n                                <label class=\"col-sm-2 control-label\">&nbsp;&nbsp;Then Sort By</label>\n                                <div class=\"col-sm-4\">\n                                    <select class=\"form-control\" required data-bind=\"options: $parent.SelectedFields, optionsText: 'selectedFieldName', optionsValue: 'fieldId', value: sortByFieldId\"></select>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: remove\">Remove Sort Field</button>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"text: !sortDesc() ? '\u25B2 Sort Ascending' : 'Sort Descending \u25BC', click: function() { sortDesc(!sortDesc()); return false; }\"></button>\n                                </div>\n                                <div class=\"col-sm-2\">\n                                    <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: $parent.addSortField\">Add Sort Field</button>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"checkbox\" data-bind=\"visible: isChart\">\n                        <label>\n                            <input type=\"checkbox\" data-bind=\"checked: ShowDataWithGraph\" />\n                            Show Data along with Graph\n                        </label>\n                    </div>\n                    <div class=\"checkbox\" data-bind=\"visible: CanSaveReports()\">\n                        <label>\n                            <input type=\"checkbox\" data-bind=\"checked: SaveReport\">\n                            Save Report\n                        </label>\n                    </div>\n                    <div class=\"form-group row\" data-bind=\"visible: SaveReport\">\n                        <label class=\"col-sm-2 control-label\">Choose Folder</label>\n                        <div class=\"col-sm-10\">\n                            <select class=\"form-control\" style=\"width: 100%;\" data-bind=\"options: Folders, optionsText: 'FolderName', optionsValue: 'Id', value: FolderID\"></select>\n                        </div>\n                    </div>\n                </div>\n                <br />\n                <div data-bind=\"ifnot: useStoredProc\" class=\"card card-body\">\n                    <div class=\"row\">\n                        <div class=\"col-md-6\">\n                            <h5><span class=\"fa fa-gear\"></span>&nbsp;Other Settings</h5>\n                            <div class=\"checkbox\" data-bind=\"visible: ReportType()!='Pivot'\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: IncludeSubTotal\" />\n                                    Include Total Row\n                                </label>\n                            </div>\n                            <div class=\"checkbox\" data-bind=\"hidden: AggregateReport\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: ShowUniqueRecords\" />\n                                    Show only Unique Records\n                                </label>\n                            </div>\n                            <div class=\"checkbox\" data-bind=\"visible: ReportType()!='List'\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: ShowExpandOption\" />\n                                    Don't Show Expand Option\n                                </label>\n                            </div>\n                            <div class=\"checkbox\">\n                                <label>\n                                    <input type=\"checkbox\" data-bind=\"checked: DontExecuteOnRun\" />\n                                    Wait to Select Filters before Running Report\n                                </label>\n                            </div>\n                            <div class=\"form-group row\">\n                                <div class=\"checkbox col-md-4\">\n                                    <label>\n                                        <input type=\"checkbox\" data-bind=\"checked: maxRecords\" />\n                                        Max Records\n                                    </label>\n                                </div>\n                                <div class=\"col-md-6\" data-bind=\"if: maxRecords\">\n                                    <input type=\"number\" style=\"width: 150px;\" class=\"form-control\" required placeholder=\"Only top n...\" data-bind=\"value: OnlyTop, visible: maxRecords\">\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"col-md-6\">\n                            <h5><span class=\"fa fa-paint-brush\"></span>&nbsp;Pick Report Format</h5>\n                            <div>\n                                <!-- ko foreach: tableStyles -->\n                                <div class=\"dropdown-option\" data-bind=\"title: $data.name, click: $parent.selectStyle, css: {'dropdown-option-selected': $parent.selectedStyle() == $data.colorscheme}\">\n                                    <div class=\"mini-table-preview\" data-bind=\"foreach: new Array(5)\">\n                                        <div class=\"mini-table-row\" data-bind=\"foreach: new Array(5)\">\n                                            <div class=\"mini-table-cell\" data-bind=\"style: { backgroundColor: $parentContext.$index() === 0 ? $parents[1].headerBg : ($parentContext.$index() % 2 === 0 ? $parents[1].altRowBg : $parents[1].rowBg), color: $parents[1].textColor }\"></div>\n\n                                        </div>\n                                    </div>\n                                </div>\n                                <!-- /ko -->\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <br />\n                <div data-bind=\"visible: adminMode\" class=\"card card-body\">\n                    <div data-bind=\"template: {name: 'manage-access-template'}\"></div>\n                </div>\n            </div>\n            <div class=\"modal-footer\">\n                <a href=\"#\" class=\"btn btn-danger\" data-bind=\"click: cancelCreateReport\">Cancel editing Report</a>\n                <button class=\"btn btn-primary\" type=\"button\" data-bind=\"visible: SaveReport() && CanSaveReports(), click: SaveWithoutRun\" style=\"padding-right: 10px;\">Save Report</button>\n                <button class=\"btn btn-primary\" type=\"button\" data-bind=\"text: SaveReport() && CanSaveReports()? 'Save & Run Report': 'Run Report', click: RunReport\">Run Report</button>\n            </div>\n        </div>\n    </div>\n</script>\n\n<div class=\"modal\" id=\"drilldownModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n    <div class=\"modal-dialog modal-lg\">\n        <div class=\"modal-content\" data-bind=\"with: ChartDrillDownData\">\n            <div class=\"modal-header\">\n                <h4 class=\"modal-title\">Drilldown Data</h4>\n                <button type=\"button\" class=\"close pull-right\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n            </div>\n            <!-- ko if: DrillDownData -->\n            <div class=\"modal-body\">\n                <table class=\"table table-striped table-hover table-condensed\" data-bind=\"with: DrillDownData, attr: {class: 'table table-striped table-hover table-condensed ' + $parent.selectedStyle()}\">\n                    <thead>\n                        <tr class=\"no-highlight\">\n                            <!-- ko foreach: Columns -->\n                            <th data-bind=\"attr: { id: fieldId }, css: {'right-align': IsNumeric}, style: {'width': fieldWidth, 'background-color': headerBackColor }, hidden: outerGroup\" style=\"border-right: 1px solid;\">\n                                <span data-bind=\"text: fieldLabel() ? fieldLabel() : fieldName, style: {'color': headerFontColor, 'font-weight': headerFontBold() ? 'bold' : 'normal'}\"></span>\n                               \n                            </th>\n                            <!-- /ko -->\n                        </tr>\n                    </thead>\n                    <tbody>\n                        <tr style=\"display: none;\" data-bind=\"visible: Rows && Rows.length < 1\">\n                            <td class=\"text-info\" data-bind=\"attr:{colspan: Columns.length}\">\n                                No records found\n                            </td>\n                        </tr>\n                        <!-- ko foreach: Rows  -->\n                        <tr>\n                            <!-- ko foreach: Items -->\n                            <td data-bind=\"hidden: outerGroup, style: {'background-color': backColor, 'color': fontColor, 'font-weight': fontBold() ? 'bold' : 'normal' }\">\n                                <div data-bind=\"style: {'width': fieldWidth }\">\n                                    <!-- ko if: LinkTo-->\n                                    <a data-bind=\"attr: {href: LinkTo}\" target=\"_blank\"><span data-bind=\"html: formattedVal\"></span></a>\n                                    <!-- /ko-->\n                                    <!-- ko ifnot: LinkTo-->\n                                    <span data-bind=\"html: formattedVal\"></span>\n                                    <!-- /ko-->\n                                </div>\n                            </td>\n                            <!-- /ko-->\n                        </tr> \n                        <!-- /ko -->\n                    </tbody>\n                </table>\n            </div>\n            <div class=\"modal-footer\">\n                <div class=\"col-xs-12 col-centered\" data-bind=\"with: pager\">\n                    <div class=\"form-inline small text-muted\">\n                        <div class=\"pull-left total-records\" data-bind=\"visible: pages()\">\n                            <span data-bind=\"text: 'Total Records: ' + totalRecords()\"></span>\n                        </div>\n                        <div class=\"pull-left\">\n                            <button class=\"btn btn-xs\" title=\"Download Excel\" data-bind=\"click: $parent.exportExcel\"><span class=\"fa fa-file-excel-o\"></span></button>\n                        </div>\n                        <div class=\"form-group pull-right\" data-bind=\"visible: pages()\">\n                            <div data-bind=\"template: 'pager-template', data: $data\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <!-- /ko -->\n        </div>\n    </div>\n</div>\n\n<div class=\"modal\" id=\"noaccountModal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n                <h4 class=\"modal-title\">Account not Setup</h4>\n            </div>\n            <div class=\"modal-body\">\n                <p class=\"alert alert-danger\">dotnet Report Account Configuration missing!</p>\n                <p>You do not have the neccessary initial configuration completed to use dotnet Report.</p>\n                <p>Please view the <a href=\"https://dotnetreport.com/blogs/getting-started-with-dotnet-report/\" target=\"_blank\">Getting Started Guide</a> to correctly configure dotnet Report.</p>\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n            </div>\n        </div>\n    </div>\n</div>\n  ");
             this.cdref.detectChanges();
         };
         return DotnetsetupComponent;
     }());
     DotnetsetupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DotnetsetupComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.DomSanitizer }, { token: i0__namespace.ChangeDetectorRef }, { token: BASE_URL_TOKEN }, { token: i2__namespace.HttpClient }, { token: i3__namespace.ActivatedRoute }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DotnetsetupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DotnetsetupComponent, selector: "app-dotnetsetup", ngImport: i0__namespace, template: "<div id=\"dot-net-report\" class=\"body-content\">\r\n    <div>\r\n        <h2>Manage Database</h2>\r\n        <p>\r\n            You can select and manage display names for the Tables and Columns you would like to allow in .Net Report Builder.\r\n        </p>\r\n        <div class=\"alert alert-danger\">\r\n            Do not expose this Setup Tool to end users who should not have access to it. Ideally, only Developers should be given access to this utility.\r\n        </div>\r\n        <div data-bind=\"visible: false;\">\r\n            Loading...\r\n        </div>\r\n        <div class=\"form-row\" style=\"display: none;\" data-bind=\"visible: true\">\r\n        <div class=\"form-group\">\r\n                <div class=\"control-group\">\r\n                    <select class=\"form-control\" data-bind=\"options: DataConnections, optionsText: 'DataConnectName', optionsValue: 'DataConnectGuid', value: currentConnectionKey\"></select>\r\n                    <button class=\"btn btn-primary btn-sm\" data-bind=\"click: switchConnection, visible: canSwitchConnection\">Switch Connection</button>\r\n                    <button class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#add-connection-modal\">Add New Connection</button>\r\n                    <button class=\"btn btn-primary btn-sm\" data-bind=\"click: exportAll\">Export Connection</button>\r\n                    <button class=\"btn btn-primary btn-sm\" data-bind=\"click: importStart\">Import Connection</button>\r\n                </div>\r\n                <div data-bind=\"visible: importingFile\">\r\n                    <br />\r\n                    <div class=\"alert alert-info\">\r\n                        Please select a file you have previously exported from this utility. The system will load the screen with the Data Connection setting in the file, however, it will <b>NOT</b> be saved until you press the Save All button or Save individual tables\r\n                        <br />\r\n                        <div class=\"input-group\">\r\n                            <input type=\"file\" accept=\".json\" id=\"import-file\" data-bind=\"event: { change: function() { importFile($element.files[0]) } }\" />\r\n                            <span class=\"input-group-btn\">\r\n                                <button class=\"btn btn-link\" data-bind=\"click: importCancel\">Cancel</button>\r\n                            </span>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <br />\r\n        <div>\r\n            <!-- Nav tabs -->\r\n            <ul class=\"nav nav-tabs\" role=\"tablist\">\r\n                <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link active\" href=\"#tablesfields\" aria-controls=\"home\" role=\"tab\" data-toggle=\"tab\" data-bind=\"click: function() { customTableMode(false); }\">Tables and Fields</a></li>\r\n                <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#tablesfields\" aria-controls=\"custom\" role=\"tab\" data-toggle=\"tab\" data-bind=\"click: function() { customTableMode(true); }\">Custom Data Views</a></li>\r\n                <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#relations\" aria-controls=\"profile\" role=\"tab\" data-toggle=\"tab\">Relations</a></li>\r\n                <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#procedure\" aria-controls=\"procedure\" role=\"tab\" data-toggle=\"tab\">Stored Procs</a></li>\r\n                <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#manageaccess\" aria-controls=\"manageaccess\" role=\"tab\" data-toggle=\"tab\">Manage Reports Access</a></li>\r\n            </ul>\r\n        </div>\r\n        <br />\r\n    </div>\r\n    <!-- Tab panes -->\r\n    <div class=\"fix-content\" style=\"display: none;\" data-bind=\"visible: true\">\r\n        <div class=\"tab-content\">\r\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"tablesfields\">\r\n                <div data-bind=\"with: Tables\">\r\n                    <input type=\"text\" class=\"form-control input-sm\" placeholder=\"Filter Tables for...\" data-bind=\"value: tableFilter, valueUpdate: 'afterkeydown'\" style=\"float: left; width: 140px;\">\r\n                    <button class=\"btn btn-sm\" data-bind=\"click: clearTableFilter,  visible: tableFilter()!='' && tableFilter()!=null\"><span class=\"fa fa-remove\"></span></button>\r\n                    <button class=\"btn btn-sm\" onclick=\"openall()\" style=\"margin-left: 15px;\">Open all</button>\r\n                    <button class=\"btn btn-sm\" onclick=\"closeall()\">Close all</button>\r\n                    <button class=\"btn btn-sm\" data-bind=\"click: selectAll, hidden: $root.customTableMode\">Select all</button>\r\n                    <button class=\"btn btn-sm\" data-bind=\"click: unselectAll, hidden: $root.customTableMode\">Unselect all</button>\r\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: $root.customSql.addNewCustomSqlTable, visible: $root.customTableMode\">Add New Custom Table</button>\r\n                    <button class=\"btn btn-sm btn-primary\" data-bind=\"click: $root.saveChanges, hidden: $root.customTableMode\">Save All Changes</button>\r\n                </div>\r\n                <div class=\"clearfix\"></div>\r\n                <hr />\r\n                <div class=\"row\">\r\n                    <div class=\"form-group form-inline col-md-4\" data-bind=\"with: pager\">\r\n                        <div data-bind=\"template: 'pager-template', data: $data\"></div>\r\n                    </div>\r\n                    <div class=\"col-md-4\">\r\n                        <div>\r\n                            <span data-bind=\"text: Tables.model().length\"></span> Tables/Views read from database.\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"menu row\" style=\"margin-left: 20px;\" data-bind=\"foreach: pagedTables\">\r\n                    <div class=\"menu-category card\">\r\n\r\n                        <div class=\"card-header clearfix\" style=\"\">\r\n                            <div class=\"checkbox pull-left\">\r\n                                <label>\r\n                                    <input type=\"checkbox\" data-bind=\"checked: Selected\">\r\n                                    <span data-bind=\"text: TableName\"></span>\r\n                                    <span data-bind=\"visible: IsView\" class=\"label-sm\">(view)</span>\r\n                                </label>\r\n                                <button class=\"btn btn-sm\" title=\"Save this Table\" data-bind=\"click: function(){$data.saveTable($root.keys.AccountApiKey, $root.keys.DatabaseApiKey);}\"><i class=\"fa fa-floppy-o\"></i></button>\r\n                                <button class=\"btn btn-sm\" title=\"Manage Role Access\" data-toggle=\"modal\" data-target=\"#role-access-modal\" data-bind=\"click: $root.selectAllowedRoles\">\r\n                                    <i class=\"fa fa-user\"></i>\r\n                                </button>\r\n                            </div>\r\n                            <a class=\"pull-right\" data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#table'+$index()}\">\r\n                                <span class=\"fa fa-chevron-down\"></span>\r\n                            </a>\r\n                        </div>\r\n                        <div data-bind=\"attr: {id: 'table'+$index()}\" class=\"panel-collapse collapse in\">\r\n                            <div class=\"card-body\">\r\n                                <p>\r\n                                    <label class=\"label-sm\">Display Name</label><br />\r\n                                    <span data-bind=\"editable: DisplayName\"></span>\r\n                                </p>\r\n                                <p>\r\n                                    <label class=\"label-sm\">Schema Name</label><br />\r\n                                    <span data-bind=\"editable: SchemaName\"></span>\r\n                                </p>\r\n                                <p>\r\n                                    <label class=\"label-sm\">Account Id Field</label><br />\r\n                                    <span data-bind=\"editable: AccountIdField\"></span>\r\n                                </p>\r\n                                <div class=\"checkbox\">\r\n                                    <label>\r\n                                        <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked: DoNotDisplay\" title=\"Do not display this table for selecting in reports\"> Do Not Display\r\n                                    </label>\r\n                                </div>\r\n                                <div data-bind=\"if: CustomTable\">\r\n                                    <button data-bind=\"click: $root.customSql.viewCustomSql.bind($data)\" class=\"btn btn-sm btn-secondary\">View Custom Sql</button>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <label style=\"padding-left: 15px;\" class=\"label-sm\"><span data-bind=\"text: Columns().length\"></span> Columns</label>\r\n                            <button class=\"btn btn-sm btn-link label-sm\" data-bind=\"click: autoFormat, visible: Selected\">Auto Format</button>\r\n                            <button class=\"btn btn-sm btn-link label-sm\" data-bind=\"click: unselectAllColumns, visible: Selected\">Unselect All</button>\r\n                            <button class=\"btn btn-sm btn-link label-sm\" data-bind=\"click: selectAllColumns, visible: Selected\">Select All</button>\r\n                            <div class=\"list-group\" data-bind=\"sortable: { data: Columns, options: { handle: '.sortable', cursor: 'move' }, afterMove: $parent.columnSorted }\">\r\n                                <div class=\"list-group-item\">\r\n                                    <div class=\"checkbox\">\r\n                                        <label>\r\n                                            <input type=\"checkbox\" data-bind=\"checked: Selected, enable: $parent.Selected()\">\r\n                                            <span data-bind=\"editable: DisplayName, attr: {title: 'DB field is ' + ColumnName()}\"></span>\r\n                                            <label data-bind=\"visible: PrimaryKey\" class=\"badge badge-primary\">Primary</label>\r\n                                            <label data-bind=\"visible: ForeignKey\" class=\"badge badge-info\">Foreign</label>\r\n                                        </label>\r\n                                        <button class=\"btn btn-sm pull-right\" data-toggle=\"modal\" data-target=\"#column-modal\" title=\"All column options\" data-bind=\"click: $root.selectColumn.bind($data, false)\">...</button>\r\n\r\n                                        <div class=\"btn btn-sm pull-right sortable\">\r\n                                            <span class=\"fa fa-arrows\" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div role=\"tabpanel\" class=\"tab-pane\" id=\"relations\">\r\n\r\n                <br />\r\n                <form id=\"form-joins\">\r\n\r\n                    <p>\r\n                        Setup your Database Relations\r\n                        <span data-toggle=\"tooltip\" data-placement=\"right\" title=\"Report Builder also needs to know the Data Table Relations in order to Generate Reports. You have to specify it here.\" class=\"fa fa-question-circle helptip\"></span>\r\n                    </p>\r\n\r\n                    <table class=\"table\">\r\n                        <thead data-bind=\"with: JoinFilters\">\r\n                            <tr>\r\n                                <th>\r\n                                    Primary Table\r\n                                    <div class=\"input-group input-group-sm\">\r\n                                        <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: primaryTable, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                        <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                    </div>\r\n                                </th>\r\n                                <th>\r\n                                    Field\r\n                                    <div class=\"input-group input-group-sm\">\r\n\r\n                                        <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: primaryField, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                        <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                    </div>\r\n                                </th>\r\n                                <th>\r\n                                    Join Type\r\n                                    <div class=\"input-group input-group-sm\">\r\n\r\n                                        <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: joinType, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                        <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                    </div>\r\n                                </th>\r\n                                <th>\r\n                                    Join Table\r\n                                    <div class=\"input-group input-group-sm\">\r\n\r\n                                        <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: joinTable, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                        <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                    </div>\r\n                                </th>\r\n                                <th>\r\n                                    Field<div class=\"input-group input-group-sm\">\r\n\r\n                                        <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: joinField, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                        <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                    </div>\r\n                                </th>\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody data-bind=\"foreach: filteredJoins\">\r\n                            <tr>\r\n                                <td>\r\n                                    <select class=\"form-control input-medium\" data-bind=\"options: $root.Tables.availableTables, optionsText: 'DisplayName', value: JoinTable\"></select>\r\n                                </td>\r\n                                <td data-bind=\"with: JoinTable\">\r\n                                    <select class=\"form-control\" data-bind=\"options: availableColumns, optionsText: 'DisplayName', optionsValue: 'ColumnName', value: $parent.FieldName\"></select>\r\n                                </td>\r\n                                <td>\r\n                                    <select class=\"form-control input-small\" data-bind=\"options: $root.JoinTypes, value: JoinType\"></select>\r\n                                </td>\r\n                                <td>\r\n                                    <select class=\"form-control input-medium\" data-bind=\"options: OtherTables, optionsText: 'DisplayName', value: OtherTable\"></select>\r\n                                </td>\r\n\r\n                                <td data-bind=\"with: OtherTable\">\r\n                                    <select class=\"form-control\" data-bind=\"options: availableColumns, optionsText: 'DisplayName', optionsValue: 'ColumnName', value: $parent.JoinFieldName\"></select>\r\n                                </td>\r\n                                <td>\r\n                                    <button class=\"btn btn-secondary\" data-bind=\"click: DeleteJoin\">Delete</button>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                    <button class=\"btn btn-primary\" data-bind=\"click: AddJoin\">Add new Join</button>&nbsp;\r\n                    <button class=\"btn btn-primary\" data-bind=\"click: SaveJoins\">Save Joins</button>\r\n                </form>\r\n\r\n            </div>\r\n            <div id=\"procedure\" class=\"tab-pane\">\r\n                <button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#procedure-modal\">Add Stored Procs from database</button>\r\n                <br />\r\n                <br />\r\n                <div data-bind=\"if: Procedures.savedProcedures().length == 0\">\r\n                    No Stored Procedures have been setup yet.\r\n                </div>                    \r\n                <div class=\"menu row\" data-bind=\"foreach: Procedures.savedProcedures\" style=\"margin-left: 20px;\">\r\n                    <div class=\"menu-category card\">\r\n\r\n                        <div class=\"card-header clearfix\" style=\"\">\r\n                            <div class=\"pull-left\">\r\n                                <label>\r\n                                    <span data-bind=\"text: TableName\"></span>\r\n                                    <span class=\"label-xs\">Procedure</span>\r\n                                </label>\r\n\r\n                                <button class=\"btn btn-sm\" title=\"Save this Procedure\" data-bind=\"click: function(){$root.saveProcedure($data.TableName, false);}\">\r\n                                    <span class=\"fa fa-save\"></span>\r\n                                </button>\r\n                                <button class=\"btn btn-sm\" title=\"Manage Role Access\" data-toggle=\"modal\" data-target=\"#role-access-modal\" data-bind=\"click: $root.selectAllowedRoles\">\r\n                                    <i class=\"fa fa-user\"></i>\r\n                                </button>\r\n                                <button class=\"btn btn-sm\" title=\"Delete this Procedure\" data-bind=\"click: function(){$data.deleteTable($root.keys.AccountApiKey, $root.keys.DatabaseApiKey);}\">\r\n                                    <span class=\"fa fa-trash\"></span>\r\n                                </button>\r\n\r\n                            </div>\r\n                            <a class=\"pull-right\" data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#table'+$index()}\">\r\n                                <span class=\"fa fa-chevron-down\"></span>\r\n                            </a>\r\n                        </div>\r\n                        <div data-bind=\"attr: {id: 'table'+$index()}\" class=\"panel-collapse collapse in\">\r\n                            <div class=\"card-body\">\r\n                                <p>\r\n                                    <label class=\"label-sm\">Display Name</label><br />\r\n                                    <span data-bind=\"editable: DisplayName\"></span>\r\n                                </p>\r\n                                <p>\r\n                                    <label class=\"label-sm\">Schema Name</label><br />\r\n                                    <span data-bind=\"editable: SchemaName\"></span>\r\n                                </p>\r\n                                <label class=\"small\">Columns</label>\r\n\r\n                                <div class=\"list-group\" data-bind=\"foreach: Columns\">\r\n                                    <div class=\"list-group-item\">\r\n                                        <label>\r\n                                            <span data-bind=\"editable: DisplayName, attr: {title: 'DB field is ' + ColumnName()}\"></span>\r\n                                            <span class=\"badge badge-info\" data-bind=\"text: FieldType\"></span>\r\n                                        </label>\r\n                                        <button class=\"btn btn-sm pull-right\" data-toggle=\"modal\" data-target=\"#column-modal\" title=\"All column options\" data-bind=\"click: $root.selectColumn.bind($data, true)\">...</button>\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <label class=\"small\">Parameters</label>\r\n\r\n                                <div class=\"list-group\" data-bind=\"foreach: Parameters\">\r\n                                    <div class=\"list-group-item\">\r\n                                        <label>\r\n                                            <span data-bind=\"editable: DisplayName, attr: {title: 'DB field is ' + ParameterName()}\"></span>\r\n                                            <span class=\"badge badge-info\" data-bind=\"text: ParameterDataTypeString\"></span>\r\n                                            &nbsp;\r\n                                            &nbsp;\r\n                                            <button class=\"btn btn-sm btn-primary pull-right\" data-toggle=\"modal\" data-target=\"#parameter-modal\" title=\"All Parameter options\" data-bind=\"click: $root.editParameter\">...</button>\r\n                                        </label>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div id=\"manageaccess\" class=\"tab-pane\">\r\n                <div data-bind=\"foreach: reportsAndFolders\" class=\"card\" style=\"margin-left: 20px;\">\r\n                    <div class=\"card-body\">\r\n                        <a class=\"btn btn-link\" role=\"button\" data-toggle=\"collapse\" data-bind=\"attr: {href: '#folder-' + folderId }\">\r\n                            <i class=\"fa fa-folder\"></i>&nbsp;<span data-bind=\"text: folder\"></span>\r\n                        </a>\r\n                        <div class=\"collapse\" data-bind=\"attr: {id: 'folder-' + folderId }\">\r\n                            <div data-bind=\"if: reports.length == 0\">\r\n                                No Reports found in this folder\r\n                            </div>\r\n                            <ul class=\"list-group\" data-bind=\"foreach: reports\">\r\n                                <li class=\"list-group-item\">\r\n                                    <div class=\"row\">\r\n                                        <div class=\"col-md-3\">\r\n                                            <div>\r\n                                                <label class=\"list-group-item-heading\">\r\n                                                    <span class=\"fa\" data-bind=\"css: {'fa-file': reportType=='List', 'fa-th-list': reportType=='Summary', 'fa-bar-chart': reportType=='Bar', 'fa-pie-chart': reportType=='Pie',  'fa-line-chart': reportType=='Line', 'fa-globe': reportType =='Map'}\" style=\"font-size: 14pt; color: #808080\"></span>\r\n                                                    <span data-bind=\"text: reportName\"></span>\r\n                                                </label>\r\n                                            </div>\r\n                                            <p class=\"list-group-item-text small\" data-bind=\"text: reportDescription\"></p>\r\n\r\n                                            <div class=\"small\" style=\"padding-top: 10px;\">\r\n                                                <b>Current Report Access</b><br />\r\n                                                Manage by User <span class=\"badge badge-info\" data-bind=\"text: userId ? userId : 'No User'\"></span>\r\n                                                <br />\r\n                                                View only by User <span class=\"badge badge-info\" data-bind=\"text: (viewOnlyUserId ? viewOnlyUserId : (userId ? userId : 'Any User'))\"></span>\r\n                                                <br />\r\n                                                <div data-bind=\"if: deleteOnlyUserId\">\r\n                                                    Delete only by User <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserId\"></span>\r\n                                                    <br />\r\n                                                </div>\r\n                                                <div data-bind=\"if: userRole\">\r\n                                                    Manage by Role <span class=\"badge badge-info\" data-bind=\"text: userRole ? userRole : 'No Role'\"></span>\r\n                                                    <br />\r\n                                                </div>\r\n                                                <div data-bind=\"if: viewOnlyUserRole\">\r\n                                                    View only by Role <span class=\"badge badge-info\" data-bind=\"text: viewOnlyUserRole ? viewOnlyUserRole : 'Any Role'\"></span>\r\n                                                    <br />\r\n                                                </div>\r\n                                                <div data-bind=\"if: deleteOnlyUserRole\">\r\n                                                    Delete only by Role <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserRole ? deleteOnlyUserRole : 'Same as Manage'\"></span>\r\n                                                    <br />\r\n                                                </div>\r\n                                                <div>\r\n                                                    For Client <span class=\"badge badge-info\" data-bind=\"text: clientId ? clientId : 'All Clients'\"></span>\r\n                                                    <br />\r\n                                                </div>\r\n                                            </div>\r\n                                            <br />\r\n                                            <br />\r\n                                            <button class=\"btn btn-sm btn-primary\" data-bind=\"click: function() { changeAccess(!changeAccess())}, text: !changeAccess() ? 'Change Access': 'Cancel Changing Access', hidden: changeAccess\">Change Access</button>\r\n                                        </div>\r\n\r\n                                        <div data-bind=\"if: changeAccess\" class=\"col-md-9\" >\r\n                                            <div style=\"border-left: 1px solid; padding-left: 10px;\">\r\n                                                <div data-bind=\"template: {name: 'manage-access-template', data: $root }\"></div>\r\n                                                <br />\r\n                                                <br />\r\n                                                <button class=\"btn btn-sm btn-primary\" data-bind=\"click: saveAccessChanges\">Save Access Changes</button>\r\n                                                <button class=\"btn btn-sm btn-primary\" data-bind=\"click: function() { changeAccess(!changeAccess())}, text: !changeAccess() ? 'Change Access': 'Cancel Changing Access'\">Change Access</button>\r\n\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Modal -->\r\n    <div class=\"modal\" id=\"column-modal\" role=\"dialog\" tabindex=\"-1\">\r\n        <div class=\"modal-dialog\" role=\"document\">\r\n            <div class=\"modal-content\" data-bind=\"with: editColumn()\">\r\n                <div class=\"modal-header\">\r\n                    <h4 class=\"modal-title\" id=\"myModalLabel\">\r\n                        Manage\r\n                        <label data-bind=\"text: ColumnName\"></label>\r\n                    </h4>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <p>Choose options that will determine how users interact with this column on Reports</p>\r\n                    <div class=\"form-horizontal\">\r\n\r\n                        <ul class=\"nav nav-tabs\" role=\"tablist\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link active\" href=\"#column-main\" aria-controls=\"home\" role=\"tab\" data-toggle=\"tab\">Main Options</a></li>\r\n                            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#column-foreign\" aria-controls=\"profile\" role=\"tab\" data-toggle=\"tab\">Foreign Key Options</a></li>\r\n                            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#column-filter\" aria-controls=\"procedure\" role=\"tab\" data-toggle=\"tab\">Filter Options</a></li>\r\n                        </ul>\r\n                        <div class=\"tab-content\">\r\n                            <br />\r\n                            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"column-main\">\r\n                                <div class=\"control-group\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" for=\"Display_Name\" data-bind=\"attr:{placeholder:'Ex First Name'}\" placeholder=\"Ex First Name\">Display Name</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <input class=\"form-control text-box single-line\" data-val=\"true\" data-val-required=\"The DisplayName field is required.\" id=\"DisplayName\" name=\"DisplayName\" type=\"text\" value=\"First Name\" data-bind=\"value: DisplayName, attr:{placeholder:'Ex First Name'}\" placeholder=\"Ex First Name\">\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"This is a friendly name to display to your users\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" for=\"Field_Type\" data-bind=\"\">Field Type</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" id=\"FieldType_SelectedId\" name=\"FieldType.SelectedId\" data-bind=\"value: FieldType\">\r\n                                                <option value=\"Boolean\">Boolean</option>\r\n                                                <option value=\"DateTime\">Date Time</option>\r\n                                                <option value=\"Varchar\">Varchar</option>\r\n                                                <option value=\"Money\">Money</option>\r\n                                                <option value=\"Int\">Int</option>\r\n                                                <option value=\"Double\">Double</option>\r\n                                                <option value=\"Json\">Json</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"FieldType\" data-valmsg-replace=\"true\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" for=\"Primary_Key\" data-bind=\"\">Primary Key</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <div class=\"checkbox\">\r\n                                                <label>\r\n                                                    <input class=\"check-box\" data-val=\"true\" data-val-required=\"The PrimaryKey field is required.\" id=\"PrimaryKey\" name=\"PrimaryKey\" type=\"checkbox\" value=\"true\" data-bind=\"checked:PrimaryKey\"><input name=\"PrimaryKey\" type=\"hidden\" value=\"false\">\r\n                                                </label>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"PrimaryKey\" data-valmsg-replace=\"true\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"\">Do Not Display</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <div class=\"checkbox\">\r\n                                                <label>\r\n                                                    <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked:DoNotDisplay\">\r\n                                                </label>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"If this is checked, the column will not be displayed on Report Designer, but can still be used on Global Data Filters\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"control-group\" data-bind=\"if: FieldType() == 'Json'\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\">JSON Data Structure</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <textarea class=\"form-control text-box single-line\" data-val=\"true\" data-val-required=\"The DisplayName field is required.\" data-bind=\"value: JsonStructure, attr:{placeholder:'Please paste in Sample Json with all columns for this JSON data field'}\" rows=\"5\" ></textarea>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"You can paste in a sample Json blob with all the columns you want to use in this field\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div role=\"tabpanel\" class=\"tab-pane\" id=\"column-filter\">\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-4 col-sm-4 control-label\" data-bind=\"\">Require Filter if Column is selected</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <div class=\"checkbox\">\r\n                                                <label>\r\n                                                    <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked:ForceFilter\">\r\n                                                </label>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-md-2 col-sm-2\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"If this is checked, the column will always require the user to pick a filtered value\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-4 col-sm-4 control-label\" data-bind=\"\">Require Filter if Table is selected</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <div class=\"checkbox\">\r\n                                                <label>\r\n                                                    <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked:ForceFilterForTable\">\r\n                                                </label>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-md-2 col-sm-2\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"If this is checked, the report will always require the user to pick a filter value if user picks the column in report\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"if: FieldType() == 'DateTime'\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-4 col-sm-4 control-label\" data-bind=\"\">Restrict Filter Date Range</label>\r\n                                        <div class=\"col-md-1 col-sm-1\">\r\n                                            <input class=\"check-box\" type=\"checkbox\" data-bind=\"checked: restrictDateRangeFilter\" />\r\n                                        </div>\r\n                                        <div class=\"col-md-2 col-sm-2\" data-bind=\"if: restrictDateRangeFilter\">\r\n                                            <input class=\"form-control\" type=\"number\" data-bind=\"value: restrictDateRangeNumber\" />\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\" data-bind=\"if: restrictDateRangeFilter\">\r\n                                            <select class=\"form-control\" data-bind=\"value: restrictDateRangeValue\">\r\n                                                <option value=\"Days\">Day(s)</option>\r\n                                                <option value=\"Months\">Month(s)</option>\r\n                                                <option value=\"Years\">Year(s)</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <div class=\"col-md-2 col-sm-2\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"If this is selected, user will not be able to pick date range larger than this selection\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div role=\"tabpanel\" class=\"tab-pane\" id=\"column-foreign\">\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Key\" data-bind=\"\">Foreign Key</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <div class=\"checkbox\">\r\n                                                <label>\r\n                                                    <input class=\"check-box\" data-val=\"true\" data-val-required=\"The ForeignKey field is required.\" id=\"ForeignKey\" name=\"ForeignKey\" type=\"checkbox\" value=\"true\" data-bind=\"checked:ForeignKey\"><input name=\"ForeignKey\" type=\"hidden\" value=\"false\">\r\n                                                </label>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Foreign keys allows friendly selection in Filters using a Dropdown List\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Table\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex tblEmployees'}\" placeholder=\"Ex tblEmployees\" style=\"display: none;\">Foreign Table</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" data-bind=\"value: JoinTable, visible:ForeignKey(), options: $root.Tables.model, optionsText: 'TableName'\" placeholder=\"Ex tblEmployees\" style=\"display: none;\"></select>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"ForeignTable\" data-valmsg-replace=\"true\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Join\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" style=\"display: none;\">Foreign Join</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" id=\"ForeignJoin_SelectedId\" name=\"ForeignJoin.SelectedId\" data-bind=\"value: ForeignJoin, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" style=\"display: none;\">\r\n                                                <option selected=\"selected\" value=\"Inner\">Inner</option>\r\n                                                <option value=\"Left\">Left</option>\r\n                                                <option value=\"Right\">Right</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"ForeignJoin\" data-valmsg-replace=\"true\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Key_Field\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex EmployeeId'}\" placeholder=\"Ex EmployeeId\" style=\"display: none;\">Foreign Key Field</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" id=\"ForeignKeyField\" name=\"ForeignKeyField\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignKeyField, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" placeholder=\"Ex EmployeeId\" style=\"display: none;\"></select>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-bind=\"visible:ForeignKey()\" data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" style=\"display: none;\" title=\"Foreign Key field is a Column from the Foreign table which is used as the Key field\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Value_Field\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex EmployeeName'}\" placeholder=\"Ex EmployeeName\" style=\"display: none;\">Foreign Value Field</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" id=\"ForeignValueField\" name=\"ForeignValueField\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignValueField, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" placeholder=\"Ex EmployeeName\" style=\"display: none;\"></select>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-bind=\"visible:ForeignKey()\" data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" style=\"display: none;\" title=\"Foreign Value field is a Column from the Foreign table which is used to display the value to the User in the Report Designer\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div data-bind=\"if: ForeignKey\">\r\n                                    <div class=\"alert alert-info\">\r\n                                        You can setup a cascading filter by setting up a parent for the foreign key below\r\n                                    </div>\r\n                                    <div class=\"control-group\">\r\n                                        <div class=\"form-group row\">\r\n                                            <label class=\"col-md-3 col-sm-3 control-label\">Setup Foreign Key Parent?</label>\r\n                                            <div class=\"col-md-6 col-sm-6\">\r\n                                                <div class=\"checkbox\">\r\n                                                    <label>\r\n                                                        <input class=\"check-box\" type=\"checkbox\" data-bind=\"checked:ForeignParentKey\">\r\n                                                    </label>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"col-md-3 col-sm-3\">\r\n                                                <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Foreign keys parent allows cascading dropdown selection in Filters\"></span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"control-group\">\r\n                                        <div class=\"form-group row\">\r\n                                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignParentKey(), attr: {required: ForeignParentKey()?'True':null, placeholder: 'Ex tblEmployees'}\" placeholder=\"Ex tblEmployees\" style=\"display: none;\">Parent Table</label>\r\n                                            <div class=\"col-md-6 col-sm-6\">\r\n                                                <select class=\"form-control\" data-bind=\"value: ForeignJoinTable, visible:ForeignParentKey(), options: $root.Tables.model, optionsText: 'TableName'\" placeholder=\"Ex tblEmployees\" style=\"display: none;\"></select>\r\n\r\n                                            </div>\r\n                                            <div class=\"col-md-3 col-sm-3\">\r\n                                                <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"ForeignJoinTable\" data-valmsg-replace=\"true\"></span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div class=\"control-group\" data-bind=\"visible:ForeignParentKey()\" style=\"display: none;\">\r\n                                        <div class=\"form-group row\">\r\n                                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"attr: {required: ForeignParentKey()?'True':null, placeholder: 'Ex EmployeeId'}\">Parent Key Field</label>\r\n                                            <div class=\"col-md-6 col-sm-6\">\r\n                                                <select class=\"form-control\" data-bind=\"options: ForeignJoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignParentKeyField, attr: {required: ForeignParentKey()?'True':null}\" placeholder=\"Ex EmployeeId\"></select>\r\n                                            </div>\r\n                                            <div class=\"col-md-3 col-sm-3\">\r\n                                                <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Parent Key field is a Column from the Parent table which is used as the key in cascading filters\"></span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"control-group\" data-bind=\"visible:ForeignParentKey()\" style=\"display: none;\">\r\n                                        <div class=\"form-group row\">\r\n                                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"attr: {required: ForeignParentKey()?'True':null, placeholder: 'Ex EmployeeName'}\">Parent Value Field</label>\r\n                                            <div class=\"col-md-6 col-sm-6\">\r\n                                                <select class=\"form-control\" data-bind=\"options: ForeignJoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignParentValueField, attr: {required: ForeignParentKey()?'True':null}\" placeholder=\"Ex EmployeeName\"></select>\r\n                                            </div>\r\n                                            <div class=\"col-md-3 col-sm-3\">\r\n                                                <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Parent Value field is a Column from the Parent table which is used to display the value to the User in the Report Designer for cascading filters\"></span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"control-group\" data-bind=\"visible:ForeignParentKey()\" style=\"display: none;\">\r\n                                        <div class=\"form-group row\">\r\n                                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"attr: {required: ForeignParentKey()?'True':null, placeholder: 'Ex EmployeeName'}\">Foreign Key Filter Field</label>\r\n                                            <div class=\"col-md-6 col-sm-6\">\r\n                                                <select class=\"form-control\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignParentApplyTo, attr: {required: ForeignParentKey()?'True':null}\" placeholder=\"Ex EmployeeName\"></select>\r\n                                            </div>\r\n                                            <div class=\"col-md-3 col-sm-3\">\r\n                                                <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Foreign Key Filter Value field is a Column from the Foreign table where the selected parent filter will be applied for cascading filters\"></span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <!--<div class=\"control-group\">\r\n                                        <div class=\"form-group row\">\r\n                                            <label class=\"col-md-3 col-sm-3 control-label\">Require Foreign Key Parent?</label>\r\n                                            <div class=\"col-md-6 col-sm-6\">\r\n                                                <div class=\"checkbox\">\r\n                                                    <label>\r\n                                                        <input class=\"check-box\" type=\"checkbox\" data-bind=\"checked:ForeignParentRequired\">\r\n                                                    </label>\r\n                                                </div>\r\n                                            </div>\r\n                                            <div class=\"col-md-3 col-sm-3\">\r\n                                                <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Foreign keys parent can be optional or set to required for cascading filters\"></span>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>-->\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"modal-footer\">\r\n                            <button class=\"btn btn-secondary\" title=\"Manage Role Access\" data-toggle=\"modal\" data-target=\"#role-access-modal\" data-bind=\"click: $root.selectAllowedRoles\">\r\n                                <i class=\"fa fa-user\"></i>Manage Role Access\r\n                            </button>\r\n                            <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Done</button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal\" id=\"procedure-modal\" role=\"dialog\" tabindex=\"-2\">\r\n        <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n            <div class=\"modal-content \">\r\n                <div class=\"modal-header\">\r\n                    <h4 class=\"modal-title\">Add Stored Proc</h4>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <div class=\"row\">\r\n                        <label class=\"col-md-2 control-label\">\r\n                            Search for\r\n                        </label>\r\n                        <div class=\"col-md-6\">\r\n                            <input type=\"text\" class=\"form-control\" data-bind=\"value: searchProcedureTerm\" placeholder=\"Search stored procedures by name\" />\r\n                        </div>\r\n                        <div class=\"col-md-2\">\r\n                            <button class=\"btn btn-primary\" data-bind=\"click: searchStoredProcedure\">Search</button>\r\n                        </div>\r\n                    </div>\r\n                    <br />\r\n                    <div class=\"menu row\" style=\"margin-left: 20px;\" data-bind=\"foreach: foundProcedures\">                        \r\n                        <div class=\"menu-category card\">\r\n                            <div class=\"card-header clearfix\" style=\"\">\r\n                                <div class=\"pull-left\">\r\n                                    <label>\r\n                                        <span data-bind=\"text: TableName\"></span>\r\n                                        <span class=\"label-xs\">Procedure</span>\r\n                                    </label>\r\n                                    <button class=\"btn btn-sm\" title=\"Save this Procedure\" data-bind=\"click: function(){$root.saveProcedure($data.TableName, true);}\">\r\n                                        <span class=\"fa fa-save\"></span>\r\n                                    </button>\r\n                                </div>\r\n                                <a class=\"pull-right\" data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#sp_'+$index()}\">\r\n                                    <span class=\"fa fa-chevron-down\"></span>\r\n                                </a>\r\n                            </div>\r\n                            <div data-bind=\"attr: {id: 'sp_'+$index()}\" class=\"panel-collapse collapse in\">\r\n                                <div class=\"card-body\">\r\n                                    Display Name<br />\r\n                                    <span data-bind=\"editable: DisplayName\"></span>\r\n                                    <label class=\"small\">Columns</label>\r\n\r\n                                    <div class=\"list-group\" data-bind=\"foreach: Columns\">\r\n                                        <div class=\"list-group-item\">\r\n                                            <span data-bind=\"editable: DisplayName\"></span>\r\n                                            <span class=\"badge badge-info\" data-bind=\"text: FieldType\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <label class=\"small\">Paramters</label>\r\n\r\n                                    <div class=\"list-group\" data-bind=\"foreach: Parameters\">\r\n                                        <div class=\"list-group-item\">\r\n                                            <span data-bind=\"editable: DisplayName\"></span>\r\n                                            <span class=\"badge badge-info\" data-bind=\"text: ParameterDataTypeString\"></span><br />\r\n                                            Default Value: <span data-bind=\"editable: ParameterValue\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-primary\" data-dismiss=\"modal\">Done</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal\" id=\"parameter-modal\" role=\"dialog\" tabindex=\"-1\">\r\n        <div class=\"modal-dialog\" role=\"document\">\r\n            <div class=\"modal-content\" data-bind=\"with: editParameter()\">\r\n                <div class=\"modal-header\">\r\n                    <h4 class=\"modal-title\" id=\"myModalLabel\">\r\n                        Manage\r\n                        <label data-bind=\"text: ParameterName\"></label>\r\n                    </h4>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <p>Choose options that will determine how users interact with this parameter on Reports</p>\r\n                    <div class=\"form-horizontal\">\r\n                        <div class=\"control-group\">\r\n                            <div class=\"form-group row\">\r\n                                <label class=\"col-md-3 col-sm-3 control-label\" for=\"Display_Name\" data-bind=\"attr:{placeholder:'Ex First Name'}\" placeholder=\"Ex First Name\">Display Name</label>\r\n                                <div class=\"col-md-6 col-sm-6\">\r\n                                    <input class=\"form-control text-box single-line\" data-val=\"true\" data-val-required=\"The DisplayName field is required.\" name=\"DisplayName\" type=\"text\" value=\"First Name\" data-bind=\"value: DisplayName, attr:{placeholder:'Ex First Name'}\" placeholder=\"Ex First Name\">\r\n                                </div>\r\n                                <div class=\"col-md-3 col-sm-3\">\r\n                                    <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"This is a friendly name to display to your users\"></span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"control-group\">\r\n                            <div class=\"form-group row\">\r\n                                <label class=\"col-md-3 col-sm-3 control-label\">Default Value</label>\r\n                                <div class=\"col-md-6 col-sm-6\">\r\n                                    <span data-bind=\"editable: ParameterValue\"></span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"control-group\">\r\n                            <div class=\"form-group row\">\r\n                                <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"\">Hidden Parameter</label>\r\n                                <div class=\"col-md-6 col-sm-6\">\r\n                                    <div class=\"checkbox\">\r\n                                        <label>\r\n                                            <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked: Hidden, enable: ParameterValue\">\r\n                                        </label>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"control-group\">\r\n                            <div class=\"form-group row\">\r\n                                <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"\">Required</label>\r\n                                <div class=\"col-md-6 col-sm-6\">\r\n                                    <div class=\"checkbox\">\r\n                                        <label>\r\n                                            <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked:Required\">\r\n                                        </label>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"control-group\">\r\n                            <div class=\"form-group row\">\r\n                                <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Key\" data-bind=\"\">Use Lookup Table</label>\r\n                                <div class=\"col-md-6 col-sm-6\">\r\n                                    <div class=\"checkbox\">\r\n                                        <label>\r\n                                            <input class=\"check-box\" data-val=\"true\" name=\"ForeignKey\" type=\"checkbox\" value=\"true\" data-bind=\"checked:ForeignKey\"><input name=\"ForeignKey\" type=\"hidden\" value=\"false\">\r\n                                        </label>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col-md-3 col-sm-3\">\r\n                                    <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Using lookup table allows friendly selection in report using a Dropdown List\"></span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"control-group\">\r\n                            <div class=\"form-group row\">\r\n                                <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Table\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex tblEmployees'}\" placeholder=\"Ex tblEmployees\" style=\"display: none;\">Lookup Table</label>\r\n                                <div class=\"col-md-6 col-sm-6\">\r\n                                    <select class=\"form-control\" data-bind=\"value: JoinTable, visible:ForeignKey(), options: $root.Procedures.tables, optionsText: 'TableName'\" placeholder=\"Ex tblEmployees\" style=\"display: none;\"></select>\r\n\r\n                                </div>\r\n                                <div class=\"col-md-3 col-sm-3\">\r\n                                    <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"ForeignTable\" data-valmsg-replace=\"true\"></span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"control-group\">\r\n                            <div class=\"form-group row\">\r\n                                <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Key_Field\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex EmployeeId'}\" placeholder=\"Ex EmployeeId\" style=\"display: none;\">Lookup Key Field</label>\r\n                                <div class=\"col-md-6 col-sm-6\">\r\n                                    <select class=\"form-control\" name=\"ForeignKeyField\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignKeyField, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" placeholder=\"Ex EmployeeId\" style=\"display: none;\"></select>\r\n                                </div>\r\n                                <div class=\"col-md-3 col-sm-3\">\r\n                                    <span data-bind=\"visible:ForeignKey()\" data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" style=\"display: none;\" title=\"Foreign Key field is a Column from the Foreign table which is used as the Key field\"></span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"control-group\">\r\n                            <div class=\"form-group row\">\r\n                                <label class=\"col-md-3 col-sm-3 control-label\" for=\"Foreign_Value_Field\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex EmployeeName'}\" placeholder=\"Ex EmployeeName\" style=\"display: none;\">Lookup Value Field</label>\r\n                                <div class=\"col-md-6 col-sm-6\">\r\n                                    <select class=\"form-control\" name=\"ForeignValueField\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignValueField, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" placeholder=\"Ex EmployeeName\" style=\"display: none;\"></select>\r\n                                </div>\r\n                                <div class=\"col-md-3 col-sm-3\">\r\n                                    <span data-bind=\"visible:ForeignKey()\" data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" style=\"display: none;\" title=\"Lookup Value field is a Column from the Lookup table which is used to display the value to the User in the Report Designer\"></span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Done</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"modal fade\" id=\"role-access-modal\" role=\"dialog\" tabindex=\"-2\">\r\n        <div class=\"modal-dialog\" role=\"document\">\r\n            <div class=\"modal-content\" data-bind=\"with: editAllowedRoles\">\r\n                <div class=\"modal-header\">\r\n                    <h4 class=\"modal-title\">Manage Access by Roles</h4>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <p>Choose User Roles that will have Access</p>\r\n                    <p class=\"small\">Note: All Users will have access if no restricted roles are setup</p>\r\n                    <div class=\"list-group\" data-bind=\"foreach: AllowedRoles\">\r\n                        <div class=\"list-group-item\" style=\"padding-top: 2px; padding-bottom: 2px;\">\r\n                            <span data-bind=\"text: $data\"></span>\r\n                            <button class=\"btn btn-sm btn-danger pull-right\"><i class=\"fa fa-trash\" data-bind=\"click: $root.removeAllowedRole\"></i></button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-10\">\r\n                            <input class=\"form-control\" type=\"text\" data-bind=\"value: $root.newAllowedRole\" placeholder=\"Ex Sales\">\r\n                        </div>\r\n                        <div class=\"col-2\">\r\n                            <button class=\"btn btn-primary\" data-bind=\"click: $root.addAllowedRole\">Add</button>\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Done</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"clearfix\"></div>\r\n\r\n    <div class=\"modal\" id=\"add-connection-modal\" role=\"dialog\">\r\n        <div class=\"modal-dialog\" role=\"document\">\r\n            <div class=\"modal-content\" data-bind=\"with: newDataConnection\">\r\n                <div class=\"modal-header\">\r\n                    <h4 class=\"modal-title\">Add a new Data Connection</h4>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <p>Choose User Roles that will have Access</p>\r\n                    <p class=\"small\">Note: All Users will have access if no restricted roles are setup</p>\r\n\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-md-3 col-sm-3 control-label\">Connection Name</label>\r\n                        <div class=\"col-md-6 col-sm-6\">\r\n                            <input class=\"form-control text-box\" data-val=\"true\" data-val-required=\"Connection Name is required.\" type=\"text\" data-bind=\"value: Name\" placeholder=\"\" id=\"add-conn-name\">\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <label class=\"col-md-3 col-sm-3 control-label\">Connection Key</label>\r\n                        <div class=\"col-md-6 col-sm-6\">\r\n                            <input class=\"form-control text-box\" data-val=\"true\" data-val-required=\"Connection Key is required.\" type=\"text\" data-bind=\"value: ConnectionKey\" placeholder=\"\" id=\"add-conn-key\">\r\n                        </div>\r\n                        <div class=\"col-md-3 col-sm-3\">\r\n                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"This is the Connection Key in your web.config for your SQL Connection String\"></span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\">\r\n                        <div class=\"check-box col-md-12\">\r\n                            <label>\r\n                                <input type=\"checkbox\" data-bind=\"checked: copySchema\">\r\n                                Copy Schema from existing Connection\r\n                            </label>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"form-group row\" data-bind=\"visible: copySchema\">\r\n                        <label class=\"col-md-3 col-sm-3 control-label\">Choose Connection</label>\r\n                        <div class=\"col-md-6 col-sm-6\">\r\n                            <select class=\"form-control\" style=\"max-width: 300px;\" data-bind=\"options: $root.DataConnections, optionsText: 'DataConnectName', optionsValue: 'DataConnectGuid', value: copyFrom\"></select>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-secondary\" data-bind=\"click: $root.addDataConnection\">Create</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n\r\n    <div class=\"modal\" id=\"custom-sql-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n        <div class=\"modal-dialog modal-lg\" data-bind=\"with: customSql\">\r\n            <div class=\"modal-content\">\r\n                <div class=\"modal-header\">\r\n                    <h5 class=\"modal-title\">Enter Select SQL for your Data</h5>\r\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n                        <span aria-hidden=\"true\">&times;</span>\r\n                    </button>\r\n                </div>\r\n                <div class=\"modal-body\">\r\n                    <div class=\"form-group\" data-bind=\"validationElement: customTableName\">\r\n                        <label for=\"custom-table-name\">Custom Table Name</label>\r\n                        <input type=\"text\" class=\"form-control\" name=\"customTableName\" placeholder=\"Enter table name\" data-bind=\"textInput: customTableName\" required>\r\n                        <div class=\"invalid-feedback\">Custom Table Name is required.</div>\r\n                    </div>\r\n                    <div class=\"checkbox\">\r\n                        <label>\r\n                            <input class=\"check-box\" type=\"checkbox\" data-bind=\"checked: useAi\"> Use ChatGPT to build the query?\r\n                        </label>\r\n                    </div>\r\n                    <div data-bind=\"visible: useAi\">\r\n                        <p id=\"query-input\" class=\"query-input\">\r\n                            Show me&nbsp;\r\n                        </p>                        \r\n                        <button data-bind=\"click: buildSqlUsingAi\" class=\"btn btn-primary btn-sm\">Process with ChatGPT</button>\r\n                        <button data-bind=\"click: textQuery.resetQuery\" class=\"btn btn-secondary btn-sm\">Start over</button>\r\n                        <hr />\r\n                    </div>\r\n\r\n                    <div class=\"form-group\" data-bind=\"validationElement: customSql\">\r\n                        <label for=\"custom-sql\">Custom SQL</label> | <a href=\"#\" data-bind=\"click: beautifySql\">Beautify Sql</a>\r\n                        <textarea class=\"form-control\" style=\"height: 240px;\" name=\"customSql\" data-bind=\"textInput: customSql\" required></textarea>\r\n                        <div class=\"invalid-feedback\">Custom SQL is required.</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"modal-footer\">\r\n                    <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Cancel</button>\r\n                    <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: executeSql\">Save changes</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</div>  \r\n\r\n<!-- Templates -->\r\n<div [innerHtml]=\"reportTemplates\"></div>\r\n<!-- Templates -->", styles: [".glyphicon-ok:before{content:\"\\f00c\"}.glyphicon-remove:before{content:\"\\f00d\"}.glyphicon{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}\n"] });
+    DotnetsetupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DotnetsetupComponent, selector: "app-dotnetsetup", ngImport: i0__namespace, template: "<div id=\"dot-net-report\" class=\"body-content\">\r\n\r\n    <h2>Manage Database</h2>\r\n    <p>\r\n        You can select and manage display names for the Tables and Columns you would like to allow in Dotnet Report Builder.\r\n    </p>\r\n    <div class=\"alert alert-danger\">\r\n        Do not expose this Setup Tool to end users who should not have access to it. Ideally, only Developers should be given access to this utility.\r\n    </div>\r\n    <div data-bind=\"visible: false;\">\r\n        Loading...\r\n    </div>\r\n\r\n    <div>\r\n        <!-- Nav tabs -->\r\n        <ul class=\"nav nav-tabs\" role=\"tablist\">\r\n            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link active\" href=\"#tablesfields\" aria-controls=\"home\" role=\"tab\" data-toggle=\"tab\" data-bind=\"click: function() { customTableMode(false); }\">Database Tables</a></li>\r\n            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#tablesfields\" aria-controls=\"custom\" role=\"tab\" data-toggle=\"tab\" data-bind=\"click: function() { customTableMode(true); }\">Custom Tables</a></li>\r\n            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#relations\" aria-controls=\"profile\" role=\"tab\" data-toggle=\"tab\">Relations</a></li>\r\n            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#procedure\" aria-controls=\"procedure\" role=\"tab\" data-toggle=\"tab\">Stored Procs</a></li>\r\n            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#manageaccess\" aria-controls=\"manageaccess\" role=\"tab\" data-toggle=\"tab\">Manage Reports Access</a></li>\r\n            <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#connection\" aria-controls=\"home\" role=\"tab\" data-toggle=\"tab\">Data Connection</a></li>\r\n        </ul>\r\n    </div>\r\n    <br />\r\n\r\n<!-- Tab panes -->\r\n<div class=\"fix-content\" style=\"display: none;\" data-bind=\"visible: true\">\r\n    <div class=\"tab-content\">\r\n        <div role=\"tabpanel\" class=\"tab-pane\" id=\"connection\">\r\n            <b>Manage Database Connection</b>\r\n            <p>\r\n                Select and manage Data you would like to allow access to in DNR to use in building Reports and Dashboards\r\n            </p>\r\n            <div class=\"form-row\" data-bind=\"visible: true\">\r\n                <div class=\"form-group\">\r\n                    <div class=\"control-group\">\r\n                        <select class=\"form-control\" data-bind=\"options: DataConnections, optionsText: 'DataConnectName', optionsValue: 'DataConnectGuid', value: currentConnectionKey\"></select>\r\n                        <div class=\"padded-top\"></div>\r\n                        <button class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#connection-setup-modal\">Manage DB Connection</button>\r\n                        <button class=\"btn btn-primary btn-sm\" data-bind=\"click: switchConnection, visible: canSwitchConnection\">Switch Connection</button>\r\n                        <button class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#add-connection-modal\">Add New Connection</button>\r\n                        <button class=\"btn btn-primary btn-sm\" data-bind=\"click: exportAll, visible: false\">Export Connection</button>\r\n                        <button class=\"btn btn-primary btn-sm\" data-bind=\"click: importStart, visible: false\">Import Connection</button>\r\n                    </div>\r\n                    <div data-bind=\"visible: importingFile\">\r\n                        <br />\r\n                        <div class=\"alert alert-info\">\r\n                            Please select a file you have previously exported from this utility. The system will load the screen with the Data Connection setting in the file, however, it will <b>NOT</b> be saved until you press the Save All button or Save individual tables\r\n                            <br />\r\n                            <div class=\"input-group\">\r\n                                <input type=\"file\" accept=\".json\" id=\"import-file\" data-bind=\"event: { change: function() { importFile($element.files[0]) } }\" />\r\n                                <span class=\"input-group-btn\">\r\n                                    <button class=\"btn btn-link\" data-bind=\"click: importCancel\">Cancel</button>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div role=\"tabpanel\" class=\"tab-pane active\" id=\"tablesfields\">\r\n            <b data-bind=\"text: customTableMode() ? 'Custom Tables' : 'Database Tables'\"></b>\r\n            <p>\r\n                <span data-bind=\"visible: $root.customTableMode\">\r\n                    Define Custom Tables using SQL Select Query to use in DNR for Reporting and Analytics.\r\n                </span>\r\n                <span data-bind=\"hidden: $root.customTableMode\">\r\n                    Select Tables or Views from your Database to use in DNR for Reporting and Analytics.\r\n                </span>\r\n            </p>\r\n\r\n            <div data-bind=\"with: Tables\">\r\n                <input type=\"text\" class=\"form-control input-sm\" placeholder=\"Filter Tables for...\" data-bind=\"value: tableFilter, valueUpdate: 'afterkeydown'\" style=\"float: left; width: 140px;\">\r\n                <button class=\"btn btn-sm\" data-bind=\"click: clearTableFilter,  visible: tableFilter()!='' && tableFilter()!=null\"><span class=\"fa fa-remove\"></span></button>\r\n                <button class=\"btn btn-sm\" onclick=\"openall()\" style=\"margin-left: 15px;\">Open all</button>\r\n                <button class=\"btn btn-sm\" onclick=\"closeall()\">Close all</button>\r\n                <button class=\"btn btn-sm\" data-bind=\"click: toggleShowAll, hidden: $root.customTableMode() || $root.onlyApi(), text: usedOnly() ? 'Show all' : 'Show used only'\">Show used only</button>\r\n                <button class=\"btn btn-sm btn-primary\" data-bind=\"click: $root.customSql.addNewCustomSqlTable, visible: $root.customTableMode\">Add New Custom Table</button>\r\n                <button class=\"btn btn-sm btn-primary\" data-bind=\"click: $root.loadFromDatabase, hidden: $root.customTableMode() || !$root.onlyApi()\">Load all Database Tables</button>\r\n            </div>\r\n            <div class=\"clearfix\"></div>\r\n            <hr />\r\n            <div class=\"row\">\r\n                <div class=\"form-group form-inline col-md-4\" data-bind=\"with: pager\">\r\n                    <div data-bind=\"template: 'pager-template', data: $data\"></div>\r\n                </div>\r\n                <div class=\"col-md-4\" data-bind=\"ifnot: $root.customTableMode\">\r\n                    <div>\r\n                        <span data-bind=\"text: Tables.model().length\"></span> Tables/Views <span data-bind=\"text: $root.onlyApi() ? 'configured and used' : 'read from database'\"></span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"menu row\" style=\"margin-left: 20px;\" data-bind=\"foreach: pagedTables\">\r\n                <div class=\"menu-category card\" style=\"float: left;\">\r\n\r\n                    <div class=\"card-header clearfix\" >\r\n                        <div class=\"checkbox pull-left\">\r\n                            <label>\r\n                                <input type=\"checkbox\" data-bind=\"checked: Selected\">\r\n                                <span data-bind=\"text: TableName\"></span>\r\n                                <span data-bind=\"visible: IsView\" class=\"label-sm\">(view)</span>\r\n                            </label>\r\n                            <button class=\"btn btn-sm\" title=\"Save this Table\" data-bind=\"click: function(){$data.saveTable($root.keys.AccountApiKey, $root.keys.DatabaseApiKey);}\"><i class=\"fa fa-floppy-o\"></i></button>\r\n                            <button class=\"btn btn-sm\" title=\"Manage Role Access\" data-toggle=\"modal\" data-target=\"#role-access-modal\" data-bind=\"click: $root.selectAllowedRoles\">\r\n                                <i class=\"fa fa-user\"></i>\r\n                            </button>\r\n                        </div>\r\n                        <a class=\"pull-right\" data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#table'+$index()}\">\r\n                            <span class=\"fa fa-chevron-down\"></span>\r\n                        </a>\r\n                    </div>\r\n                    <div data-bind=\"attr: {id: 'table'+$index()}\" class=\"panel-collapse collapse in\">\r\n                        <div class=\"card-body\">\r\n                            <p>\r\n                                <label class=\"label-sm\">Display Name</label><br />\r\n                                <span data-bind=\"editable: DisplayName\"></span>\r\n                            </p>\r\n                            <p>\r\n                                <label class=\"label-sm\">Schema Name</label><br />\r\n                                <span data-bind=\"editable: SchemaName\"></span>\r\n                            </p>\r\n                            <p>\r\n                                <label class=\"label-sm\">Account Id Field</label><br />\r\n                                <span data-bind=\"editable: AccountIdField\"></span>\r\n                            </p>\r\n                            <div class=\"checkbox\">\r\n                                <label>\r\n                                    <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked: DoNotDisplay\" title=\"Do not display this table for selecting in reports\"> Do Not Display\r\n                                </label>\r\n                            </div>\r\n                            <div data-bind=\"if: CustomTable\">\r\n                                <button data-bind=\"click: $root.customSql.viewCustomSql.bind($data)\" class=\"btn btn-sm btn-secondary\">View Custom Sql</button>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <label style=\"padding-left: 15px;\" class=\"label-sm\"><span data-bind=\"text: Columns().length\"></span> Columns</label>\r\n                        <button class=\"btn btn-sm btn-link label-sm\" data-bind=\"click: autoFormat, visible: Selected\">Auto Format</button>\r\n                        <button class=\"btn btn-sm btn-link label-sm\" data-bind=\"click: unselectAllColumns, visible: Selected\">Unselect All</button>\r\n                        <button class=\"btn btn-sm btn-link label-sm\" data-bind=\"click: selectAllColumns, visible: Selected\">Select All</button>\r\n                        <div class=\"list-group\" data-bind=\"sortable: { data: Columns, options: { handle: '.sortable', cursor: 'move' }, afterMove: $parent.columnSorted }\">\r\n                            <div class=\"list-group-item\">\r\n                                <div class=\"checkbox\">\r\n                                    <label>\r\n                                        <input type=\"checkbox\" data-bind=\"checked: Selected, enable: $parent.Selected()\">\r\n                                        <span data-bind=\"editable: DisplayName, attr: {title: 'DB field is ' + ColumnName()}\"></span>\r\n                                        <label data-bind=\"visible: PrimaryKey\" class=\"badge badge-primary\">Primary</label>\r\n                                        <label data-bind=\"visible: ForeignKey\" class=\"badge badge-info\">Foreign</label>\r\n                                    </label>\r\n                                    <button class=\"btn btn-sm pull-right\" data-toggle=\"modal\" data-target=\"#column-modal\" title=\"All column options\" data-bind=\"click: $root.selectColumn.bind($data, false)\">...</button>\r\n\r\n                                    <div class=\"btn btn-sm pull-right sortable\">\r\n                                        <span class=\"fa fa-arrows\" aria-hidden=\"true\" title=\"Drag to reorder\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div role=\"tabpanel\" class=\"tab-pane\" id=\"relations\">\r\n            <b>Relations</b>\r\n            <p>\r\n                Setup your Database Relations for DNR to produce dynamic queries\r\n            </p>\r\n            <button class=\"btn btn-sm btn-primary\" data-bind=\"click: AddJoin\">Add new Join</button>&nbsp;\r\n            <button class=\"btn btn-sm btn-primary\" data-bind=\"click: SaveJoins\">Save Joins</button>\r\n            <br />\r\n            <br />\r\n            <form id=\"form-joins\">\r\n                <table class=\"table\">\r\n                    <thead data-bind=\"with: JoinFilters\">\r\n                        <tr>\r\n                            <th>\r\n                                Primary Table\r\n                                <div class=\"input-group input-group-sm\">\r\n                                    <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: primaryTable, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                    <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                </div>\r\n                            </th>\r\n                            <th>\r\n                                Field\r\n                                <div class=\"input-group input-group-sm\">\r\n\r\n                                    <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: primaryField, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                    <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                </div>\r\n                            </th>\r\n                            <th>\r\n                                Join Type\r\n                                <div class=\"input-group input-group-sm\">\r\n\r\n                                    <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: joinType, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                    <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                </div>\r\n                            </th>\r\n                            <th>\r\n                                Join Table\r\n                                <div class=\"input-group input-group-sm\">\r\n\r\n                                    <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: joinTable, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                    <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                </div>\r\n                            </th>\r\n                            <th>\r\n                                Field<div class=\"input-group input-group-sm\">\r\n\r\n                                    <input type=\"text\" class=\"form-control input-sm\" data-bind=\"value: joinField, valueUpdate: 'afterkeydown'\" placeholder=\"Search...\">\r\n                                    <span class=\"input-group-addon\"><i class=\"fa fa-filter\"></i></span>\r\n                                </div>\r\n                            </th>\r\n                            <th></th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody data-bind=\"foreach: filteredJoins\">\r\n                        <tr>\r\n                            <td>\r\n                                <select class=\"form-control input-medium\" data-bind=\"options: $root.Tables.availableTables, optionsText: 'DisplayName', value: JoinTable\"></select>\r\n                            </td>\r\n                            <td data-bind=\"with: JoinTable\">\r\n                                <select class=\"form-control\" data-bind=\"options: availableColumns, optionsText: 'DisplayName', optionsValue: 'ColumnName', value: $parent.FieldName\"></select>\r\n                            </td>\r\n                            <td>\r\n                                <select class=\"form-control input-small\" data-bind=\"options: $root.JoinTypes, value: JoinType\"></select>\r\n                            </td>\r\n                            <td>\r\n                                <select class=\"form-control input-medium\" data-bind=\"options: OtherTables, optionsText: 'DisplayName', value: OtherTable\"></select>\r\n                            </td>\r\n\r\n                            <td data-bind=\"with: OtherTable\">\r\n                                <select class=\"form-control\" data-bind=\"options: availableColumns, optionsText: 'DisplayName', optionsValue: 'ColumnName', value: $parent.JoinFieldName\"></select>\r\n                            </td>\r\n                            <td>\r\n                                <button class=\"btn btn-sm btn-secondary\" data-bind=\"click: DeleteJoin\">Delete</button>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </form>\r\n            <br />\r\n            <br />\r\n        </div>\r\n        <div id=\"procedure\" class=\"tab-pane\">\r\n            <b>Stored Procedures</b>\r\n            <p>\r\n                Select and manage Stored Procedures to use in DNR for more complex and coded Reports\r\n            </p>\r\n            <hr />\r\n            <button class=\"btn btn-sm btn-primary\" data-toggle=\"modal\" data-target=\"#procedure-modal\">Add Stored Procs from database</button>\r\n            <br />\r\n            <div data-bind=\"if: Procedures.savedProcedures().length == 0\">\r\n                No Stored Procedures have been setup yet.\r\n            </div>\r\n            <div class=\"menu row\" data-bind=\"foreach: Procedures.savedProcedures\" style=\"margin-left: 20px; padding-top: 20px;\">\r\n                <div class=\"menu-category card\" style=\"float: left;\">\r\n\r\n                    <div class=\"card-header clearfix\">\r\n                        <div class=\"pull-left\">\r\n                            <label>\r\n                                <span data-bind=\"text: TableName\"></span>\r\n                                <span class=\"label-xs\">Procedure</span>\r\n                            </label>\r\n\r\n                            <button class=\"btn btn-sm\" title=\"Save this Procedure\" data-bind=\"click: function(){$root.saveProcedure($data.TableName, false);}\">\r\n                                <span class=\"fa fa-save\"></span>\r\n                            </button>\r\n                            <button class=\"btn btn-sm\" title=\"Manage Role Access\" data-toggle=\"modal\" data-target=\"#role-access-modal\" data-bind=\"click: $root.selectAllowedRoles\">\r\n                                <i class=\"fa fa-user\"></i>\r\n                            </button>\r\n                            <button class=\"btn btn-sm\" title=\"Delete this Procedure\" data-bind=\"click: function(){$data.deleteTable($root.keys.AccountApiKey, $root.keys.DatabaseApiKey);}\">\r\n                                <span class=\"fa fa-trash\"></span>\r\n                            </button>\r\n\r\n                        </div>\r\n                        <a class=\"pull-right\" data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#table'+$index()}\">\r\n                            <span class=\"fa fa-chevron-down\"></span>\r\n                        </a>\r\n                    </div>\r\n                    <div data-bind=\"attr: {id: 'table'+$index()}\" class=\"panel-collapse collapse in\">\r\n                        <div class=\"card-body\">\r\n                            <p>\r\n                                <label class=\"label-sm\">Display Name</label><br />\r\n                                <span data-bind=\"editable: DisplayName\"></span>\r\n                            </p>\r\n                            <p>\r\n                                <label class=\"label-sm\">Schema Name</label><br />\r\n                                <span data-bind=\"editable: SchemaName\"></span>\r\n                            </p>\r\n                            <label class=\"small\">Columns</label>\r\n\r\n                            <div class=\"list-group\" data-bind=\"foreach: Columns\">\r\n                                <div class=\"list-group-item\">\r\n                                    <label>\r\n                                        <span data-bind=\"editable: DisplayName, attr: {title: 'DB field is ' + ColumnName()}\"></span>\r\n                                        <span class=\"badge badge-info\" data-bind=\"text: FieldType\"></span>\r\n                                    </label>\r\n                                    <button class=\"btn btn-sm pull-right\" data-toggle=\"modal\" data-target=\"#column-modal\" title=\"All column options\" data-bind=\"click: $root.selectColumn.bind($data, true)\">...</button>\r\n\r\n                                </div>\r\n                            </div>\r\n                            <label class=\"small\">Parameters</label>\r\n\r\n                            <div class=\"list-group\" data-bind=\"foreach: Parameters\">\r\n                                <div class=\"list-group-item\">\r\n                                    <label>\r\n                                        <span data-bind=\"editable: DisplayName, attr: {title: 'DB field is ' + ParameterName()}\"></span>\r\n                                        <span class=\"badge badge-info\" data-bind=\"text: ParameterDataTypeString\"></span>\r\n                                        &nbsp;\r\n                                        &nbsp;\r\n                                        <button class=\"btn btn-sm btn-primary pull-right\" data-toggle=\"modal\" data-target=\"#parameter-modal\" title=\"All Parameter options\" data-bind=\"click: $root.editParameter\">...</button>\r\n                                    </label>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div id=\"manageaccess\" class=\"tab-pane\">\r\n            <div data-bind=\"foreach: reportsAndFolders\" class=\"card\" style=\"margin-left: 20px;\">\r\n                <div class=\"card-body\">\r\n                    <a class=\"btn btn-link\" role=\"button\" data-toggle=\"collapse\" data-bind=\"attr: {href: '#folder-' + folderId }\">\r\n                        <i class=\"fa fa-folder\"></i>&nbsp;<span data-bind=\"text: folder\"></span>\r\n                    </a>\r\n                    <div class=\"collapse\" data-bind=\"attr: {id: 'folder-' + folderId }\">\r\n                        <div data-bind=\"if: reports.length == 0\">\r\n                            No Reports found in this folder\r\n                        </div>\r\n                        <ul class=\"list-group\" data-bind=\"foreach: reports\">\r\n                            <li class=\"list-group-item\">\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-md-3\">\r\n                                        <div>\r\n                                            <label class=\"list-group-item-heading\">\r\n                                                <span class=\"fa\" data-bind=\"css: {'fa-file': reportType=='List', 'fa-th-list': reportType=='Summary', 'fa-bar-chart': reportType=='Bar', 'fa-pie-chart': reportType=='Pie',  'fa-line-chart': reportType=='Line', 'fa-globe': reportType =='Map'}\" style=\"font-size: 14pt; color: #808080\"></span>\r\n                                                <span data-bind=\"text: reportName\"></span>\r\n                                            </label>\r\n                                        </div>\r\n                                        <p class=\"list-group-item-text small\" data-bind=\"text: reportDescription\"></p>\r\n\r\n                                        <div class=\"small\" style=\"padding-top: 10px;\">\r\n                                            <b>Current Report Access</b><br />\r\n                                            Manage by User <span class=\"badge badge-info\" data-bind=\"text: userId ? userId : 'Any User'\"></span>\r\n                                            <br />\r\n                                            View only by User <span class=\"badge badge-info\" data-bind=\"text: (viewOnlyUserId ? viewOnlyUserId : (userId ? userId : 'Any User'))\"></span>\r\n                                            <br />\r\n                                            <div data-bind=\"if: deleteOnlyUserId\">\r\n                                                Delete only by User <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserId\"></span>\r\n                                                <br />\r\n                                            </div>\r\n                                            <div data-bind=\"if: userRole\">\r\n                                                Manage by Role <span class=\"badge badge-info\" data-bind=\"text: userRole ? userRole : 'No Role'\"></span>\r\n                                                <br />\r\n                                            </div>\r\n                                            <div data-bind=\"if: viewOnlyUserRole\">\r\n                                                View only by Role <span class=\"badge badge-info\" data-bind=\"text: viewOnlyUserRole ? viewOnlyUserRole : 'Any Role'\"></span>\r\n                                                <br />\r\n                                            </div>\r\n                                            <div data-bind=\"if: deleteOnlyUserRole\">\r\n                                                Delete only by Role <span class=\"badge badge-info\" data-bind=\"text: deleteOnlyUserRole ? deleteOnlyUserRole : 'Same as Manage'\"></span>\r\n                                                <br />\r\n                                            </div>\r\n                                            <div>\r\n                                                For Client <span class=\"badge badge-info\" data-bind=\"text: clientId ? clientId : 'All Clients'\"></span>\r\n                                                <br />\r\n                                            </div>\r\n                                        </div>\r\n                                        <br />\r\n                                        <br />\r\n                                        <button class=\"btn btn-sm btn-primary\" data-bind=\"click: function() { changeAccess(!changeAccess())}, text: !changeAccess() ? 'Change Access': 'Cancel Changing Access', hidden: changeAccess\">Change Access</button>\r\n                                    </div>\r\n\r\n                                    <div data-bind=\"if: changeAccess\" class=\"col-md-9\" >\r\n                                        <div style=\"border-left: 1px solid; padding-left: 10px;\">\r\n                                            <div data-bind=\"template: {name: 'manage-access-template', data: $root }\"></div>\r\n                                            <br />\r\n                                            <br />\r\n                                            <button class=\"btn btn-sm btn-primary\" data-bind=\"click: saveAccessChanges\">Save Access Changes</button>\r\n                                            <button class=\"btn btn-sm btn-primary\" data-bind=\"click: function() { changeAccess(!changeAccess())}, text: !changeAccess() ? 'Change Access': 'Cancel Changing Access'\">Change Access</button>\r\n\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Modal -->\r\n<div class=\"modal\" id=\"column-modal\" role=\"dialog\" tabindex=\"-1\">\r\n    <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\" data-bind=\"with: editColumn()\">\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\" id=\"myModalLabel\">\r\n                    Manage\r\n                    <label data-bind=\"text: ColumnName\"></label>\r\n                </h4>\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <p>Choose options that will determine how users interact with this column on Reports</p>\r\n                <div class=\"form-horizontal\">\r\n\r\n                    <ul class=\"nav nav-tabs\" role=\"tablist\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                        <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link active\" href=\"#column-main\" aria-controls=\"home\" role=\"tab\" data-toggle=\"tab\">Main Options</a></li>\r\n                        <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#column-foreign\" aria-controls=\"profile\" role=\"tab\" data-toggle=\"tab\">Foreign Key Options</a></li>\r\n                        <li role=\"presentation\" class=\"nav-item\"><a class=\"nav-link\" href=\"#column-filter\" aria-controls=\"procedure\" role=\"tab\" data-toggle=\"tab\">Filter Options</a></li>\r\n                    </ul>\r\n                    <div class=\"tab-content\">\r\n                        <br />\r\n                        <div role=\"tabpanel\" class=\"tab-pane active\" id=\"column-main\">\r\n                            <div class=\"control-group\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" for=\"Display_Name\" data-bind=\"attr:{placeholder:'Ex First Name'}\" placeholder=\"Ex First Name\">Display Name</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <input class=\"form-control text-box single-line\" data-val=\"true\" data-val-required=\"The DisplayName field is required.\" id=\"DisplayName\" name=\"DisplayName\" type=\"text\" value=\"First Name\" data-bind=\"value: DisplayName, attr:{placeholder:'Ex First Name'}\" placeholder=\"Ex First Name\">\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"This is a friendly name to display to your users\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" for=\"Field_Type\" data-bind=\"\">Field Type</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <select class=\"form-control\" id=\"FieldType_SelectedId\" name=\"FieldType.SelectedId\" data-bind=\"value: FieldType\">\r\n                                            <option value=\"Boolean\">Boolean</option>\r\n                                            <option value=\"DateTime\">Date Time</option>\r\n                                            <option value=\"Varchar\">Varchar</option>\r\n                                            <option value=\"Money\">Money</option>\r\n                                            <option value=\"Int\">Int</option>\r\n                                            <option value=\"Double\">Double</option>\r\n                                            <option value=\"Json\">Json</option>\r\n                                        </select>\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"FieldType\" data-valmsg-replace=\"true\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" for=\"Primary_Key\" data-bind=\"\">Primary Key</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <div class=\"checkbox\">\r\n                                            <label>\r\n                                                <input class=\"check-box\" data-val=\"true\" data-val-required=\"The PrimaryKey field is required.\" id=\"PrimaryKey\" name=\"PrimaryKey\" type=\"checkbox\" value=\"true\" data-bind=\"checked:PrimaryKey\"><input name=\"PrimaryKey\" type=\"hidden\" value=\"false\">\r\n                                            </label>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"PrimaryKey\" data-valmsg-replace=\"true\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"\">Do Not Display</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <div class=\"checkbox\">\r\n                                            <label>\r\n                                                <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked:DoNotDisplay\">\r\n                                            </label>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"If this is checked, the column will not be displayed on Report Designer, but can still be used on Global Data Filters\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"control-group\" data-bind=\"if: FieldType() == 'Json'\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\">JSON Data Structure</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <textarea class=\"form-control text-box single-line\" data-val=\"true\" data-val-required=\"The DisplayName field is required.\" data-bind=\"value: JsonStructure, attr:{placeholder:'Please paste in Sample Json with all columns for this JSON data field'}\" rows=\"5\" ></textarea>\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"You can paste in a sample Json blob with all the columns you want to use in this field\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div role=\"tabpanel\" class=\"tab-pane\" id=\"column-filter\">\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-4 col-sm-4 control-label\" data-bind=\"\">Require Filter if Column is selected</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <div class=\"checkbox\">\r\n                                            <label>\r\n                                                <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked:ForceFilter\">\r\n                                            </label>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-md-2 col-sm-2\">\r\n                                        <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"If this is checked, the column will always require the user to pick a filtered value\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-4 col-sm-4 control-label\" data-bind=\"\">Require Filter if Table is selected</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <div class=\"checkbox\">\r\n                                            <label>\r\n                                                <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked:ForceFilterForTable\">\r\n                                            </label>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-md-2 col-sm-2\">\r\n                                        <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"If this is checked, the report will always require the user to pick a filter value if user picks the column in report\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\" data-bind=\"if: FieldType() == 'DateTime'\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-4 col-sm-4 control-label\" data-bind=\"\">Restrict Filter Date Range</label>\r\n                                    <div class=\"col-md-1 col-sm-1\">\r\n                                        <input class=\"check-box\" type=\"checkbox\" data-bind=\"checked: restrictDateRangeFilter\" />\r\n                                    </div>\r\n                                    <div class=\"col-md-2 col-sm-2\" data-bind=\"if: restrictDateRangeFilter\">\r\n                                        <input class=\"form-control\" type=\"number\" data-bind=\"value: restrictDateRangeNumber\" />\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\" data-bind=\"if: restrictDateRangeFilter\">\r\n                                        <select class=\"form-control\" data-bind=\"value: restrictDateRangeValue\">\r\n                                            <option value=\"Days\">Day(s)</option>\r\n                                            <option value=\"Months\">Month(s)</option>\r\n                                            <option value=\"Years\">Year(s)</option>\r\n                                        </select>\r\n                                    </div>\r\n                                    <div class=\"col-md-2 col-sm-2\">\r\n                                        <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"If this is selected, user will not be able to pick date range larger than this selection\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div role=\"tabpanel\" class=\"tab-pane\" id=\"column-foreign\">\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"\">Foreign Key</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <div class=\"checkbox\">\r\n                                            <label>\r\n                                                <input class=\"check-box\" data-val=\"true\" data-val-required=\"The ForeignKey field is required.\" id=\"ForeignKey\" name=\"ForeignKey\" type=\"checkbox\" value=\"true\" data-bind=\"checked:ForeignKey\"><input name=\"ForeignKey\" type=\"hidden\" value=\"false\">\r\n                                            </label>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Foreign keys allows friendly selection in Filters using a Dropdown List\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex tblEmployees'}\" placeholder=\"Ex tblEmployees\" style=\"display: none;\">Foreign Table</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <select class=\"form-control\" data-bind=\"value: JoinTable, visible:ForeignKey(), options: $root.Tables.model, optionsText: 'TableName'\" placeholder=\"Ex tblEmployees\" style=\"display: none;\"></select>\r\n\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"ForeignTable\" data-valmsg-replace=\"true\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" style=\"display: none;\">Foreign Join</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <select class=\"form-control\" id=\"ForeignJoin_SelectedId\" name=\"ForeignJoin.SelectedId\" data-bind=\"value: ForeignJoin, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" style=\"display: none;\">\r\n                                            <option selected=\"selected\" value=\"Inner\">Inner</option>\r\n                                            <option value=\"Left\">Left</option>\r\n                                            <option value=\"Right\">Right</option>\r\n                                        </select>\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"ForeignJoin\" data-valmsg-replace=\"true\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex EmployeeId'}\" placeholder=\"Ex EmployeeId\" style=\"display: none;\">Foreign Key Field</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <select class=\"form-control\" id=\"ForeignKeyField\" name=\"ForeignKeyField\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignKeyField, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" placeholder=\"Ex EmployeeId\" style=\"display: none;\"></select>\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span data-bind=\"visible:ForeignKey()\" data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" style=\"display: none;\" title=\"Foreign Key field is a Column from the Foreign table which is used as the Key field\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"control-group\" data-bind=\"if: $root.isStoredProcColumn() == false\">\r\n                                <div class=\"form-group row\">\r\n                                    <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex EmployeeName'}\" placeholder=\"Ex EmployeeName\" style=\"display: none;\">Foreign Value Field</label>\r\n                                    <div class=\"col-md-6 col-sm-6\">\r\n                                        <select class=\"form-control\" id=\"ForeignValueField\" name=\"ForeignValueField\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignValueField, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" placeholder=\"Ex EmployeeName\" style=\"display: none;\"></select>\r\n                                    </div>\r\n                                    <div class=\"col-md-3 col-sm-3\">\r\n                                        <span data-bind=\"visible:ForeignKey()\" data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" style=\"display: none;\" title=\"Foreign Value field is a Column from the Foreign table which is used to display the value to the User in the Report Designer\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div data-bind=\"if: ForeignKey\">\r\n                                <div class=\"alert alert-info\">\r\n                                    You can setup a cascading filter by setting up a parent for the foreign key below\r\n                                </div>\r\n                                <div class=\"control-group\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\">Setup Foreign Key Parent?</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <div class=\"checkbox\">\r\n                                                <label>\r\n                                                    <input class=\"check-box\" type=\"checkbox\" data-bind=\"checked:ForeignParentKey\">\r\n                                                </label>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Foreign keys parent allows cascading dropdown selection in Filters\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignParentKey(), attr: {required: ForeignParentKey()?'True':null, placeholder: 'Ex tblEmployees'}\" placeholder=\"Ex tblEmployees\" style=\"display: none;\">Parent Table</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" data-bind=\"value: ForeignJoinTable, visible:ForeignParentKey(), options: $root.Tables.model, optionsText: 'TableName'\" placeholder=\"Ex tblEmployees\" style=\"display: none;\"></select>\r\n\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"ForeignJoinTable\" data-valmsg-replace=\"true\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"control-group\" data-bind=\"visible:ForeignParentKey()\" style=\"display: none;\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"attr: {required: ForeignParentKey()?'True':null, placeholder: 'Ex EmployeeId'}\">Parent Key Field</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" data-bind=\"options: ForeignJoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignParentKeyField, attr: {required: ForeignParentKey()?'True':null}\" placeholder=\"Ex EmployeeId\"></select>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Parent Key field is a Column from the Parent table which is used as the key in cascading filters\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"visible:ForeignParentKey()\" style=\"display: none;\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"attr: {required: ForeignParentKey()?'True':null, placeholder: 'Ex EmployeeName'}\">Parent Value Field</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" data-bind=\"options: ForeignJoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignParentValueField, attr: {required: ForeignParentKey()?'True':null}\" placeholder=\"Ex EmployeeName\"></select>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Parent Value field is a Column from the Parent table which is used to display the value to the User in the Report Designer for cascading filters\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"control-group\" data-bind=\"visible:ForeignParentKey()\" style=\"display: none;\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"attr: {required: ForeignParentKey()?'True':null, placeholder: 'Ex EmployeeName'}\">Foreign Key Filter Field</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <select class=\"form-control\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignParentApplyTo, attr: {required: ForeignParentKey()?'True':null}\" placeholder=\"Ex EmployeeName\"></select>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Foreign Key Filter Value field is a Column from the Foreign table where the selected parent filter will be applied for cascading filters\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <!--<div class=\"control-group\">\r\n                                    <div class=\"form-group row\">\r\n                                        <label class=\"col-md-3 col-sm-3 control-label\">Require Foreign Key Parent?</label>\r\n                                        <div class=\"col-md-6 col-sm-6\">\r\n                                            <div class=\"checkbox\">\r\n                                                <label>\r\n                                                    <input class=\"check-box\" type=\"checkbox\" data-bind=\"checked:ForeignParentRequired\">\r\n                                                </label>\r\n                                            </div>\r\n                                        </div>\r\n                                        <div class=\"col-md-3 col-sm-3\">\r\n                                            <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Foreign keys parent can be optional or set to required for cascading filters\"></span>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>-->\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"modal-footer\">\r\n                        <button class=\"btn btn-secondary\" title=\"Manage Role Access\" data-toggle=\"modal\" data-target=\"#role-access-modal\" data-bind=\"click: $root.selectAllowedRoles\">\r\n                            <i class=\"fa fa-user\"></i>Manage Role Access\r\n                        </button>\r\n                        <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Done</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal\" id=\"procedure-modal\" role=\"dialog\" tabindex=\"-2\">\r\n    <div class=\"modal-dialog modal-lg\" role=\"document\">\r\n        <div class=\"modal-content \">\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\">Add Stored Proc</h4>\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"row\">\r\n                    <label class=\"col-md-2 control-label\">\r\n                        Search for\r\n                    </label>\r\n                    <div class=\"col-md-6\">\r\n                        <input type=\"text\" class=\"form-control\" data-bind=\"value: searchProcedureTerm\" placeholder=\"Search stored procedures by name\" />\r\n                    </div>\r\n                    <div class=\"col-md-2\">\r\n                        <button class=\"btn btn-primary\" data-bind=\"click: searchStoredProcedure\">Search</button>\r\n                    </div>\r\n                </div>\r\n                <br />\r\n                <div class=\"menu row\" style=\"margin-left: 20px;\" data-bind=\"foreach: foundProcedures\">\r\n                    <div class=\"menu-category card\">\r\n                        <div class=\"card-header clearfix\">\r\n                            <div class=\"pull-left\">\r\n                                <label>\r\n                                    <span data-bind=\"text: TableName\"></span>\r\n                                    <span class=\"label-xs\">Procedure</span>\r\n                                </label>\r\n                                <button class=\"btn btn-sm\" title=\"Save this Procedure\" data-bind=\"click: function(){$root.saveProcedure($data.TableName, true);}\">\r\n                                    <span class=\"fa fa-save\"></span>\r\n                                </button>\r\n                            </div>\r\n                            <a class=\"pull-right\" data-toggle=\"collapse\" data-bind=\"attr: {'data-target': '#sp_'+$index()}\">\r\n                                <span class=\"fa fa-chevron-down\"></span>\r\n                            </a>\r\n                        </div>\r\n                        <div data-bind=\"attr: {id: 'sp_'+$index()}\" class=\"panel-collapse collapse in\">\r\n                            <div class=\"card-body\">\r\n                                Display Name<br />\r\n                                <span data-bind=\"editable: DisplayName\"></span>\r\n                                <label class=\"small\">Columns</label>\r\n\r\n                                <div class=\"list-group\" data-bind=\"foreach: Columns\">\r\n                                    <div class=\"list-group-item\">\r\n                                        <span data-bind=\"editable: DisplayName\"></span>\r\n                                        <span class=\"badge badge-info\" data-bind=\"text: FieldType\"></span>\r\n                                    </div>\r\n                                </div>\r\n                                <label class=\"small\">Paramters</label>\r\n\r\n                                <div class=\"list-group\" data-bind=\"foreach: Parameters\">\r\n                                    <div class=\"list-group-item\">\r\n                                        <span data-bind=\"editable: DisplayName\"></span>\r\n                                        <span class=\"badge badge-info\" data-bind=\"text: ParameterDataTypeString\"></span><br />\r\n                                        Default Value: <span data-bind=\"editable: ParameterValue\"></span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-primary\" data-dismiss=\"modal\">Done</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal\" id=\"parameter-modal\" role=\"dialog\" tabindex=\"-1\">\r\n    <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\" data-bind=\"with: editParameter()\">\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\" id=\"myModalLabel\">\r\n                    Manage\r\n                    <label data-bind=\"text: ParameterName\"></label>\r\n                </h4>\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <p>Choose options that will determine how users interact with this parameter on Reports</p>\r\n                <div class=\"form-horizontal\">\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"attr:{placeholder:'Ex First Name'}\" placeholder=\"Ex First Name\">Display Name</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <input class=\"form-control text-box single-line\" data-val=\"true\" data-val-required=\"The DisplayName field is required.\" name=\"DisplayName\" type=\"text\" value=\"First Name\" data-bind=\"value: DisplayName, attr:{placeholder:'Ex First Name'}\" placeholder=\"Ex First Name\">\r\n                            </div>\r\n                            <div class=\"col-md-3 col-sm-3\">\r\n                                <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"This is a friendly name to display to your users\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\">Default Value</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <span data-bind=\"editable: ParameterValue\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"\">Hidden Parameter</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <div class=\"checkbox\">\r\n                                    <label>\r\n                                        <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked: Hidden, enable: ParameterValue\">\r\n                                    </label>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"\">Required</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <div class=\"checkbox\">\r\n                                    <label>\r\n                                        <input class=\"check-box\" data-val=\"true\" type=\"checkbox\" value=\"true\" data-bind=\"checked:Required\">\r\n                                    </label>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"\">Use Lookup Table</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <div class=\"checkbox\">\r\n                                    <label>\r\n                                        <input class=\"check-box\" data-val=\"true\" name=\"ForeignKey\" type=\"checkbox\" value=\"true\" data-bind=\"checked:ForeignKey\"><input name=\"ForeignKey\" type=\"hidden\" value=\"false\">\r\n                                    </label>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-md-3 col-sm-3\">\r\n                                <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"Using lookup table allows friendly selection in report using a Dropdown List\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex tblEmployees'}\" placeholder=\"Ex tblEmployees\" style=\"display: none;\">Lookup Table</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <select class=\"form-control\" data-bind=\"value: JoinTable, visible:ForeignKey(), options: $root.Procedures.tables, optionsText: 'TableName'\" placeholder=\"Ex tblEmployees\" style=\"display: none;\"></select>\r\n\r\n                            </div>\r\n                            <div class=\"col-md-3 col-sm-3\">\r\n                                <span class=\"field-validation-valid help-inline indent\" data-valmsg-for=\"ForeignTable\" data-valmsg-replace=\"true\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex EmployeeId'}\" placeholder=\"Ex EmployeeId\" style=\"display: none;\">Lookup Key Field</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <select class=\"form-control\" name=\"ForeignKeyField\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignKeyField, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" placeholder=\"Ex EmployeeId\" style=\"display: none;\"></select>\r\n                            </div>\r\n                            <div class=\"col-md-3 col-sm-3\">\r\n                                <span data-bind=\"visible:ForeignKey()\" data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" style=\"display: none;\" title=\"Foreign Key field is a Column from the Foreign table which is used as the Key field\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"control-group\">\r\n                        <div class=\"form-group row\">\r\n                            <label class=\"col-md-3 col-sm-3 control-label\" data-bind=\"visible:ForeignKey(), attr: {required: ForeignKey()?'True':null, placeholder: 'Ex EmployeeName'}\" placeholder=\"Ex EmployeeName\" style=\"display: none;\">Lookup Value Field</label>\r\n                            <div class=\"col-md-6 col-sm-6\">\r\n                                <select class=\"form-control\" name=\"ForeignValueField\" data-bind=\"options: JoinTable().Columns, optionsText: 'ColumnName', optionsValue: 'ColumnName', value: ForeignValueField, visible:ForeignKey(), attr: {required: ForeignKey()?'True':null}\" placeholder=\"Ex EmployeeName\" style=\"display: none;\"></select>\r\n                            </div>\r\n                            <div class=\"col-md-3 col-sm-3\">\r\n                                <span data-bind=\"visible:ForeignKey()\" data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" style=\"display: none;\" title=\"Lookup Value field is a Column from the Lookup table which is used to display the value to the User in the Report Designer\"></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Done</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"role-access-modal\" role=\"dialog\" tabindex=\"-2\">\r\n    <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\" data-bind=\"with: editAllowedRoles\">\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\">Manage Access by Roles</h4>\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <p>Choose User Roles that will have Access</p>\r\n                <p class=\"small\">Note: All Users will have access if no restricted roles are setup</p>\r\n                <div class=\"list-group\" data-bind=\"foreach: AllowedRoles\">\r\n                    <div class=\"list-group-item\" style=\"padding-top: 2px; padding-bottom: 2px;\">\r\n                        <span data-bind=\"text: $data\"></span>\r\n                        <button class=\"btn btn-sm btn-danger pull-right\"><i class=\"fa fa-trash\" data-bind=\"click: $root.removeAllowedRole\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row\">\r\n                    <div class=\"col-10\">\r\n                        <input class=\"form-control\" type=\"text\" data-bind=\"value: $root.newAllowedRole\" placeholder=\"Ex Sales\">\r\n                    </div>\r\n                    <div class=\"col-2\">\r\n                        <button class=\"btn btn-primary\" data-bind=\"click: $root.addAllowedRole\">Add</button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Done</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"clearfix\"></div>\r\n\r\n<div class=\"modal\" id=\"add-connection-modal\" role=\"dialog\">\r\n    <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\" data-bind=\"with: newDataConnection\">\r\n            <div class=\"modal-header\">\r\n                <h4 class=\"modal-title\">Add a new Data Connection</h4>\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <p>Choose User Roles that will have Access</p>\r\n                <p class=\"small\">Note: All Users will have access if no restricted roles are setup</p>\r\n\r\n                <div class=\"form-group row\">\r\n                    <label class=\"col-md-3 col-sm-3 control-label\">Connection Name</label>\r\n                    <div class=\"col-md-6 col-sm-6\">\r\n                        <input class=\"form-control text-box\" data-val=\"true\" data-val-required=\"Connection Name is required.\" type=\"text\" data-bind=\"value: Name\" placeholder=\"\" id=\"add-conn-name\">\r\n                    </div>\r\n                </div>\r\n                <div class=\"form-group row\">\r\n                    <label class=\"col-md-3 col-sm-3 control-label\">Connection Key</label>\r\n                    <div class=\"col-md-6 col-sm-6\">\r\n                        <input class=\"form-control text-box\" data-val=\"true\" data-val-required=\"Connection Key is required.\" type=\"text\" data-bind=\"value: ConnectionKey\" placeholder=\"\" id=\"add-conn-key\">\r\n                    </div>\r\n                    <div class=\"col-md-3 col-sm-3\">\r\n                        <span data-toggle=\"tooltip\" data-placement=\"right\" class=\"fa fa-question-circle helptip\" title=\"This is the Connection Key in your web.config for your SQL Connection String\"></span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"form-group row\">\r\n                    <div class=\"check-box col-md-12\">\r\n                        <label>\r\n                            <input type=\"checkbox\" data-bind=\"checked: copySchema\">\r\n                            Copy Schema from existing Connection\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n                <div class=\"form-group row\" data-bind=\"visible: copySchema\">\r\n                    <label class=\"col-md-3 col-sm-3 control-label\">Choose Connection</label>\r\n                    <div class=\"col-md-6 col-sm-6\">\r\n                        <select class=\"form-control\" style=\"max-width: 300px;\" data-bind=\"options: $root.DataConnections, optionsText: 'DataConnectName', optionsValue: 'DataConnectGuid', value: copyFrom\"></select>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary\" data-bind=\"click: $root.addDataConnection\">Create</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"clearfix\"></div>\r\n\r\n<div class=\"modal\" id=\"custom-sql-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-lg\" data-bind=\"with: customSql\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title\">Enter Select SQL for your Data</h5>\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n                    <span aria-hidden=\"true\">&times;</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"form-group\" data-bind=\"validationElement: customTableName\">\r\n                    <label for=\"custom-table-name\">Custom Table Name</label>\r\n                    <input type=\"text\" class=\"form-control\" name=\"customTableName\" placeholder=\"Enter table name\" data-bind=\"textInput: customTableName\" required>\r\n                    <div class=\"invalid-feedback\">Custom Table Name is required.</div>\r\n                </div>\r\n                <div class=\"checkbox\">\r\n                    <label>\r\n                        <input class=\"check-box\" type=\"checkbox\" data-bind=\"checked: useAi\"> Use ChatGPT to build the query?\r\n                    </label>\r\n                </div>\r\n                <div data-bind=\"visible: useAi\">\r\n                    <p id=\"query-input\" class=\"query-input\">\r\n                        Show me&nbsp;\r\n                    </p>\r\n                    <button data-bind=\"click: buildSqlUsingAi\" class=\"btn btn-primary btn-sm\">Process with ChatGPT</button>\r\n                    <button data-bind=\"click: textQuery.resetQuery\" class=\"btn btn-secondary btn-sm\">Start over</button>\r\n                    <hr />\r\n                </div>\r\n\r\n                <div class=\"form-group\" data-bind=\"validationElement: customSql\">\r\n                    <label for=\"custom-sql\">Custom SQL</label> | <a href=\"#\" data-bind=\"click: beautifySql\">Beautify Sql</a>\r\n                    <textarea class=\"form-control\" style=\"height: 240px;\" name=\"customSql\" data-bind=\"textInput: customSql\" required></textarea>\r\n                    <div class=\"invalid-feedback\">Custom SQL is required.</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-footer\">\r\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Cancel</button>\r\n                <button type=\"button\" class=\"btn btn-primary\" data-bind=\"click: executeSql\">Save changes</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n</div>\r\n\r\n<!-- Templates -->\r\n<div [innerHtml]=\"reportTemplates\"></div>\r\n<!-- Templates -->", styles: [".glyphicon-ok:before{content:\"\\f00c\"}.glyphicon-remove:before{content:\"\\f00d\"}.glyphicon{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}\n"] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DotnetsetupComponent, decorators: [{
                 type: i0.Component,
                 args: [{