<div class="container main" ng-controller="ReportController" ng-init="getReportList(1);setViewName('Analysis');setNodesPanelHeight();">
    <div analysis-view-config></div>
    
    <div class="row" ng-if="topReportList.length === 0">
        <div class="col-md-12">
            No tests.
        </div>
    </div>

    <div class="row" ng-if="topReportList.length > 0" ng-controller="AnalysisController" ng-init="createTrendChartData(topReportList)">
        <div class="clearfix"></div>

        <div class="col-md-2 pull-right" ng-init="setNodesPanelHeight();">
            <div ng-controller="AuthorController" ng-init="getAuthorNamesWithTestCountsByProject(false);">
                <div class="panel panel-default" id="author-list" ng-if="authorTestCountLength>0">
                    <div class="panel-heading">
                        Authors
                    </div>
                    
                    <div class="panel-body" ng-if="authorTestCountLength>0">
                        <div ng-repeat="obj in authorTestCounts" class="label author" style="margin-bottom:3px !important; display:inline-block;">
                            {{obj._id.name}}
                            &nbsp;
                            <span class="badge">{{obj.count}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div ng-controller="CategoryController" ng-init="getCategoryNamesWithTestCountsByProject()">
                <div class="panel panel-default">
                    <div class='panel-heading' ng-if="categoryTestCountLength>0">
                        Categories
                    </div>
                    
                    <div class='panel-body' ng-if="categoryTestCountLength>0">
                        <div ng-repeat="(name,cnt) in categoryTestCounts" class="label category" style="margin-bottom:3px !important; display:inline-block;" ng-if="cnt>0">
                            {{name}}
                            &nbsp;
                            <span class="badge">{{cnt}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div ng-controller="ExceptionController" ng-init="getExceptionNamesWithTestCountsByProject()">
                <div class="panel panel-default" ng-if="exceptionTestCountLength>0">
                    <div class='panel-heading'>
                        Common Exceptions
                    </div>
                    
                    <div class='panel-body' ng-if="exceptionTestCountLength>0">
                        <div class='panel-body'>
                            <div ng-repeat="obj in exceptionTestCounts" class="label exception" style="margin-bottom:3px !important; display:inline-block;" ng-if="obj.count>0">
                                {{obj._id.name}}
                                &nbsp;
                                <span class="badge">{{obj.count}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-10 quick-metrics" ng-init="getReportTestsCounts()">
            
            <div class="row no-gutter">
                <div class="col-md-3">
                    <div class="panel b-l b-t b-b no-bg no-bs">
                        <div class="panel-body text-center">
                            <div class="text-lead">
                                {{ reportTestCounts.reportLength }}
                            </div>
                            <span class="text-lighter">Reports</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="panel b-t b-r b-b no-bg no-bs">
                        <div class="panel-body text-center">
                            <div class="text-lead">
                                {{ reportTestCounts.featureLength }}
                            </div>
                            <span class="text-lighter">Total Tests-Cases</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="panel b-t b-b b-r no-bg no-bs">
                        <div class="panel-body text-center">
                            <div class="text-lead">
                                {{ reportTestCounts.reportTodayLength }}
                            </div>
                            <span class="text-lighter">Reports Today</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="panel b-t b-b b-r no-bg no-bs">
                        <div class="panel-body text-center">
                            <div class="text-lead">
                                {{ reportTestCounts.featureTodayLength }}
                            </div>
                            <span class="text-lighter">Total Test-Cases Today</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class='col-md-10'>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default test-trends" id="test-trends-container">
                        <div class='panel-heading'>
                            Feature Trends By Status 
                            <span class='pull-right pointer' ng-controller='DataPointsController' ng-click='open()' href='#!'>
                                <i class='material-icons'>more_vert</i>
                            </span>
                        </div>
                        
                        <div class='panel-body'>
                            <canvas id='test-trends' width="{{width}}" height="270" class='chart chart-bar' chart-dataset-override="datasetOverride" chart-data="testTrendData" chart-labels="labels" chart-legend="true" chart-series="series" chart-options="analysisOptions"></canvas>
                        </div>
                    </div>
                </div> <!-- /col -->
                <div class="col-md-6">
                    <div class="panel panel-default child-trends" id="child-trends-container">
                        <div class='panel-heading'>
                            Scenario Trends By Status 
                            <span class='pull-right pointer' ng-controller='DataPointsController' ng-click='open()' href='#!'>
                                <i class='material-icons'>more_vert</i>
                            </span>
                        </div>
                        
                        <div class='panel-body'>
                            <canvas id='child-trends' width="{{width}}" height="270" class='chart chart-bar' chart-dataset-override="datasetOverride" chart-data="childTrendData" chart-labels="labels" chart-legend="true" chart-series="series" chart-options="analysisOptions"></canvas>
                        </div>
                    </div>
                </div> <!-- /col -->

                <div class='col-md-12' ng-init="createReportPerformanceChart(reportList)">
                    <div class="panel panel-default report-performance-chart" id="report-performance-container">
                        <div class='panel-heading'>
                            Report Performance
                            <span class='pull-right pointer' ng-controller='DataPointsController' ng-click='open()' href='#!'>
                                <i class='material-icons'>more_vert</i>
                            </span>
                        </div>
                        
                        <div class='panel-body'>
                            <canvas id='report-performance-chart' width="{{perChartWidth}}" height="270" class='chart chart-line' chart-dataset-override="perfDatasetOverride" chart-data="reportPerfData" chart-labels="labels" chart-legend="true" chart-series="series" chart-options="analysisOptions" chart-colors="colors"></canvas>
                        </div>
                    </div>
                </div> <!-- /col -->
            </div> <!-- row -->
        </div>

        <div class="col-md-10">
            <div class="panel panel-default" id="report-list-summary">
                <div class='panel-heading'>
                    Report List
                </div>
                <div class="pull-right">
                    <span class="label label-default">Page: {{page}}</span>
                </div>
                
                <div class='panel-body'>
                    <ng-include src="'partials/report-template.html'"></ng-include>

                    <button class="btn btn-default" ng-click="page=page-1;getReportList(page)" ng-if="page>1">
                        Previous
                    </button>
                    <button class="btn btn-default" ng-click="page=page+1;getReportList(page)">
                        Next
                    </button>
                </div>
            </div>
        </div> <!-- /col -->

        <div class="col-md-4" ng-init="getTopFailedTestsByProject()">
            <div class="panel panel-default" id="top-failed">
                <div class='panel-heading'>
                    Top Failed
                </div>
                
                <div class='panel-body'>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Count</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="test in topFailedTests" ng-if="$index<5">
                                <td><a href="#/test?name={{test._id.name}}">{{test._id.name}}</a></td>
                                <td>{{test.count}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div> <!-- /col -->
        
    </div> <!-- /row -->

</div> <!-- /container -->
