<section class='user-content'>

  <form class="form-horizontal">

    <div class="control-group">
      <label class="control-label">{{i18n user.username.title}}</label>
      <div class="controls">
        <span class='static'>{{username}}</span>
        {{#if can_edit_username}}
          {{#link-to "preferences.username" class="btn pad-left"}}<i class="fa fa-pencil"></i>{{/link-to}}
        {{/if}}
      </div>
      <div class='instructions'>
        {{{i18n user.username.short_instructions username="username"}}}
      </div>
    </div>

    {{#if canEditName}}
      <div class="control-group">
        <label class="control-label">{{i18n user.name.title}}</label>
        <div class="controls">
          {{textField value=name classNames="input-xxlarge"}}
        </div>
        <div class='instructions'>
          {{i18n user.name.instructions}}
        </div>
      </div>
    {{/if}}

    <div class="control-group">
      <label class="control-label">{{i18n user.email.title}}</label>
      <div class="controls">
        <span class='static'>{{email}}</span>
        {{#if can_edit_email}}
          {{#link-to "preferences.email" class="btn pad-left no-text"}}<i class="fa fa-pencil"></i>{{/link-to}}
        {{/if}}
      </div>
      <div class='instructions'>
        {{i18n user.email.instructions}}
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">{{i18n user.password.title}}</label>
      <div class="controls">
        <a href="#" {{action changePassword}} class='btn'><i class="fa fa-envelope"></i>
          {{#if no_password}}
            {{i18n user.change_password.set_password}}
          {{else}}
            {{i18n user.change_password.action}}
          {{/if}}
        </a>
        {{passwordProgress}}
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">{{i18n user.avatar.title}}</label>
      <div class="controls">
        {{boundAvatar model imageSize="large"}}
        {{#if allowAvatarUpload}}
          <button {{action showAvatarSelector}} class="btn pad-left no-text"><i class="fa fa-pencil"></i></button>
        {{else}}
          <a href="//gravatar.com/emails" target="_blank" title="{{i18n user.change_avatar.gravatar_title}}" class="btn no-text"><i class="fa fa-pencil"></i></a>
        {{/if}}
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">{{i18n user.bio}}</label>
      <div class="controls">
        {{pagedown value=bio_raw}}
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">{{i18n user.website}}</label>
      <div class="controls">
        {{textField value=website classNames="input-xxlarge"}}
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">{{i18n user.email_settings}}</label>
      <div class="controls">
        {{#if Discourse.SiteSettings.enable_mailing_list_mode}}
          <label>
            {{view Ember.Checkbox checkedBinding="mailing_list_mode"}}
            {{i18n user.mailing_list_mode}}
          </label>
        {{/if}}

        <label>{{view Ember.Checkbox checkedBinding="email_digests"}}
        {{i18n user.email_digests.title}}</label>

        {{#if email_digests}}
          <div class='control-indent'>
            {{combobox valueAttribute="value" content=digestFrequencies value=digest_after_days}}
          </div>
        {{/if}}
        <label>{{view Ember.Checkbox checkedBinding="email_private_messages"}}
        {{i18n user.email_private_messages}}</label>
        <label>{{view Ember.Checkbox checkedBinding="email_direct"}}
        {{i18n user.email_direct}}</label>
        <label>{{view Ember.Checkbox checkedBinding="email_always"}}
        {{i18n user.email_always}}</label>
      </div>
      <div class='instructions'>
        {{i18n user.email.frequency}}
      </div>
    </div>

    <div class="control-group other">

      <label class="control-label">{{i18n user.other_settings}}</label>
      <div class="controls">
        <label>{{i18n user.auto_track_topics}}</label>
        {{combobox valueAttribute="value" content=autoTrackDurations value=auto_track_topics_after_msecs}}
      </div>

      <div class="controls">
        <label>{{i18n user.new_topic_duration.label}}</label>
        {{combobox valueAttribute="value" content=considerNewTopicOptions value=new_topic_duration_minutes}}
      </div>

      <div class="controls">
        <label>{{view Ember.Checkbox checkedBinding="external_links_in_new_tab"}}
        {{i18n user.external_links_in_new_tab}}</label>
        <label>{{view Ember.Checkbox checkedBinding="enable_quoting"}}
        {{i18n user.enable_quoting}}</label>
      </div>

      <div class="controls">
        <label>
          {{view Ember.Checkbox checkedBinding="dynamic_favicon"}}
          {{i18n user.dynamic_favicon}}
        </label>
      </div>

    </div>

    <div class="control-group category">
      <label class="control-label">{{i18n user.categories_settings}}</label>
      <div class="controls">
        <label>{{i18n user.watched_categories}}</label>
        {{category-group categories=watchedCategories}}
      </div>
      <div class="instructions">{{i18n user.watched_categories_instructions}}</div>
      <div class="controls">
        <label>{{i18n user.tracked_categories}}</label>
        {{category-group categories=trackedCategories}}
      </div>
      <div class="instructions">{{i18n user.tracked_categories_instructions}}</div>
      <div class="controls">
        <label>{{i18n user.muted_categories}}</label>
        {{category-group categories=mutedCategories}}
      </div>
      <div class="instructions">{{i18n user.muted_categories_instructions}}</div>
    </div>

    <div class="control-group">
      <div class="controls">
          <button {{action save}} {{bind-attr disabled="saveDisabled"}} class="btn btn-primary">{{saveButtonText}}</button>
          {{#if saved}}{{i18n saved}}{{/if}}
      </div>
    </div>

    {{#if canDeleteAccount}}
      <div class="control-group delete-account">
        <hr/>
        <div class="controls">
            <button {{action delete}} {{bind-attr disabled="deleteDisabled"}} class="btn btn-danger"><i class="fa fa-trash-o"></i> {{i18n user.delete_account}}</button>
        </div>
      </div>
    {{/if}}

  </form>
</section>
