CaffGeek/MBACNationals

<h4>Create a match:</h4>

<form class="form-inline" ng-submit="vm.createMatch(vm.homeBowler, vm.awayBowler)" ng-init="selectedGender='M'">
    <div class="form-group">
        <label for="menGender">Men</label>
        <input type="radio" id="menGender" name="gender" value="M" ng-model="selectedGender" />
    </div>
    <div class="form-group">
        <label for="ladiesGender">Ladies</label>
        <input type="radio" id="ladiesGender" name="gender" value="F" ng-model="selectedGender" />
    </div>
    <div class="form-group">
        <label for="homeBowler">Home</label>
        <select class="form-control" id="homeBowler"
                ng-options="bowler as bowler.Name for bowler in vm.Singles | filter:{Gender:selectedGender}" ng-model="vm.homeBowler" />
    </div>
    <div class="form-group">
        <label for="awayBowler">Away</label>
        <select class="form-control" id="awayBowler"
                ng-options="bowler as bowler.Name for bowler in vm.Singles | filter:{Gender:selectedGender}" ng-model="vm.awayBowler" />
    </div>
    <button type="submit" class="btn btn-default">Create Match</button>
</form>

<div class="row">
    <div class="col-lg-6">
        <h4>Mens Stepladder</h4>
        <ul class="list-unstyled">
            <li data-ng-repeat="match in vm.Matches | filter:{Gender:'M'} | orderBy: 'Created': true" class="panel panel-body">
                {{match.HomeName}} <input type="text" ng-model="match.HomeShots" ng-change="vm.updateMatch(match)" size="35" maxlength="40" />
                <div><bowlinggame shots="match.HomeShots" /></div>
                {{match.AwayName}} <input type="text" ng-model="match.AwayShots" ng-change="vm.updateMatch(match)" size="35" maxlength="40" />
                <div><bowlinggame shots="match.AwayShots" /></div>
                <a href="" data-ng-click="vm.deleteMatch(match)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
            </li>
        </ul>
    </div>
    <div class="col-lg-6">
        <h4>Ladies Stepladder</h4>
        <ul class="list-unstyled">
            <li data-ng-repeat="match in vm.Matches | filter:{Gender:'F'} | orderBy: 'Created': true" class="panel panel-body">
                {{match.HomeName}} <input type="text" ng-model="match.HomeShots" ng-change="vm.updateMatch(match)" size="35" maxlength="40" />
                <div><bowlinggame shots="match.HomeShots" /></div>
                {{match.AwayName}} <input type="text" ng-model="match.AwayShots" ng-change="vm.updateMatch(match)" size="35" maxlength="40" />
                <div><bowlinggame shots="match.AwayShots" /></div>
                <a href="" data-ng-click="vm.deleteMatch(match)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
            </li>
        </ul>
    </div>
</div>