<div class="dash-widget js-live-widget {{if isCollapsed 'dash-widget--collapsed'}}">
  <div class="dash-widget__header {{if noPad 'dash-widget__header--no-border'}} {{if isCollapsed 'dash-widget__header--no-border'}} flex flex--verticalCenter js-live-widget__header">
    <button {{action 'collapseWidget'}} class="flex__item button button--icon-only dash-widget__header-left-btn">
      {{svg-icon path='svg/glyph-arr-down' iconModifier='js-dash-collapse dash-widget__collapse-btn'}}
    </button>
    <div class="flex__item flex__item--grow dash-widget__header-title js-live-widget__header">
      {{title}}
    </div>
    <div class="balloon-wrapper">
      <button class="flex__item button button--icon-only dash-widget__header-right-btn {{if hasSettings 'show' 'hide'}}" {{action toggleProperty 'isShowingWidgetSettings'}} data-test-selector="settings-button">
        {{svg-icon path='svg/gear'}}
      </button>
      <div class="balloon balloon--left balloon--dropmenu balloon--toggle {{if isShowingWidgetSettings 'show' 'hide'}}">
        {{yield 'widget-settings'}}
      </div>
    </div>
  </div>
  <div class="dash-widget__body js-live-widget__body {{if noPad 'pd-0'}} {{if fullCol 'dash-widget__body--full-col'}}">
    {{yield 'widget-content'}}
  </div>
</div>
