<DModalBody @title="user.change_avatar.title" @class="avatar-selector">
  {{#if this.showSelectableAvatars}}
    <div class="selectable-avatars">
      {{#each this.selectableAvatars as |avatar|}}
        <a
          href
          class="selectable-avatar"
          {{on "click" (fn this.selectAvatar avatar)}}
        >
          {{bound-avatar-template avatar "huge"}}
        </a>
      {{/each}}
    </div>
    {{#if this.showAvatarUploader}}
      <h4>{{html-safe (i18n "user.change_avatar.use_custom")}}</h4>
    {{/if}}
  {{/if}}
  {{#if this.showAvatarUploader}}
    {{#if this.user.use_logo_small_as_avatar}}
      <div class="avatar-choice">
        <RadioButton
          @id="logo-small"
          @name="logo"
          @value="logo"
          @selection={{this.selected}}
        />
        <label class="radio" for="logo-small">{{bound-avatar-template
            this.siteSettings.site_logo_small_url
            "large"
          }}
          {{html-safe (i18n "user.change_avatar.logo_small")}}</label>
      </div>
    {{/if}}
    <div class="avatar-choice">
      <RadioButton
        @id="system-avatar"
        @name="avatar"
        @value="system"
        @selection={{this.selected}}
      />
      <label class="radio" for="system-avatar">{{bound-avatar-template
          this.user.system_avatar_template
          "large"
        }}
        {{html-safe (i18n "user.change_avatar.letter_based")}}</label>
    </div>
    {{#if this.allowAvatarUpload}}
      <div class="avatar-choice">
        <RadioButton
          @id="gravatar"
          @name="avatar"
          @value="gravatar"
          @selection={{this.selected}}
        />
        <label class="radio" for="gravatar">{{bound-avatar-template
            this.user.gravatar_avatar_template
            "large"
          }}
          <span>{{html-safe
              (i18n
                "user.change_avatar.gravatar"
                gravatarName=this.gravatarName
                gravatarBaseUrl=this.gravatarBaseUrl
                gravatarLoginUrl=this.gravatarLoginUrl
              )
            }}
            {{this.user.email}}</span></label>

        <DButton
          @action={{action "refreshGravatar"}}
          @translatedTitle={{i18n
            "user.change_avatar.refresh_gravatar_title"
            gravatarName=this.gravatarName
          }}
          @disabled={{this.gravatarRefreshDisabled}}
          @icon="sync"
          @class="btn-default avatar-selector-refresh-gravatar"
        />

        {{#if this.gravatarFailed}}
          <p class="error">{{I18n
              "user.change_avatar.gravatar_failed"
              gravatarName=this.gravatarName
            }}</p>
        {{/if}}
      </div>
      <div class="avatar-choice">
        <RadioButton
          @id="uploaded-avatar"
          @name="avatar"
          @value="custom"
          @selection={{this.selected}}
        />
        <label class="radio" for="uploaded-avatar">
          {{#if this.user.custom_avatar_template}}
            {{bound-avatar-template this.user.custom_avatar_template "large"}}
            {{i18n "user.change_avatar.uploaded_avatar"}}
          {{else}}
            {{i18n "user.change_avatar.uploaded_avatar_empty"}}
          {{/if}}
        </label>
        <AvatarUploader
          @user_id={{this.user.id}}
          @uploadedAvatarTemplate={{this.user.custom_avatar_template}}
          @uploadedAvatarId={{this.user.custom_avatar_upload_id}}
          @uploading={{this.uploading}}
          @class="avatar-uploader"
          @id="avatar-uploader"
          @done={{action "uploadComplete"}}
        />
      </div>
    {{/if}}
  {{/if}}
</DModalBody>

{{#if this.showAvatarUploader}}
  <div class="modal-footer">
    <DButton
      @action={{action "saveAvatarSelection"}}
      @class="btn-primary"
      @disabled={{this.submitDisabled}}
      @label="save"
    />
    <DModalCancel @close={{route-action "closeModal"}} />
  </div>
{{/if}}