<div class="control-group pref-username">
  <label class="control-label">{{i18n "user.username.title"}}</label>
  <UsernamePreference @user={{this.model}} />
</div>

{{#unless this.siteSettings.discourse_connect_overrides_avatar}}
  <div class="control-group pref-avatar">
    <label class="control-label" id="profile-picture">{{i18n
        "user.avatar.title"
      }}</label>
    <div class="controls">
      {{! we want the "huge" version even though we're downsizing it in CSS }}
      {{bound-avatar this.model "huge"}}
      <DButton
        @action={{route-action "showAvatarSelector"}}
        @actionParam={{this.model}}
        @class="btn-default pad-left"
        @icon="pencil-alt"
      />
    </div>
  </div>
{{/unless}}

{{#if this.canCheckEmails}}
  <div class="control-group pref-email">
    <label class="control-label">{{i18n "user.email.title"}}</label>
    {{#if this.model.email}}
      {{#if this.siteSettings.enable_secondary_emails}}
        <div class="emails">
          {{#each this.emails as |email|}}
            <div class="row email">
              {{#if this.model.can_edit_email}}
                <EmailDropdown
                  @email={{email}}
                  @setPrimaryEmail={{action "setPrimaryEmail"}}
                  @destroyEmail={{action "destroyEmail"}}
                />
              {{/if}}

              <div class="email-first">{{email.email}}</div>

              <div class="email-second">
                {{#if email.primary}}
                  <span class="primary">{{i18n
                      "user.email.primary_label"
                    }}</span>
                {{/if}}

                {{#unless email.confirmed}}
                  <span class="unconfirmed">{{i18n
                      "user.email.unconfirmed_label"
                    }}</span>
                  &bull;
                  {{#if email.resending}}
                    <span>{{i18n "user.email.resending_label"}}</span>
                  {{else if email.resent}}
                    <span>{{i18n "user.email.resent_label"}}</span>
                  {{else}}
                    <a
                      {{on "click" (fn this.resendConfirmationEmail email)}}
                      href
                    >{{i18n "user.email.resend_label"}}</a>
                  {{/if}}
                {{/unless}}
              </div>
            </div>
          {{/each}}
        </div>

        {{#if this.model.can_edit_email}}
          <LinkTo
            @route="preferences.email"
            @query={{hash new=1}}
            class="pull-right"
          >
            {{d-icon "plus"}}
            {{i18n "user.email.add_email"}}
          </LinkTo>
        {{/if}}
      {{else}}
        <div class="controls">
          <span class="static">{{this.model.email}}</span>
          {{#if this.model.can_edit_email}}
            <LinkTo
              @route="preferences.email"
              class="btn btn-default btn-small btn-icon pad-left no-text"
            >{{d-icon "pencil-alt"}}</LinkTo>
          {{/if}}
        </div>
      {{/if}}

      <div class="instructions">
        {{#if this.siteSettings.auth_overrides_email}}
          {{i18n "user.email.auth_override_instructions"}}
        {{/if}}
        {{i18n "user.email.instructions"}}
      </div>
    {{else}}
      <div class="controls">
        <DButton
          @action={{route-action "checkEmail"}}
          @class="btn-default"
          @actionParam={{this.model}}
          @title="admin.users.check_email.title"
          @icon="envelope"
          @label="admin.users.check_email.text"
        />
      </div>
    {{/if}}
  </div>
{{/if}}

{{#if this.canUpdateAssociatedAccounts}}
  <div class="control-group pref-associated-accounts">
    <label class="control-label">{{i18n
        "user.associated_accounts.title"
      }}</label>
    {{#if this.associatedAccountsLoaded}}
      <table>
        <tbody>
          {{#each this.authProviders as |authProvider|}}
            {{#if authProvider.account}}
              <tr
                class="{{dasherize authProvider.method.name}} account-connected"
              >
                <td>{{authProvider.method.prettyName}}</td>
                <td>{{authProvider.account.description}}</td>
                <td>
                  {{#if authProvider.method.can_revoke}}
                    <DButton
                      @action={{action "revokeAccount"}}
                      @actionParam={{authProvider.account}}
                      @title="user.associated_accounts.revoke"
                      @class="btn-danger no-text"
                      @icon="trash-alt"
                      @disabled={{get this.revoking authProvider.method.name}}
                    />
                  {{/if}}
                </td>
              </tr>
            {{else}}
              <tr class={{dasherize authProvider.method.name}}>
                <td>{{authProvider.method.prettyName}}</td>
                <td colspan="2">
                  {{#if authProvider.method.can_connect}}
                    <DButton
                      @action={{action "connectAccount"}}
                      @actionParam={{authProvider.method}}
                      @label="user.associated_accounts.connect"
                      @class="btn-default"
                      @icon="plug"
                      @disabled={{this.disableConnectButtons}}
                    />
                  {{else}}
                    {{i18n "user.associated_accounts.not_connected"}}
                  {{/if}}
                </td>
              </tr>
            {{/if}}
          {{/each}}
        </tbody>
      </table>
    {{else}}
      <div class="controls">
        <DButton
          @action={{route-action "checkEmail"}}
          @actionParam={{this.model}}
          @title="admin.users.check_email.title"
          @icon="envelope"
          @label="admin.users.check_email.text"
        />
      </div>
    {{/if}}
  </div>
{{/if}}

{{#if this.canEditName}}
  <div class="control-group pref-name">
    <label class="control-label">{{i18n "user.name.title"}}</label>
    <div class="controls">
      {{#if this.model.can_edit_name}}
        <TextField
          @value={{this.newNameInput}}
          @classNames="input-xxlarge"
          @maxlength="255"
        />
      {{else}}
        <span class="static">{{this.model.name}}</span>
      {{/if}}
    </div>
    <div class="instructions">
      {{this.nameInstructions}}
    </div>
  </div>
{{/if}}

{{#if this.canSelectTitle}}
  <div class="control-group pref-title">
    <label class="control-label">{{i18n "user.title.title"}}</label>
    <div class="controls">
      <ComboBox
        @value={{this.newTitleInput}}
        @content={{this.model.availableTitles}}
        @onChange={{action (mut this.newTitleInput)}}
        @options={{hash none="user.title.none"}}
      />
    </div>
    <div class="instructions">
      {{i18n "user.title.instructions"}}
    </div>
  </div>
{{/if}}

{{#if this.canSelectFlair}}
  <div class="control-group pref-flair">
    <label class="control-label">{{i18n "user.flair.title"}}</label>
    <div class="controls">
      <FlairChooser
        @value={{this.newFlairGroupId}}
        @content={{this.model.availableFlairs}}
        @onChange={{action (mut this.newFlairGroupId)}}
        @options={{hash none="user.flair.none"}}
      />
    </div>
    <div class="instructions">
      {{i18n "user.flair.instructions"}}
    </div>
  </div>
{{/if}}

{{#if this.canSelectUserStatus}}
  <div class="control-group pref-user-status">
    <label class="control-label">{{i18n "user.status.title"}}</label>
    <div class="controls">
      {{#if this.newStatus}}
        <UserStatusMessage
          @status={{this.newStatus}}
          @showDescription={{true}}
        />
      {{else}}
        <span class="static">{{i18n "user.status.not_set"}}</span>
      {{/if}}
      <DButton
        @action={{action "showUserStatusModal"}}
        @actionParam={{this.newStatus}}
        @class="btn-default btn-small pad-left"
        @icon="pencil-alt"
      />
    </div>
  </div>
{{/if}}

{{#if this.canSelectPrimaryGroup}}
  <div class="control-group pref-primary-group">
    <label class="control-label">{{i18n "user.primary_group.title"}}</label>
    <div class="controls">
      <ComboBox
        @value={{this.newPrimaryGroupInput}}
        @content={{this.model.filteredGroups}}
        @options={{hash none="user.primary_group.none"}}
      />
    </div>
  </div>
{{/if}}

{{#if this.canDownloadPosts}}
  <div class="control-group pref-data-export">
    <label class="control-label">{{i18n "user.download_archive.title"}}</label>
    <div class="controls">
      <DButton
        @action={{action "exportUserArchive"}}
        @class="btn-default btn-request-archive"
        @label="user.download_archive.button_text"
        @icon="download"
      />
    </div>
    <div class="instructions">
      {{i18n "user.download_archive.description"}}
    </div>
  </div>
{{/if}}

<span>
  <PluginOutlet
    @name="user-preferences-account"
    @connectorTagName="div"
    @outletArgs={{hash model=this.model save=(action "save")}}
  />
</span>

<br />

<span>
  <PluginOutlet
    @name="user-custom-controls"
    @connectorTagName="div"
    @outletArgs={{hash model=this.model}}
  />
</span>

{{#if this.canSaveUser}}
  <SaveControls
    @model={{this.model}}
    @action={{action "save"}}
    @saved={{this.saved}}
  />
{{/if}}

{{#if this.model.canDeleteAccount}}
  <div class="control-group delete-account">
    <br />
    <div class="controls">
      <DButton
        @action={{action "delete"}}
        @disabled={{this.deleteDisabled}}
        @class="btn-danger"
        @icon="far-trash-alt"
        @label="user.delete_account"
      />
    </div>
  </div>
{{/if}}