<section class="settings-section">
  <div class="settings-card mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">Settings</h2>
  </div>
  <div class="mdl-card__supporting-text">
    <p>Change your settings</p>
    <ul class="st--list-unstyled user-settings">

      <li class="settings-item">
        <span class="settings-name">Your Name:</span>
        {{#if editMode}}
          {{input value=userName.value}}
        {{else}}
          <span class="settings-value">{{userName.value}}</span>
        {{/if}}
      </li>
      <li class="settings-item">
        <span class="settings-name">Currency:</span>
        {{#if editMode}}
          {{input value=currency.value}}
        {{else}}
          <span class="settings-value">{{currency.value}}</span>
        {{/if}}
      </li>
    </ul>

  </div>
  <div class="mdl-card__actions mdl-card--border text-right">
    {{#if editMode}}
      <button class="mdl-button mdl-button--colored mdl-js-button" {{action "editMode" false}}>Reset</button>
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" {{action "updateSettings"}}>save</button>
    {{else}}
      <button class="mdl-button mdl-button--colored mdl-js-button" {{action "editMode" true}}>edit</button>
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" disabled>save</button>
    {{/if}}
  </div>
</div>
</section>

<section class="settings-section">
  <div class="settings-card mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">Settings</h2>
  </div>
  <div class="mdl-card__supporting-text">
    <p>Change your settings</p>
    <ul class="st--list-unstyled user-settings">

      {{user-setting setting=userName class="settings-item"}}

      {{user-setting setting=currency class="settings-item"}}

    </ul>

  </div>
  <div class="mdl-card__actions mdl-card--border text-right">
    {{#link-to 'home' class="mdl-button mdl-button--colored mdl-js-button" id="close-settings-btn"}}
      close
    {{/link-to}}
  </div>
</div>
</section>

Move each setting to its component
refactor: Move each setting to its component

