<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>

    <script src="../Models/Service.js"></script>
    <script src="../ViewModels/ListViewModel.js"></script>

    <!-- load "outcome" template and associated script -->
    <script src="../Models/outcome.js"></script>
    <script src="Templates/outcome_template.html" id="outcome-template" type="text/html">
    </script>

    <link rel="stylesheet" type="text/css" href="../CSS/Site.css" />
</head>
<body>
    <h1>Overall Results</h1>

    <table>
        <thead>
            <tr><th>Competitor</th><th>Average Score</th></tr>
        </thead>
        <tbody data-bind="foreach: outcomes">
            <tr>
                <td data-bind="text: Competitor.Name"></td>                

                <td>
                                        
                    <span data-bind="if: HasRatings">
                        <span data-bind="template: { name: 'outcome-template' }"></span>
                    </span>                    
                    <span data-bind="ifnot: HasRatings">N/A</span>
                </td>
                    
            </tr>
        </tbody>
    </table>
    <h2 data-bind="ifnot: loaded">Loading...</h2>

    <br />
    <br />
    <hr />
    <div>
        <a href="rating.html">Enter More Ratings...</a>
    </div>

    <script>
        var rs = new Service();                

        var vm = new ListViewModel(rs);


        

        $(function () {

            /* This block loads any templates. */
            $("script[type='text/html']").each(function (index, el) {
                $.get($(el).attr("src"), function (response) {
                    $(el).text(response);
                });
            });

            vm.loadOutcomes();

            ko.applyBindings(vm);
        });

    </script>
</body>
</html>
