<form {{action 'updateSettings' on='submit'}} id="user_profile_settings_form">
  <div class="section-header">
    <div class="header-content">
      <p class="title">{{i18n 'Profile Settings'}}</p>
      <p class="desc">{{i18n 'Update your display name, email and profile photo'}}</p>
    </div>
  </div>
  <fieldset class="clearfix">
    <div class="label-wrapper">
      <label>{{i18n 'Display Name'}}</label>
    </div>
    {{#if displayNameMicroCopy}}
      <div class="cl-input-container">
        {{input class='text translated-display-name-selector' required='required' value=updatedDisplayName}}
        <p class="form_microcopy">{{displayNameMicroCopy}}</p>
      </div>
    {{else}}
      <div class="cl-input-container">
        {{input class='text' required='required' value=updatedDisplayName}}
        <p class="form_microcopy">{{i18n 'Customize capitalization for your username.'}}</p>
      </div>
    {{/if}}
  </fieldset>
  <fieldset class="clearfix">
    <div class="label-wrapper">
      <label>{{i18n 'Username'}}</label>
    </div>
    <div class="cl-input-container">
      {{input class='text' disabled='disabled' required='required' value=user.name}}
      <p class="form_microcopy">{{i18n 'This is the name you log in with. It cannot be changed.'}}</p>
    </div>
  </fieldset>
  <div class="input string">
    <fieldset class="clearfix">
      <div class="label-wrapper">
        <label>{{i18n 'Email'}}</label>
      </div>
      <div class="cl-input-container">
        {{input class='text' id="user_email" required='required' value=user.email}}
        {{#unless session.userData.account_verified}}
          <button class="button" href="#"{{action 'verifyEmail'}} style="float:right; margin-top: -50px;">
            {{i18n 'Verify'}}
          </button>
          <p class="form_microcopy">{{i18n 'Verify your email address to receive communications.'}}</p>
        {{/unless}}
      </div>
    </fieldset>
  </div>
  <div class="input upload">
    <fieldset class="clearfix">
      <div class="label-wrapper">
        <label>{{i18n 'Profile Picture'}}</label>
      </div>
      <div class="cl-input-container">
        <div class="upload">
          {{#if (and user.logo (not-eq user.logo defaultLogo))}}
            <div class="{{if settings.removeProfilePicture 'hide'}} profile_image img_file">
              <img src="{{user.logo}}" class="img_file">
            </div>
            <div class="boolean uploader">
              {{input class='js-delete-profile-image boolean' type='checkbox' checked=settings.removeProfilePicture}}
              <label class="boolean">{{i18n 'Remove my picture'}}</label>
            </div>
          {{else}}
            <img class="img_file missing_image" src="//www-cdn.jtvnw.net/images/xarth/form/upload_placeholder.png" alt={{i18n 'No image uploaded'}}>
          {{/if}}
          <div class="input file user_profile_image">
            <input type="file" class="file" id="user_profile_image" name="user[profile_image]" accept="image/gif,image/jpeg,image/jpg,image/png">
            <p class="form_microcopy">{{i18n 'Max 3mb GIF, JPG or PNG.'}}</p>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
  <fieldset class="clearfix">
    <div class="label-wrapper">
      <label for="user_description">{{i18n 'Bio'}}</label>
    </div>
    <div class="cl-input-container">
      {{textarea class='text' value=user.bio}}
      <p class="form_microcopy">{{i18n 'Who you are in fewer than 300 characters.'}}</p>
    </div>
  </fieldset>
  <div class="cl-subheader">
    <p>{{i18n 'Disable your Twitch Account'}}</p>
  </div>
  <fieldset class="clearfix">
    <div class="label-wrapper">
      <label>{{i18n 'Disabling your account'}}</label>
    </div>
    <div class="cl-input-container">
      <p>{{i18n 'If you want to disable your Twitch account, you can do so from the '}}<a href="/user/disable_account">{{i18n 'Disable Account'}}</a>{{i18n ' page'}}</p>
    </div>
  </fieldset>
  <div class="clear" id="settings_buttons">
    <button class="button {{if isLoading 'button--disabled'}}" type="submit" disabled={{isLoading}}>
      {{#if isLoading}}
        {{i18n 'Saving'}}
      {{else}}
        {{i18n 'Save Changes'}}
      {{/if}}
    </button>
  </div>
</form>
