<div class="editor-heading">
  <h4>{{t 'layout.sectionStyleEditor.title' }}</h4>
</div>
<form class="editor-body">
  <div class="form-group">
    <label for="sectionTextColor">{{t 'layout.sectionStyleEditor.textColor' }} <span class="glyphicon glyphicon-info-sign" title="{{t 'layout.sectionStyleEditor.textColorTooltip'}}" data-toggle="tooltip" data-placement="right"></span></label>
    {{#bs-colorpicker color=color format="hex" classNames="input-group"}}
      <input type="text" value="" name="sectionTextColor" class="form-control" />
      <span class="input-group-addon"><i></i></span>
    {{/bs-colorpicker}}
  </div>
  <div class="form-group">
    <label for="sectionBgColor">{{t 'layout.sectionStyleEditor.backgroundColor' }}</label>
    {{#bs-colorpicker color=bgColor format="hex" classNames="input-group"}}
      <input type="text" value="" name="sectionBgColor" class="form-control" />
      <span class="input-group-addon"><i></i></span>
    {{/bs-colorpicker}}
  </div>
  <div class="form-group">
    <label for="sectionBgImage">{{t 'layout.sectionStyleEditor.backgroundImage'}}</label>
    {{input class="form-control" value=model.style.background.image name="sectionBgImage" placeholder=(t 'shared.editors.urlPlaceholder') input=(action "modelChanged") }}
  </div>
  {{#if model.style.background.image}}
     <div class="checkbox">
       <label >
      {{input type="checkbox" checked=model.style.background.darken}} {{t 'layout.sectionStyleEditor.darkenImage'}}
      </label>
    </div>
  {{/if}}


</form>
