<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <form class="form-player" name="form.playerForm" ng-submit="submit()" novalidate>
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Edit Player</h3>
                </div>
                <div class="modal-body form">
                    <div class="row">
                        <fieldset class="col-sm-5 credentials">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Credentials</h3>
                                </div>
                                <div class="panel-body">
                                    <!-- Text input-->
                                    <div class="form-group" ng-class="{ 'has-error': form.playerForm.username.$dirty && form.playerForm.username.$invalid }">
                                        <label class="control-label" for="username">User Name</label>
                                        <div class="">
                                            <input id="username" name="username" ng-model="fields.username" type="text" class="form-control" required ng-minlength="2" ng-maxlength="50">
                                        </div>
                                        <div class="text-danger form-control-static" ng-show="form.playerForm.username.$dirty && form.playerForm.username.$invalid">
                                            <span ng-show="form.playerForm.username.$error.required">Field is required!</span>
                                            <span ng-show="form.playerForm.username.$error.minlength">Should be at least two (2) characters!</span>
                                            <span ng-show="form.playerForm.username.$error.maxlength">Should be less than twenty (50) characters!</span>
                                        </div>
                                    </div>
                                    <!-- Password input-->
                                    <div class="form-group">
                                        <label class="control-label" for="password">Password</label>
                                        <div class="">
                                            <input id="password" name="password" ng-model="fields.password" type="password" class="form-control">
                                        </div>
                                    </div>
                                    <!-- Text input-->
                                    <div class="form-group" ng-class="{ 'has-error': form.playerForm.email.$dirty && form.playerForm.email.$invalid }">
                                        <label class="control-label" for="email">Email</label>
                                        <div class="">
                                            <input id="email" name="email" type="text" ng-model="fields.email" class="form-control" required>
                                        </div>
                                        <div class="text-danger form-control-static" ng-show="form.playerForm.email.$dirty && form.playerForm.email.$invalid">
                                            <span ng-show="form.playerForm.email.$error.required">Field is required!</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="col-sm-7 profile">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Profile</h3>
                                </div>
                                <div class="panel-body">
                                    <!-- Text input-->
                                    <div class="form-group" ng-class="{ 'has-error': form.playerForm.lastName.$dirty && form.playerForm.lastName.$invalid }">
                                        <label class="control-label" for="lastName">Last Name</label>
                                        <div class="">
                                            <input id="lastName" name="lastName" ng-model="fields.lastName" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                    <!-- Text input-->
                                    <div class="form-group" ng-class="{ 'has-error': form.playerForm.firstName.$dirty && form.playerForm.firstName.$invalid }">
                                        <label class="control-label" for="firstName">First Name</label>
                                        <div class="">
                                            <input id="firstName" name="firstName" ng-model="fields.firstName" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                    <!-- Text input-->
                                    <div class="form-group">
                                        <label class="control-label" for="middleName">Middle Name</label>
                                        <div class="">
                                            <input id="middleName" name="middleName" ng-model="fields.middleName" type="text" class="form-control">
                                        </div>
                                    </div>
                                    <!-- Text input-->
                                    <div class="form-group">
                                        <label class="control-label" for="suffix">Suffix</label>
                                        <div class="">
                                            <input id="suffix" name="suffix" type="text" ng-model="fields.suffix" placeholder="eg. Sr., Jr., III" class="form-control">
                                        </div>
                                    </div>
                                    <!-- Text input-->
                                    <div class="form-group" ng-class="{ 'has-error': form.playerForm.nickname.$dirty && form.playerForm.nickname.$invalid }">
                                        <label class="control-label" for="nickname">Nickname</label>
                                        <div class="">
                                            <input id="nickname" name="nickname" type="text" ng-model="fields.nickname" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-class="{ 'has-error': form.playerForm.birthdate.$dirty && form.playerForm.birthdate.$invalid }">
                                        <label control-label">Birth Date</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="birthdate" ng-required="true" ng-model="fields.birthdate"
                                                   bs-datepicker fsa-datepicker
                                                   data-animation=""
                                                   data-placement="top-left"
                                                >
                                            <span class="input-group-btn" data-toggle="datepicker">
                                                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                                            </span>
                                        </div>
                                        <div class="text-danger form-control-static" ng-show="rform.playerForm.birthdate.$dirty && form.playerForm.birthdate.$invalid">
                                            <span ng-show="form.playerForm.birthdate.$error.required">Field is required!</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="submit" name="submit" class="btn btn-labeled btn-primary" ng-disabled="form.playerForm.$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="modalEditActions.hide()"><span class="btn-label"><i class="fa fa-times"></i></span> Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>