{{#if this.toolbarContainer}}
  {{#in-element this.toolbarContainer}}
    <DeprecationsToolbar
      @changeDeprecationWorkflow={{this.changeDeprecationWorkflow}}
      @clear={{this.clear}}
      @searchValue={{this.searchValue}}
      @toggleDeprecationWorkflow={{this.toggleDeprecationWorkflow}}
    />
  {{/in-element}}
{{/if}}

{{#if this.filtered.length}}
  <div class="list-content js-deprecations">
    <VerticalCollection @items={{this.filtered}} @estimateHeight={{20}} as |content|>
      <DeprecationItem
        @model={{content}}
        @openResource={{this.openResource}}
        @traceSource={{this.traceSource}}
        @traceDeprecations={{this.traceDeprecations}}
      />
      </VerticalCollection>
  </div>
{{else}}
  <Ui::EmptyMessage class="js-page-refresh">
    <p>
      No deprecations have been detected. Try reloading to catch the
      deprecations that were logged before you opened the inspector.
    </p>
    <button
      class="js-page-refresh-btn"
      type="button"
      {{on "click" this.adapter.refreshPage}}
    >
      Reload
    </button>
  </Ui::EmptyMessage>
{{/if}}