<div class="row" ng-init="init.scores()">
    <div class="col-sm-12">
        <form name="scoresForm" class="scores-form" class="">
            <div id="panel-general" class="panel panel-primary">
                <div class="panel-heading">
                    <h4>Update Standings</h4>
                </div>
                <div class="panel-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group" ng-class="{ 'has-error': form.weekForm.sport.$dirty && form.weekForm.sport.$invalid }">
                                    <label class="control-label" for="name">Sport</label>
                                    <div class="">
                                        <ui-select ng-model="fields.sport" theme="selectize" ng-required="true" on-select="queryLeagues($item)">
                                            <ui-select-match placeholder="Please select...">{{$select.selected.name}}</ui-select-match>
                                            <ui-select-choices repeat="sport in sports.items | filter: $select.search track by sport.id">
                                                <span ng-bind-html="sport.name | highlight: $select.search"></span>
                                            </ui-select-choices>
                                        </ui-select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group" ng-class="{ 'has-error': form.weekForm.league.$dirty && form.weekForm.league.$invalid }">
                                    <label class="control-label" for="name">League </label>
                                    <span class="text-primary fa fa-question-circle" data-title="Please select the Sport first before selecting the League" data-placement="right" bs-tooltip></span>
                                    <div class="">
                                        <ui-select ng-model="fields.league" theme="selectize" ng-required="true" ng-disabled="fields.sport.id == 0 || fields.sport.id == null" on-select="querySeasons($item)">
                                            <ui-select-match placeholder="Please select...">{{$select.selected.name}}</ui-select-match>
                                            <ui-select-choices repeat="league in leagues.items | filter: $select.search track by league.id">
                                                <span ng-bind-html="league.name | highlight: $select.search"></span>
                                            </ui-select-choices>
                                        </ui-select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group" ng-class="{ 'has-error': form.weekForm.season.$dirty && form.weekForm.season.$invalid }">
                                    <label class="control-label" for="name">Season </label>
                                    <span class="text-primary fa fa-question-circle" data-title="Please select the League first before selecting the Season" data-placement="right" bs-tooltip></span>
                                    <div class="">
                                        <ui-select ng-model="fields.season" theme="selectize" ng-required="true" ng-disabled="fields.league.id == 0 || fields.league.id == null" on-select="queryWeeks($item)">
                                            <ui-select-match placeholder="Please select...">{{$select.selected.name}}</ui-select-match>
                                            <ui-select-choices repeat="season in seasons.items | filter: $select.search track by season.id">
                                                <span ng-bind-html="season.name | highlight: $select.search"></span>
                                            </ui-select-choices>
                                        </ui-select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="tdy-table-container">
            <div class="tdy-table-wrapper">
                <form name="scores-update-form" class="scores-update-form" ng-submit="submitScore()">
                    <table class="table table-bordered table-striped table-hover" fsa-table>
                        <thead>
                        <tr>
                            <th class="id">#</th>
                            <th class="">Team</th>
                            <th class="score">Wins</th>
                            <th class="score">Losses</th>
                            <th class="score">Ties</th>
                            <th class="score">%</th>
                        </tr>
                        </thead>
                        <tbody class="overflowable">
                        <tr ng-if="grid.isLoading">
                            <td colspan="10">Loading, please wait...</td>
                        </tr>
                        <tr ng-if="!grid.isLoading && grid.results.totalItems == null">
                            <td colspan="10"> No results found. Select the filters above.</td>
                        </tr>
                        <tr class="clickable" ng-if="!grid.isLoading" ng-repeat-start="standing in grid.items">
                            <td class="id" ng-bind="standing.row"></td>
                            <td ng-bind="standing.team.name"></td>
                            <td class="score"><input type="text" ng-model="standing.wins" class="form-control"></td>
                            <td class="score"><input type="text" ng-model="standing.losses" class="form-control"></td>
                            <td class="score"><input type="text" ng-model="standing.ties" class="form-control"></td>
                            <td class="score"><input type="text" ng-model="standing.percentage" class="form-control"></td>
                        </tr>
                        <tr class="clickable" ng-if="!grid.isLoading" ng-repeat-end>
                            <td class="team" ng-bind="schedule.awayTeam.name"></td>
                            <td class="score"><input type="text" ng-model="schedule.scoreAway" class="form-control"></td>
                        </tr>
                        </tbody>
                    </table>
                    <p class="text-center"><button type="submit" class="btn btn-lg btn-primary">Submit Scores</button></p>
                </form>
            </div>
        </div>
    </div>
</div>