discourse/app/assets/javascripts/admin/templates/customize_css_html.hbs

<div class='content-list span6'>
  <h3>{{i18n 'admin.customize.css_html.long_title'}}</h3>
  <ul>
    {{#each style in model}}
      <li><a {{action "selectStyle" style}} {{bind-attr class="style.selected:active"}}>{{style.description}}</a></li>
    {{/each}}
  </ul>
  <button {{action "newCustomization"}} class='btn'>
    {{fa-icon "plus"}}{{i18n 'admin.customize.new'}}
  </button>
</div>

{{#if selectedItem}}
  <div {{bind-attr class=":current-style view.maximized:maximized"}}>
    <div class='wrapper'>
      {{text-field class="style-name" value=selectedItem.name}}

      <div class='admin-controls'>
        <ul class="nav nav-pills">
          <li><a {{bind-attr class="view.stylesheetActive:active"}} {{action "selectStylesheet" target="view"}}>{{i18n 'admin.customize.css'}}</a></li>
          <li><a {{bind-attr class="view.headerActive:active"}} {{action "selectHeader" target="view"}}>{{i18n 'admin.customize.header'}}</a></li>
          <li><a {{bind-attr class="view.footerActive:active"}} {{action "selectFooter" target="view"}}>{{i18n 'admin.customize.footer'}}</a></li>
          <li><a {{bind-attr class="view.mobileStylesheetActive:active"}} {{action "selectMobileStylesheet" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.css'}}</a></li>
          <li><a {{bind-attr class="view.mobileHeaderActive:active"}} {{action "selectMobileHeader" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.header'}}</a></li>
          <li><a {{bind-attr class="view.mobileFooterActive:active"}} {{action "selectMobileFooter" target="view"}}>{{fa-icon "mobile"}}&nbsp;{{i18n 'admin.customize.footer'}}</a></li>
          <li class='toggle-maximize'><a {{action "toggleMaximize" target="view"}}>
            {{#if view.maximized}}
              {{fa-icon "compress"}}
            {{else}}
              {{fa-icon "expand"}}
            {{/if}}
          </a>
        </ul>
      </div>

      <div class="admin-container">
        {{#if view.stylesheetActive}}{{aceEditor content=selectedItem.stylesheet mode="scss"}}{{/if}}
        {{#if view.headerActive}}{{aceEditor content=selectedItem.header mode="html"}}{{/if}}
        {{#if view.footerActive}}{{aceEditor content=selectedItem.footer mode="html"}}{{/if}}
        {{#if view.mobileStylesheetActive}}{{aceEditor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
        {{#if view.mobileHeaderActive}}{{aceEditor content=selectedItem.mobile_header mode="html"}}{{/if}}
        {{#if view.mobileFooterActive}}{{aceEditor content=selectedItem.mobile_footer mode="html"}}{{/if}}
      </div>
      <div class='admin-footer'>
        <div class='status-actions'>
          <span>{{i18n 'admin.customize.enabled'}}  {{input type="checkbox" checked=selectedItem.enabled}}</span>
          {{#unless selectedItem.changed}}
          <a class='preview-link' {{bind-attr href="selectedItem.previewUrl"}} target='_blank' title="{{i18n 'admin.customize.explain_preview'}}">{{i18n 'admin.customize.preview'}}</a>
          |
          <a href="/?preview-style=" target='_blank' title="{{i18n 'admin.customize.explain_undo_preview'}}">{{i18n 'admin.customize.undo_preview'}}</a>
          |
          <a href="/?preview-style=default" target='_blank' title="{{i18n 'admin.customize.explain_rescue_preview'}}">{{i18n 'admin.customize.rescue_preview'}}</a><br>
          {{/unless}}
        </div>

        <div class='buttons'>
          <button {{action "save"}} {{bind-attr disabled="selectedItem.disableSave"}} class='btn'>{{i18n 'admin.customize.save'}}</button>
          <span class='saving'>{{selectedItem.savingStatus}}</span>
          <a {{action "destroy"}} class='delete-link'>{{i18n 'admin.customize.delete'}}</a>
        </div>
      </div>
    </div>
  </div>
{{else}}
  <p class="about">{{i18n 'admin.customize.about'}}</p>
{{/if}}