<h2>{{t 'userPreferencesPage.theme.header'}}</h2>
<div class="box">
  <div class="container-theme-toggle row">
    <div class="col span-4 bg-default {{if (eq theme 'ui-light') 'active' ''}}" {{action 'changeTheme' 'ui-light'}}>
      <i class="icon icon-sun icon-3x vertical-middle"></i>
      <p class="vertical-middle">
        {{t 'userPreferencesPage.theme.light'}}
      </p>
    </div>
    <div class="col span-4 bg-default {{if (eq theme 'ui-auto') 'active' ''}}"  {{action 'changeTheme' 'ui-auto'}} >
      <i class="icon icon-auto icon-3x vertical-middle"></i>
      <p class="vertical-middle">
        {{t 'userPreferencesPage.theme.auto'}}
      </p>
    </div>
    <div class="col span-4 bg-default {{if (eq theme 'ui-dark') 'active' ''}}" {{action 'changeTheme' 'ui-dark'}} >
      <i class="icon icon-moon icon-3x vertical-middle"></i>
      <p class="vertical-middle">
        {{t 'userPreferencesPage.theme.dark'}}
      </p>
    </div>
  </div>
  <p class="help-block text-center">{{t 'userPreferencesPage.theme.autoDetail'}}</p>
</div>
