{{#if this.toolbarContainer}}
  {{#in-element this.toolbarContainer}}
    <RouteTreeToolbar
      @options={{this.options}}
      @searchValue={{this.searchValue}}
    />
  {{/in-element}}
{{/if}}

{{#if this.model.error}}
  <p>
      Routes could not be loaded.
      {{this.model.error}}
  </p>
{{/if}}

<EmberTable as |t|>
  <t.head @columns={{schema-for "route-tree"}} @enableReorder={{false}} />

  <t.body @rows={{this.rows}} @checkboxSelectionMode="none" as |b|>
    <b.row
      class={{
        concat
        "list-row js-route-tree-item"
        (if (mod b.rowMeta.index 2) " striped")
      }} as |r|
    >
      <r.cell as |route|>
        {{#let
          (component (concat "route-cell-" r.columnValue.valuePath)) as |Cell|
        }}
          <Cell
            @route={{route}}
            @currentRoute={{this.currentRoute}}
            @inspectController={{
              fn this.inspectController route.value.controller
            }}
            @inspectRoute={{fn this.inspectRoute route.value.routeHandler.name}}
            @sendControllerToConsole={{this.sendControllerToConsole}}
            @sendRouteHandlerToConsole={{this.sendRouteHandlerToConsole}}
          />
        {{/let}}
      </r.cell>
    </b.row>
  </t.body>
</EmberTable>