<div class="container invites-show clearfix">

  <h2>{{welcomeTitle}}</h2>

  <div class="two-col">
    <div class="col-image">
      <img src={{inviteImageUrl}}>
    </div>

    <div class="col-form">
      {{#if successMessage}}
        <br><br>
        <div class='alert alert-info'><p>{{{successMessage}}}</p></div>
      {{else}}
        <p>{{i18n 'invites.invited_by'}}</p>
        <p>{{user-info user=invitedBy}}</p>

        <p>{{{yourEmailMessage}}}
        {{#if externalAuthsEnabled}}
             {{i18n 'invites.social_login_available'}}
        {{/if}}
        </p>

        <form>
          <div class="input username-input">
            <label>{{i18n 'user.username.title'}}</label>
            {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="discourse"}}
            &nbsp;{{input-tip validation=usernameValidation id="username-validation"}}
            <div class="instructions">{{i18n 'user.username.instructions'}}</div>
          </div>

          {{#if fullnameRequired}}
            <div class="input name-input">
              <label>{{i18n 'invites.name_label'}}</label>
              {{input value=accountName id="new-account-name" name="name"}}
              <div class="instructions">{{nameInstructions}}</div>
            </div>
          {{/if}}

          <div class="input password-input">
            <label>{{i18n 'invites.password_label'}}</label>
            {{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn}}
            &nbsp;{{input-tip validation=passwordValidation}}
            <div class="instructions">
              {{passwordInstructions}} {{i18n 'invites.optional_description'}}
              <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">
                {{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div>
            </div>
          </div>

          {{#if userFields}}
            <div class='user-fields'>
              {{#each userFields as |f|}}
                {{user-field field=f.field value=f.value}}
              {{/each}}
            </div>
          {{/if}}

          {{d-button
            class="btn-primary"
            action=(action "submit")
            type="submit"
            disabled=submitDisabled
            label="invites.accept_invite"}}

          {{#if errorMessage}}
            <br><br>
            <div class='alert alert-error'>{{errorMessage}}</div>
          {{/if}}
        </form>
      {{/if}}
    </div>
  </div>
</div>
