<div class="container">
    <!-- Outer Row -->
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-12 col-md-9">
            <div class="card o-hidden border-0 shadow-lg my-5">
                <div class="card-body">
                    <!-- Nested Row within Card Body -->
                    <div class="row">
                        <div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                            <div class="text-center form-group">
                                <img alt="" class="d-inline-block align-top" height="auto"
                                     src="images/logo1.png"
                                     width="170"/>
                            </div>
                            <!-- input email forgot form  -->
                            <form name="forgotPasswordForm" ng-if="forgotStep1"
                                  ng-submit="checkEmailTeam(forgotPasswordForm.$valid)" novalidate>
                                <div class="pt-3">
                                    <div class="form-group col-12">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                    <span class="input-group-text bg-white">
                                                        <i aria-hidden="true" class="fas fa-envelope"></i>
                                                    </span>
                                            </div>
                                            <input class="form-control rounded-right"
                                                   name="username"
                                                   ng-class="{'is-invalid' : (forgotPasswordForm.username.$touched || forgotPasswordForm.username.$dirty)  &&  forgotPasswordForm.username.$invalid}"
                                                   ng-maxlength="64"
                                                   ng-model="userInfor.username"
                                                   ng-pattern="email_pattern"
                                                   placeholder="{{'LOGIN.EMAIL' | translate}}"
                                                   type="text"/>
                                            <div class="invalid-feedback text-left">
                                                <div ng-show="forgotPasswordForm.username.$error.pattern">
                                                    {{'COMMON.INVALID_EMAIL' | translate}}
                                                </div>
                                                <div ng-show="forgotPasswordForm.username.$error.maxlength"
                                                     translate="INPUT_ERROR.MAX_LENGTH"
                                                     translate-values="{value: 64}"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-12">
                                        <button class="btn btn-block btn-primary" ng-disabled="submitting"
                                                type="submit">
                                            {{'COMMON.CONTINUE' | translate}}
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <!-- Choose team form  -->
                            <form name="forgotPasswordForm2" ng-if="multipleTeam"
                                  ng-submit="doForgotPassword()" novalidate>
                                <div class="pt-3">
                                    <div class="form-group col-12" ng-if="teams.length > 1">
                                        <div class="card border">
                                            <div class="card-header text-left">
                                                <span class="font-weight-bold">  {{'LOGIN.CHOOSE_TEAM' | translate}}</span>
                                            </div>
                                            <div class="card-body">
                                                <div class="custom-control custom-radio text-overflow-custom"
                                                     ng-repeat="team in teams">
                                                    <input class="custom-control-input" id="{{team.team_id}}"
                                                           name="team"
                                                           ng-model="selectedTeam.id"
                                                           type="radio" value="{{team.team_id}}">
                                                    <label class="custom-control-label cs-pointer"
                                                           for="{{team.team_id}}">{{team.team_name}}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-12">
                                        <button class="btn btn-block btn-primary"
                                                ng-disabled="selectedTeam.id === ''" type="submit">
                                            {{'COMMON.BUTTON_CONTINUE' | translate}}
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <!-- Notification change request apply  -->
                            <div class="form-group col-12">
                                <div class="card form-group" ng-if="messageForgotPassword">
                                    <div class="card-body alert-forgot-pass text-light">
                                        {{'FORGOT_PASSWORD.SUCCESS_MESSAGE' | translate}}
                                    </div>
                                </div>
                            </div>

                            <!-- FOOTER -->
                            <hr>
                            <div class="text-center">
                                <a class="small opacity-5">{{'LOGIN.ALREADY_HAVE_ACCOUNT' | translate}}</a>
                                <a class="small" ui-sref="login">{{'LOGIN.LOGIN_LINK' | translate}}</a>
                            </div>
                            <div class="text-center">
                                <a class="small opacity-5">{{'LOGIN.DONT_HAVE_ACCOUNT' | translate}}</a>
                                <a class="small" ui-sref="signUp">{{'LOGIN.SIGN_UP_LINK' |
                                    translate}}</a>
                            </div>
                            <div class="text-center" ng-show="submitting">
                                <div class="lds-facebook">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

