{{#login-modal loginName=loginName loginPassword=loginPassword secondFactorToken=secondFactorToken action=(action "login")}}
  {{plugin-outlet name="login-before-modal-body" tagName=""}}
  {{#d-modal-body class=modalBodyClasses}}

    {{#if canLoginLocal}}
      <div class="login-left-side">
        <div class="login-welcome-header">
          <h1 class="login-title">{{i18n "login.header_title"}}</h1> <img src={{wavingHandURL}} alt="" class="waving-hand">
          <p class="login-subheader">{{i18n "login.subheader_title"}}</p>
        </div>
        <form id="login-form" method="post">
          <div id="credentials" class={{credentialsClass}}>
            <div class="input-group">
              {{input value=loginName type="email" id="login-account-name" class=(value-entered loginName) autocomplete="username" autocorrect="off" autocapitalize="off" disabled=showSecondFactor autofocus="autofocus"}}
              <label class="alt-placeholder" for="login-account-name">{{i18n "login.email_placeholder"}}</label>
              {{#if showLoginWithEmailLink}}
                <a href class={{if loginName "" "no-login-filled"}} id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
                  {{i18n "email_login.login_link"}}
                </a>
              {{/if}}
            </div>
            <div class="input-group">
              {{input value=loginPassword type="password" class=(value-entered loginPassword) id="login-account-password" autocomplete="current-password" maxlength="200" capsLockOn=capsLockOn disabled=disableLoginFields}}
              <label class="alt-placeholder" for="login-account-password">{{i18n "login.password"}}</label>
              <a href id="forgot-password-link" {{action "forgotPassword"}}>{{i18n "forgot_password.action"}}</a>
              <div class="caps-lock-warning {{unless capsLockOn "hidden"}}">{{d-icon "exclamation-triangle"}} {{i18n "login.caps_lock_warning"}}</div>
            </div>
          </div>
          {{#second-factor-form
            secondFactorMethod=secondFactorMethod
            secondFactorToken=secondFactorToken
            class=secondFactorClass
            backupEnabled=backupEnabled
            isLogin=true}}
            {{#if showSecurityKey}}
              {{#security-key-form
                allowedCredentialIds=securityKeyAllowedCredentialIds
                challenge=securityKeyChallenge
                showSecurityKey=showSecurityKey
                showSecondFactor=showSecondFactor
                secondFactorMethod=secondFactorMethod
                otherMethodAllowed=otherMethodAllowed
                action=(action "authenticateSecurityKey")}}
              {{/security-key-form}}
            {{else}}
              {{second-factor-input value=secondFactorToken inputId="login-second-factor" secondFactorMethod=secondFactorMethod backupEnabled=backupEnabled}}
            {{/if}}
          {{/second-factor-form}}
        </form>
        <div class="modal-footer">
          {{#if canLoginLocal}}
            {{#unless showSecurityKey }}
              {{d-button
                action=(action "login")
                id="login-button"
                form="login-form"
                icon="unlock"
                label=loginButtonLabel
                disabled=loginDisabled
                class="btn btn-large btn-primary"}}
            {{/unless}}

            {{#if showSignupLink}}
              {{d-button
                class="btn-large"
                id="new-account-link"
                action=(action "createAccount")
                label="create_account.title"}}
            {{/if}}
          {{/if}}
          {{conditional-loading-spinner condition=showSpinner size="small"}}
        </div>
      </div>
    {{/if}}
    {{#if showLoginButtons}}
      {{#if noLoginLocal}}
        <div class="login-left-side">
          <div class="login-welcome-header">
            <h1 class="login-title">{{i18n "login.header_title"}}</h1> <img src={{wavingHandURL}} alt="" class="waving-hand">
            <p class="login-subheader">{{i18n "login.subheader_title"}}</p>
          </div>
        </div>
      {{/if}}

      <div class="login-right-side">
        {{login-buttons externalLogin=(action "externalLogin")}}
      </div>
    {{/if}}
  {{/d-modal-body}}

  {{plugin-outlet name="login-after-modal-footer" tagName=""}}

  <div class={{alertClass}} id="login-alert">{{alert}}</div>
{{/login-modal}}
