<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <form class="form-contest" name="form.contestForm" ng-submit="submit()" novalidate>
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Create Contest</h3>
                </div>
                <div class="modal-body form">
                    <div class="row">
                        <div class="col-xs-12 informational">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Informational</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group" ng-class="{ 'has-error': form.contestForm.name.$dirty && form.contestForm.name.$invalid }">
                                                <label class="control-label" for="name">Name</label>
                                                <div class="">
                                                    <input id="name" name="name" ng-model="fields.name" ng-change="slugify()" type="text" class="form-control" required>
                                                </div>
                                            </div>
                                            <!-- Text input-->
                                            <div class="form-group" ng-class="{ 'has-error': form.contestForm.slug.$dirty && form.contestForm.slug.$invalid }">
                                                <label class="control-label" for="slug">Slug</label>
                                                <div class="">
                                                    <input id="slug" name="slug" ng-model="fields.slug" type="text" class="form-control" required fsa-slugify>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="control-label" for="description">Description</label>
                                                <div class="">
                                                    <textarea id="description" name="description" ng-model="fields.description" class="form-control" rows="4"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 credentials">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Classification</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="form-group" ng-class="{ 'has-error': form.contestForm.sport.$dirty && form.contestForm.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 class="form-group" ng-class="{ 'has-error': form.contestForm.league.$dirty && form.contestForm.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" on-select="queryWeeks($item)" ng-disabled="fields.sport.id == 0 || fields.sport.id == null">
                                                <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 class="form-group" ng-class="{ 'has-error': form.contestForm.week.$dirty && form.contestForm.week.$invalid }">
                                        <label class="control-label" for="name">Week </label>
                                        <span class="text-primary fa fa-question-circle" data-title="Please select the Sport first before selecting the Week" data-placement="right" bs-tooltip></span>
                                        <div class="">
                                            <ui-select ng-model="fields.week" theme="selectize" ng-required="true" ng-disabled="fields.league.id == 0 || fields.league.id == null">
                                                <ui-select-match placeholder="Please select...">{{$select.selected.name}}</ui-select-match>
                                                <ui-select-choices repeat="week in weeks.items | filter: $select.search track by week.id">
                                                    <span ng-bind-html="week.name | highlight: $select.search"></span>
                                                </ui-select-choices>
                                            </ui-select>
                                        </div>
                                    </div>
                                    <!-- Text input-->

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 profile">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Settings</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="form-group col-sm-6" ng-class="{ 'has-error': form.contestForm.minPlayers.$dirty && form.contestForm.minPlayers.$invalid }">
                                            <label class="control-label" for="minPlayers">Min. Players</label>
                                            <div class="">
                                                <input id="minPlayers" name="minPlayers" ng-model="fields.minPlayers" type="text" class="form-control" required>
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-6" ng-class="{ 'has-error': form.contestForm.maxPlayers.$dirty && form.contestForm.maxPlayers.$invalid }">
                                            <label class="control-label" for="maxPlayers">Max. Players</label>
                                            <div class="">
                                                <input id="maxPlayers" name="maxPlayers" ng-model="fields.maxPlayers" type="text" class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-class="{ 'has-error': form.contestForm.entranceFee.$dirty && form.contestForm.entranceFee.$invalid }">
                                        <label class="control-label" for="entranceFee">Entrance Fee</label>
                                        <div class="input-group">
                                            <span class="input-group-addon">$</span>
                                            <input id="entranceFee" name="entranceFee" ng-model="fields.entranceFee" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-class="{ 'has-error': form.contestForm.prize.$dirty && form.contestForm.prize.$invalid }">
                                        <label class="control-label" for="prize">Prize</label>
                                        <div class="input-group">
                                            <span class="input-group-addon">$</span>
                                            <input id="prize" name="prize" ng-model="fields.prize" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                     </div>
                </div>
                <div class="modal-footer">
                    <button id="submit" name="submit" class="btn btn-labeled btn-primary" ng-disabled="form.contestForm.$invalid || isSubmitted"><span class="btn-label"><i class="fa fa-upload"></i></span> Submit</button>
                    <button class="btn btn-default btn-labeled" type="button" ng-click="modalAddActions.hide()"><span class="btn-label"><i class="fa fa-times"></i></span> Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>