{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
}}

<table
  class="tabular-collection dom-recycling {{if hasActions 'has-actions' ''}}"
  id={{guid}}
  style={{{concat
    'height:' style.height 'px'
  }}}
  ...attributes
>
{{on-window 'resize' (action "resize") }}
{{yield}}
{{#if hasCaption}}
  <caption><YieldSlot @name="caption">{{yield}}</YieldSlot></caption>
{{/if}}
  <thead>
    <tr>
      <YieldSlot @name="header">{{yield}}</YieldSlot>
{{#if hasActions }}
      <th class="actions">Actions</th>
{{/if}}
    </tr>
  </thead>
  <EmberNativeScrollable @tagName="tbody" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}>
    <tr></tr>
{{~#each _cells as |cell index|~}}
    <tr data-test-tabular-row style={{{cell.style}}} onclick={{action 'click'}}>
      <YieldSlot @name="row">{{yield cell.item index}}</YieldSlot>
{{#if hasActions }}
      <td class="actions">
        <YieldSlot @name="actions" @params={{block-params cell.index (action "change") checked}}>
          {{yield cell.item index}}
        </YieldSlot>
      </td>
{{/if}}
    </tr>
{{~/each~}}
  </EmberNativeScrollable>
</table>