<div ng-controller="Umbraco.Dialogs.LoginController">
    <div id="login" class="umb-modalcolumn umb-dialog" ng-class="{'show-validation': loginForm.$invalid}" ng-cloak konami-code="activateKonamiMode()">
        <div class="form">
            <h1>{{greeting}}</h1>

            <div ng-show="view == 'login'">

                <p>
                    <span ng-show="dialogData.isTimedOut"><localize key="login_timeout">Log in below</localize>.</span>
                    <localize key="login_instruction">Log in below</localize>
                </p>

                <div class="external-logins" ng-if="externalLoginProviders.length > 0">

                    <div class="text-error" ng-repeat="error in externalLoginInfo.errors">
                        <span>{{error}}</span>
                    </div>

                    <form method="POST" name="externalLoginForm" action="{{externalLoginFormAction}}">

                        <div ng-repeat="login in externalLoginProviders">

                            <button type="submit" class="btn btn-block btn-social"
                                    ng-class="login.properties.SocialStyle"
                                    id="{{login.authType}}" name="provider" value="{{login.authType}}"
                                    title="Log in using your {{login.caption}} account">
                                <i class="fa" ng-class="login.properties.SocialIcon"></i>
                                <localize key="login_signInWith">Sign in with</localize> {{login.caption}}
                            </button>

                        </div>
                    </form>

                    <div id="hrOr">
                        <hr />
                        <div><localize key="general_or">or</localize></div>
                    </div>

                </div>

                <form method="POST" name="loginForm" ng-submit="loginSubmit(login, password)">
                    <div class="control-group" ng-class="{error: loginForm.username.$invalid}">
                        <input type="text" ng-model="login" name="username" class="input-xlarge" localize="placeholder" placeholder="@placeholders_username" />
                    </div>

                    <div class="control-group" ng-class="{error: loginForm.password.$invalid}">
                        <input type="password" ng-model="password" name="password" class="input-xlarge" localize="placeholder" placeholder="@placeholders_password" autocomplete="off" />
                    </div>
                    
                    <div class="control-group" ng-show="loginForm.$invalid">
                        <div class="text-error">{{errorMsg}}</div>
                    </div>

                    <button type="submit" class="btn" val-trigger-change="#login .form input"><localize key="general_login">Login</localize></button>

                    <div class="switch-view" ng-show="allowPasswordReset">
                        <a class="muted" href="#" prevent-default ng-click="showRequestPasswordReset()"><localize key="login_forgottenPassword">Forgotten password?</localize></a>
                    </div>
                </form>
            </div>

            <div ng-show="view == 'request-password-reset'">
                <p>
                    <localize key="login_forgottenPasswordInstruction">An email will be sent to the address specified with a link to reset your password</localize>
                </p>

                <form method="POST" name="requestPasswordResetForm" ng-submit="requestPasswordResetSubmit(email)">
                    <div class="control-group" ng-class="{error: requestPasswordResetForm.email.$invalid}">
                        <input type="text" ng-model="email" name="email" class="input-xlarge" localize="placeholder" placeholder="@placeholders_email" />
                    </div>
                    
                    <div class="control-group" ng-show="requestPasswordResetForm.$invalid">
                        <div class="text-error">{{errorMsg}}</div>
                    </div>
                    
                    <div class="control-group" ng-show="showEmailResetConfirmation">
                        <div class="text-info">
                            <localize key="login_requestPasswordResetConfirmation">An email with password reset instructions will be sent to the specified address if it matched our records</localize>
                        </div>
                    </div>

                    <button type="submit" class="btn" val-trigger-change="#login .form input"><localize key="general_submit">Submit</localize></button>

                    <div class="switch-view">
                        <a class="muted" href="#" prevent-default ng-click="showLogin()"><localize key="login_returnToLogin">Return to login form</localize></a>
                    </div>
                </form>
            </div>

            <div ng-show="view == 'set-password'">
                
                <p ng-hide="resetComplete">
                    <localize key="login_setPasswordInstruction">Please provide a new password.</localize>
                </p>

                <form method="POST" name="setPasswordForm" ng-submit="setPasswordSubmit(password, confirmPassword)">

                    <div ng-hide="resetComplete" class="control-group" ng-class="{error: setPasswordForm.password.$invalid}">
                        <input type="password" ng-model="password" name="password" class="input-xlarge" localize="placeholder" placeholder="@placeholders_password" />
                    </div>

                    <div ng-hide="resetComplete" class="control-group" ng-class="{error: setPasswordForm.confirmPassword.$invalid}">
                        <input type="password" ng-model="confirmPassword" name="confirmPassword" class="input-xlarge" localize="placeholder" placeholder="@placeholders_confirmPassword" />
                    </div>
                    
                    <div ng-hide="resetComplete" class="control-group" ng-show="setPasswordForm.$invalid">
                        <div class="text-error">{{errorMsg}}</div>
                    </div>

                    <div class="control-group" ng-show="showSetPasswordConfirmation">
                        <div class="text-info">
                            <localize key="login_setPasswordConfirmation">Your new password has been set and you may now use it to log in.</localize>
                        </div>                        
                    </div>

                    <button ng-hide="resetComplete" type="submit" class="btn" val-trigger-change="#login .form input"><localize key="general_submit">Submit</localize></button>

                    <div class="switch-view">
                        <a class="muted" href="#" prevent-default ng-click="showLogin()"><localize key="login_returnToLogin">Return to login form</localize></a>
                    </div>
                </form>
            </div>

            <div ng-show="view == 'password-reset-code-expired'">
                <div class="text-error" ng-repeat="error in resetPasswordCodeInfo.errors">
                    <span>{{error}}</span>
                </div>
                
                <div class="switch-view">
                    <a class="muted" href="#" prevent-default ng-click="showLogin()"><localize key="login_returnToLogin">Return to login form</localize></a>
                </div>
            </div>
        </div>
    </div>
</div>