{{#if this.toolbarContainer}}
  {{#in-element this.toolbarContainer}}
    <RenderTreeToolbar
      @clearProfiles={{this.clearProfiles}}
      @refreshPage={{this.adapter.refreshPage}}
      @searchValue={{this.searchValue}}
      @showEmpty={{this.showEmpty}}
      @shouldHighlightRender={{this.shouldHighlightRender}}
      @updateShouldHighlightRender={{this.updateShouldHighlightRender}}
      @isHighlightEnabled={{this.isHighlightEnabled}}
    />
  {{/in-element}}
{{/if}}

{{#unless this.isWarningClosed}}
  <Ui::WarningMessage @close={{this.closeWarning}}>
    Render times may be inaccurate due to instrumentation and environment
  </Ui::WarningMessage>
{{/unless}}

{{#if this.showEmpty}}
  <Ui::EmptyMessage class="js-render-tree-empty">
    <p>
      No rendering metrics have been collected. Try reloading or navigating around your application.
    </p>
    <p>
      <strong>
        Note:
      </strong>
      Very fast rendering times (&lt;1ms) are excluded.
    </p>
    <button
      class="js-toolbar-page-refresh-btn"
      type="button"
      {{on "click" this.adapter.refreshPage}}
    >
      Reload
    </button>
  </Ui::EmptyMessage>
{{else}}
  <List
    class="js-render-tree list-css-striping"
    @headerHeight={{this.headerHeight}}
    @schema={{schema-for "render-tree"}} as |list|
  >
    <tbody>
      {{#each this.filtered as |item|}}
        <RenderItem @model={{item}} @search={{this.search}} @list={{list}} />
      {{/each}}
    </tbody>
  </List>
{{/if}}