<Ui::Disclosure as |disclosure|>
  <tr
    style={{this.nodeStyle}}
    class="list-row js-render-profile-item"
  >
    <@list.cell
      class="list-cell-main js-render-main-cell"
      @on-click={{disclosure.toggle}}
      style={{this.nameStyle}}
    >
      {{#if this.hasChildren}}
        <disclosure.triangleIcon />
      {{/if}}

      <span title={{@model.name}}>
        <span class="js-render-profile-name">{{@model.name}}</span>
      </span>
    </@list.cell>

    <@list.cell class="list-cell-value_numeric">
      <span class="pill js-render-profile-duration">
        {{ms-to-time @model.duration}}
      </span>
    </@list.cell>

    <@list.cell class="list-cell-value_numeric js-render-profile-timestamp">
      {{this.readableTime}}
    </@list.cell>
  </tr>

  {{#if disclosure.isExpanded}}
    {{#each @model.children as |child|}}
      <RenderItem
        @model={{child}}
        @target={{this}}
        @list={{@list}}
        @search={{@search}}
      />
    {{/each}}
  {{/if}}
</Ui::Disclosure>