<div class="layer-group-toggle-header layer-{{dasherize this.label}}">
  <div class="grid-x">
    <div class="cell auto ">
      <div class="switch tiny float-left">
        <input id="layer-{{dasherize this.label}}" class="switch-input" type="checkbox" checked={{if this.active 'checked'}}>
        <label {{action 'toggle'}} for="layer-{{dasherize this.label}}" class="switch-paddle">
          <span class="show-for-sr">Toggle Layer Group</span>
        </label>
      </div>
      <span {{action 'toggle' preventDefault=false}} class="layer-group-toggle-label" role="button">
        {{this.label}}
        {{#if this.active}}
          {{#if this.icon}}
            {{deprecated/legend-icon icon=this.icon}}
          {{/if}}
        {{/if}}
      </span>
    </div>
    <div class="cell shrink layer-group-toggle-icons">
      {{#if (and this.activeTooltip this.active)}}
        {{deprecated/icon-tooltip tip=this.activeTooltip icon=this.activeTooltipIcon side='left' fixedWith=true}}
      {{/if}}
      {{#if this.infoLink}}
        <a href="{{this.infoLink}}" target="_blank" class="info-link" rel="noopener noreferrer"><FaIcon @icon={{this.infoLinkIcon}} @fixedWidth={{true}} /></a>
      {{/if}}
      {{#if this.tooltip}}
        {{deprecated/icon-tooltip tip=this.tooltip icon=this.tooltipIcon side='left' fixedWidth=true}}
      {{/if}}
    </div>
  </div>
</div>
{{#if this.active}}
  <div class="layer-group-toggle-content">
    {{yield}}
  </div>
{{/if}}
