<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="login-overlay__background-image" ng-if="backgroundImage" ng-style="{'background-image':'url(' + backgroundImage + ')'}"></div>

    <div class="login-overlay__logo">
      <img ng-src="assets/img/application/logo.png" ng-srcset="assets/img/application/logo@2x.png 2x, assets/img/application/logo@3x.png 3x">
    </div>

    <div ng-show="invitedUser != null" class="umb-login-container">

      <form name="inviteUserPasswordForm" novalidate="" ng-submit="inviteSavePassword()" val-form-manager>
        <div class="form" ng-if="inviteStep === 1">
          <h1 style="margin-bottom: 10px; text-align: left;">Hi, {{invitedUser.name}}</h1>
          <p style="line-height: 1.6; margin-bottom: 25px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>

          <div class="control-group" ng-class="{error: setPasswordForm.password.$invalid}">
            <label>
              <localize key="user_newPassword">New password</localize>
              <small style="font-size: 13px;">{{invitedUserPasswordModel.passwordPolicyText}}</small>
            </label>
            <input type="password" ng-model="invitedUserPasswordModel.password" name="password" class="-full-width-input" umb-auto-focus required val-server-field="value" autocomplete="off" ng-minlength="{{invitedUserPasswordModel.passwordPolicies.minPasswordLength}}" />
            <span class="help-inline" val-msg-for="password" val-toggle-msg="required"><localize key="user_passwordIsBlank">Your new password cannot be blank!</localize></span>
            <span class="help-inline" val-msg-for="password" val-toggle-msg="minlength">Minimum {{invitedUserPasswordModel.passwordPolicies.minPasswordLength}} characters</span>    
            <span class="help-inline" val-msg-for="password" val-toggle-msg="valServerField"></span>     
          </div>

          <div class="control-group" ng-class="{error: setPasswordForm.confirmPassword.$invalid}">
            <label><localize key="user_confirmNewPassword">Confirm new password</localize></label>
            <input type="password" ng-model="invitedUserPasswordModel.confirmPassword" name="confirmPassword" class="-full-width-input" required val-compare="password" autocomplete="off"/>
            <span class="help-inline" val-msg-for="confirmPassword" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
            <span class="help-inline" val-msg-for="confirmPassword" val-toggle-msg="valCompare"><localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize></span>
          </div>

          <div class="flex justify-between items-center">
            <umb-button type="submit"
                        button-style="success"
                        state="invitedUserPasswordModel.buttonState"
                        label="Save password">
            </umb-button>
          </div>

        </div>
      </form>

      <div class="form" ng-if="inviteStep === 2">

        <div class="flex justify-center items-center">
          
          <ng-form name="avatarForm">
            
            <umb-progress-bar style="max-width: 100px; margin-bottom: 5px;"
                              ng-show="avatarFile.uploadStatus === 'uploading'"
                              progress="{{ avatarFile.uploadProgress }}"
                              size="s">
            </umb-progress-bar>
            
            <div class="umb-info-local-item text-error mt3" ng-if="avatarFile.uploadStatus === 'error'">
              {{ avatarFile.serverErrorMessage }}
            </div>

              <a class="umb-avatar-btn"
                 ngf-select
                 ng-model="avatarFile.filesHolder"
                 ngf-change="changeAvatar($files, $event)"
                 ngf-multiple="false"
                 ngf-pattern="{{avatarFile.acceptedFileTypes}}"
                 ngf-max-size="{{ avatarFile.maxFileSize }}">
                  
                  <umb-avatar color="gray"
                              size="xl"
                              unknown-char="+"
                              img-src="{{invitedUser.avatars[3]}}"
                              img-srcset="{{invitedUser.avatars[4]}} 2x, {{invitedUser.avatars[4]}} 3x">
                  </umb-avatar>
              </a>
            
          </ng-form>
        </div>

        <h1 style="margin-bottom: 10px;">Upload a photo</h1>
        <p style="text-align: center; margin-bottom: 25px; line-height: 1.6em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>
        <div class="flex justify-center items-center">
          <umb-button type="button"
                      button-style="success"
                      label="Get started"
                      action="getStarted()">
          </umb-button>
          <umb-button ng-if="!avatarFile.uploaded"
                      type="button"
                      button-style="link"
                      label="Skip"
                      action="getStarted()">
          </umb-button>
        </div>
      </div>

    </div>

    <div ng-show="invitedUser == null" class="umb-login-container">

      <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>
          </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>

          <form method="POST" name="loginForm" ng-submit="loginSubmit(login, password)">

            <div class="control-group" ng-show="loginForm.$invalid">
              <div class="text-error">{{errorMsg}}</div>
            </div>

            <div class="control-group" ng-class="{error: loginForm.username.$invalid}">
              <label><localize key="general_username">Username</localize></label>
              <input type="text" ng-model="login" name="username" class="-full-width-input" localize="placeholder" placeholder="@placeholders_usernameHint" />
            </div>

            <div class="control-group" ng-class="{error: loginForm.password.$invalid}">
              <label><localize key="general_password">Password</localize></label>
              <input type="password" ng-model="password" name="password" class="-full-width-input" localize="placeholder" placeholder="@placeholders_password" autocomplete="off" />
            </div>

            <div class="flex justify-between items-center">
              <button type="submit" class="btn btn-success" val-trigger-change="#login .form input"><localize key="general_login">Login</localize></button>
              <div ng-show="allowPasswordReset">
                <a class="muted" style="text-decoration: underline;" href="#" prevent-default ng-click="showRequestPasswordReset()"><localize key="login_forgottenPassword">Forgotten password?</localize></a>
              </div>
            </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}">
              <label><localize key="general_email">Email</localize></label>
              <input type="email" ng-model="email" name="email" class="-full-width-input" 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>

            <div class="flex justify-between items-center">
              <button type="submit" class="btn btn-success" val-trigger-change="#login .form input"><localize key="general_submit">Submit</localize></button>
              <a class="muted" href="#" prevent-default ng-click="showLogin()" style="text-decoration: underline;"><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}">
              <label><localize key="user_newPassword">New password</localize></label>
              <input type="password" ng-model="password" name="password" class="-full-width-input" localize="placeholder" placeholder="@placeholders_password" />
            </div>

            <div ng-hide="resetComplete" class="control-group" ng-class="{error: setPasswordForm.confirmPassword.$invalid}">
              <label><localize key="user_confirmNewPassword">Confirm new password</localize></label>
              <input type="password" ng-model="confirmPassword" name="confirmPassword" class="-full-width-input" 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>

            <div class="flex justify-between items-center">
              <button ng-hide="resetComplete" type="submit" class="btn btn-success" val-trigger-change="#login .form input"><localize key="general_submit">Submit</localize></button>
              <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>
</div>