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

<div
  class="list-collection list-collection-scroll-{{scroll}}"
  style={{{concat
    'height:' style.height 'px'
  }}}
  id={{guid}}
  ...attributes
>
{{yield}}
{{#if (eq scroll 'virtual')}}
  {{on-window 'resize' (action "resize") }}
  <EmberNativeScrollable
    @tagName="ul"
    @content-size={{_contentSize}}
    @scroll-left={{_scrollLeft}}
    @scroll-top={{_scrollTop}}
    @scrollChange={{action "scrollChange"}}
    @clientSizeChange={{action "clientSizeChange"}}
  >
      <li></li>
    {{~#each _cells as |cell|~}}
      <li
        data-test-list-row
        onclick={{action 'click'}} style={{{cell.style}}}
        class={{if linkable (if (is linkable item=cell.item) 'linkable')}}
      >
        <YieldSlot @name="header"><div class="header">{{yield cell.item cell.index}}</div></YieldSlot>
        <YieldSlot @name="details"><div class="detail">{{yield cell.item cell.index}}</div></YieldSlot>
        <YieldSlot @name="actions"
          @params={{
            block-params (component 'more-popover-menu' expanded=(if (eq checked cell.index) true false) onchange=(action "change" cell.index))
          }}
        >
          <div class="actions">
            {{yield cell.item cell.index}}
          </div>
        </YieldSlot>
      </li>
    {{~/each~}}
  </EmberNativeScrollable>
{{else}}
{{#let (if (and partial (not this.expand)) (slice 0 partial items) items) as |slice|}}
  <ul>
    <li style="display: none;"></li>
    {{~#each slice as |item index|~}}
      <li
        data-test-list-row
        onclick={{action 'click'}}
        class={{if (not linkable) 'linkable' (if (is linkable item=cell.item) 'linkable')}}
      >
        <YieldSlot @name="header"><div class="header">{{yield item index}}</div></YieldSlot>
        <YieldSlot @name="details"><div class="detail">{{yield item index}}</div></YieldSlot>
        <YieldSlot @name="actions"
          @params={{
            block-params (component 'more-popover-menu' onchange=(action "change" index))
          }}
        >
          <div class="actions">
            {{yield item index}}
          </div>
        </YieldSlot>
      </li>
    {{~/each~}}
  </ul>
{{#if (and partial (gt items.length partial))}}
  {{#let (not-eq slice.length items.length) as |more|}}
  <button
    class={{if more 'closed'}}
    type="button"
    onclick={{action (mut this.expand) more}}
  >
    {{#if more}}
      View {{sub items.length slice.length}} more
    {{else}}
      View less
    {{/if}}
  </button>
  {{/let}}
{{/if}}
{{/let}}

{{/if}}
</div>