<!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/RatingViewModel.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>Competitor Ratings</h1>

    <div>Select Competitor: 
        <select data-bind="options: competitors,
                            optionsText: 'Name',
                            value: selectedCompetitor,
                            optionsCaption: 'Select Person...'"></select>
    </div>

    <h2 data-bind="ifnot: loaded">Loading...</h2>

    <table data-bind="visible: selectedCompetitor">
        <thead>
            <tr>
                <th>Judge</th>
                <th>Rating</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: ratings">
            <tr>
                <td data-bind="text: Judge.Name"></td>
                <td data-bind="text: Rating1"></td>
                <td>
                    <input type="image" src="/Frontend/Content/delete.png" alt="Delete" style="max-width: 16px;"
                           data-bind="click: $root.deleteRating" />
                </td>
            </tr>
        </tbody>
        <tfoot data-bind="visible: judges().length > 0">
            <tr>
                <td>
                    <select data-bind="options: judges,
                                        optionsText: 'Name',
                                        value: newRatingJudge,
                                        optionsCaption: 'Judge...'"></select>
                </td>
                <td><input type="text" style="max-width: 3em;" data-bind="value: newRatingRating" /></td>
                <td>
                    <input type="image" src="/Frontend/Content/save.png" alt="Save" style="max-width: 16px;"
                           data-bind="click: $root.saveNewRating" />
                </td>
            </tr>
        </tfoot>
    </table>

    <div data-bind="visible: ratings().length > 1">Average Rating: <span data-bind="template: { name: 'outcome-template', data: outcome }"></span></div>

    <br />
    <br />
    <hr />
    <div>        
        <a href="list.html">View Results...</a>
    </div>

    <script>
        var rs = new Service();

        var vm = new RatingViewModel(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.loadCompetitors();

            ko.applyBindings(vm);
        });

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