<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>
                            <form name="loginForm" ng-show="login_step1" ng-submit="doLoginStep1(loginForm.$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 auto-focus="{{ login_step1 }}"
                                                   class="form-control rounded-right"
                                                   maxlength="64"
                                                   name="username"
                                                   ng-class="{'is-invalid' : (loginForm.username.$touched || loginForm.username.$dirty)  &&  loginForm.username.$invalid}"
                                                   ng-maxlength="64"
                                                   ng-model="loginInfo.username"
                                                   ng-pattern="email_pattern"
                                                   placeholder="{{'LOGIN.EMAIL' | translate}}"
                                                   type="text"/>
                                            <div class="invalid-feedback text-left">
                                                <div ng-show="loginForm.username.$error.pattern">
                                                    {{'COMMON.INVALID_EMAIL' |
                                                    translate}}
                                                </div>
                                                <div ng-show="loginForm.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.NEXT' | translate}}
                                    </button>
                                </div>
                                </div>
                            </form>

                            <form name="loginForm2" ng-show="login_step2"
                                  ng-submit="doLoginStep2(loginForm2.$valid)" novalidate>
                                <div class="pt-3">
                                    <div class="form-group col-12">
                                        <div close="closeAlert($index)"
                                             ng-class="(alert.type === 'danger') ? 'alert-account-lockout': 'alert-' + (alert.type || 'warning')"
                                             ng-repeat="alert in alerts"
                                             uib-alert><span ng-bind-html="alert.msg"></span>
                                        </div>
                                    </div>
                                    <div class="form-group col-12" ng-show="user_team.data.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 user_team.data">
                                                    <input class="custom-control-input" id="{{team.team_id}}" name="team"
                                                           ng-model="user_team.team" ng-value="team"
                                                           type="radio">
                                                    <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">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                    <span class="input-group-text bg-white">
                                                        <i aria-hidden="true" class="fas fa-lock"></i>
                                                    </span>
                                            </div>
                                            <input auto-focus="{{ !login_step1 }}"
                                                   class="form-control rounded-right" id="password"
                                                   name="password"
                                                   ng-class="{'is-invalid' : (loginForm2.password.$touched || loginForm2.password.$dirty) &&  loginForm2.password.$invalid}"
                                                   ng-maxlength="64"
                                                   ng-model="loginInfo.password"
                                                   placeholder="{{'LOGIN.PASSWORD' | translate}}"
                                                   required
                                                   type="password"/>
                                            <div class="invalid-feedback text-left">
                                                <div ng-show="loginForm2.password.$error.required">
                                                    {{'INPUT_ERROR.REQUIRED' |
                                                    translate}}
                                                </div>
                                                <div ng-show="loginForm2.password.$error.maxlength">{{
                                                    'INPUT_ERROR.MAX_LENGTH'
                                                    | translate : '{value: "64" }' }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-12">
                                        <button class="btn btn-block btn-primary"
                                                ng-disabled="submitting || !loginForm2.$valid" type="submit">
                                            {{'LOGIN.LOGIN_BTN' | translate}}
                                        </button>
                                    </div>
                                    <div class="row px-3">
                                    <div class="form-group col-12 col-md-5 text-left">
                                            <span class="pointer-cursor" ng-click="backLoginStep1()">
                                                {{'LOGIN.BACK' | translate}}
                                            </span>
                                    </div>
                                    <div class="form-group col-12 col-md-7 text-md-right custom-control custom-checkbox"
                                         ng-show="!isSessionAge">
                                        <input class="custom-control-input" id="keepMeLogin"
                                               ng-model="keepLogin" type="checkbox" value="keepMeLogin">
                                        <label class="custom-control-label pointer-cursor"
                                               for="keepMeLogin">{{'LOGIN.KEEP_ME_LOGIN'
                                            | translate}}</label>
                                    </div>
                                </div>
                                </div>
                            </form>

                            <form name="loginForm3" ng-show="login_step3"
                                  ng-submit="doLoginStep3(loginForm3.$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-shield-alt"></i>
                                        </span>
                                            </div>
                                            <input class="form-control rounded-right"
                                                   name="authen_code"
                                                   ng-model="authenCode"
                                                   placeholder="{{'LOGIN.AUTHEN_CODE' | translate}}"
                                                   type="text"/>
                                        </div>
                                    </div>
                                    <div class="form-group col-12">
                                        <button class="btn btn-block btn-primary"
                                                ng-disabled="submitting || !loginForm3.$valid" type="submit">
                                            {{'LOGIN.VERIFY_AUTHEN_CODE' | translate}}
                                        </button>
                                    </div>
                                    <div class="row px-3">
                                        <div class="form-group col-12 col-md-6 text-left">
                                                <span class="pointer-cursor custom-color" ng-click="backLoginStep2()">
                                                    {{'LOGIN.BACK' | translate}}
                                                </span>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <hr>
                            <div class="text-center">
                                <a class="small" ui-sref="forgotPassword">{{'LOGIN.FORGOT_PASSWORD' |
                                    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>
