<div class="FreestyleUsageControls" {{this.setup}}>
  {{#if this.showHeader}}
    <div class="FreestyleUsageControls-header">
      Settings
    </div>
  {{/if}}
  <div class="FreestyleUsageControls-item">
    <div class="FreestyleUsageControls-itemControl">
      <label class="FreestyleUsageControls-itemLabel">
        <input type="checkbox" checked={{this.showLabels}} {{on 'click' (this.toggle 'showLabels')}} />
        Show Labels
      </label>
    </div>
  </div>
  <div class="FreestyleUsageControls-item">
    <div class="FreestyleUsageControls-itemControl">
      <label class="FreestyleUsageControls-itemLabel">
        <input type="checkbox" checked={{this.showNotes}} {{on 'click' (this.toggle 'showNotes')}} />
        Show Notes
      </label>
    </div>
  </div>
  <div class="FreestyleUsageControls-item">
    <div class="FreestyleUsageControls-itemControl">
      <label class="FreestyleUsageControls-itemLabel">
        <input type="checkbox" checked={{this.showCode}} {{on 'click' (this.toggle 'showCode')}} />
        Show Code
      </label>
    </div>
  </div>
  <div class="FreestyleUsageControls-item">
    <div class="FreestyleUsageControls-itemControl">
      <label class="FreestyleUsageControls-itemLabel">
        <input type="checkbox" checked={{this.showApi}} {{on 'click' (this.toggle 'showApi')}} />
        Show API
      </label>
    </div>
  </div>
  {{#if this.showFocus}}
    <div class="FreestyleUsageControls-item FreestyleUsageControls-item--focus">
      <div class="FreestyleUsageControls-itemControl">
        {{!-- template-lint-disable require-input-label --}}
        <input type="text" class="FreestyleUsageControls-input--focus" value={{this.focus}} {{on 'input' this.updateFocus}} {{on 'keydown' this.setFocusOnEnterKey}} />
        <button class="FreestyleUsageControls-button" {{on 'click' this.setFocus}} type="button">Focus</button>
      </div>
    </div>
  {{/if}}
</div>
