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

<div
  class="list-collection list-collection-scroll-{{this.scroll}}"
  style={{{concat
    'height:' this.style.height 'px'
  }}}
  id={{this.guid}}
  ...attributes
>
{{yield}}
{{#if (eq this.scroll 'virtual')}}
  {{on-window 'resize' (action "resize") }}
  <EmberNativeScrollable
    @tagName="ul"
    @content-size={{this._contentSize}}
    @scroll-left={{this._scrollLeft}}
    @scroll-top={{this._scrollTop}}
    @scrollChange={{action "scrollChange"}}
    @clientSizeChange={{action "clientSizeChange"}}
  >
      <li></li>
    {{~#each this._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 this.checked cell.item.uid) true false) onchange=(action "change" cell.item.uid))
          }}
        >
          <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=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" item.uid))
          }}
        >
          <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>