<!DOCTYPE html>
<html lang="en">
    <script src="htmllibs/angular.min.js"></script>
    <script src="htmllibs/angular-sanitize.js"></script>
    <script src="htmllibs/d3.min.js"> </script>
    <script src="htmllibs/nv.d3.js"></script>

    <link href="htmllibs/bootstrap.min.css" rel="stylesheet">
    <link href="htmllibs/bootstrap-glyphicons.css" rel="stylesheet">


    <link href="ngless.css" rel="stylesheet">
    <title>Mapping Statistics</title>
    <script src="output.js"></script>

    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="nglessQC.html">FastQ Quality Control</a></li>
                </ul>
            </div><!--/.nav-collapse -->
            </div>
        </nav>
        <h1>Mapping Statistics</h1>
        <div ng-app="mapStatsApp" ng-controller="mapStatsCntrl">
            <div id="table" align="center">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Line Number</th>
                            <th>Reference</th>
                            <th>Input file</th>
                            <th>Total reads</th>
                            <th>Total aligned</th>
                            <th>Total unique</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="m in mapStats">
                            <td>{{m.lno}}</td>
                            <td>{{m.reference}}</td>
                            <td>{{m.inputFile}}</td>
                            <td>{{m.totalReads}}</td>
                            <td>{{m.totalAligned}}</td>
                            <td>{{m.totalUnique}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <script>

var app = angular.module('mapStatsApp', []);
app.factory('mapStatsApp', function() {
    return output.mapStats;
});

function mapStatsCntrl($scope){
    $scope.mapStats = output.mapStats;
}
            </script>
        </div>
    </body>
</html>
