<div class="toolbar">
  <button
    class="{{if @isInspecting "active"}} toolbar-icon-button"
    type="button"
    {{on "click" @toggleInspect}}
  >
    {{svg-jar "inspect" width="16px" height="17px"}}
  </button>

  <Ui::ToolbarDivider />

  <button
    class="toolbar-icon-button"
    title="expand all"
    type="button"
    {{on "click" @expandAll}}
  >
    {{svg-jar "chevron-down" width="16px" height="16px"}}
  </button>

  <button
    class="toolbar-icon-button"
    title="collapse all"
    type="button"
    {{on "click" @collapseAll}}
  >
    {{svg-jar "chevron-right" width="16px" height="16px"}}
  </button>

  <Ui::ToolbarDivider />

  <Ui::ToolbarSearchField
    @clear={{fn (mut @query)}}
    @value={{@query}}
    data-test-filter-views
  />

  <Ui::ToolbarDivider />

  {{#if @pinned}}
    <button
      class="{{if @showParentsOnly "active"}} toolbar-icon-button"
      type="button"
      title="toggle focus mode"
      data-test-toggle-focus
      {{on "click" @toggleParentsOnly}}
    >
      {{svg-jar "focus-point-round" width="16px" height="16px"}}
    </button>
  {{/if}}
</div>