<table class='vinli-collection-table' data-test={{hook 'vinli-collection-table'}}>
  <thead>
    <tr class='vinli-collection-table__row vinli-collection-table__row--header'>
      {{#each decoratedCols key='col.key' as |decorator|}}
        <th data-test={{hook 'vinli-collection-table-header'}}
            class={{decorator.headerCls}}
            onclick={{action 'sortBy' decorator.col}}>

          {{decorator.col.title}}

          {{#if decorator.isSortCol}}
            {{inline-svg 'arrow-down' class=sortIconCls}}
          {{/if}}
        </th>
      {{/each}}
    </tr>
  </thead>

  <tbody class='{{if isLoading 'is-loading'}} {{if hasError 'has-error'}}'>
    {{#if hasError}}
      <tr class='vinli-collection-table__row vinli-collection-table__row--body vinli-collection-table__row--error'
          data-test={{hook 'vinli-collection-table-error-row'}}>
        <td data-test={{hook 'vinli-collection-table-error-cell'}}
            class='vinli-collection-table__cell vinli-collection-table__cell--error'
            colspan={{cols.length}}>
          {{if errorMsg errorMsg (t 'vinli-collection.table.error')}}
        </td>
      </tr>
    {{/if}}

    {{#each items key=itemKey as |item|}}
      <tr class='vinli-collection-table__row vinli-collection-table__row--body'
          data-test={{hook 'vinli-collection-table-row'}}>
        {{#each decoratedCols key='col.key' as |decorator|}}
          <td data-test={{hook 'vinli-collection-table-cell'}} data-title={{decorator.col.title}} class={{decorator.cellCls}}>
            {{#if decorator.col.yield}}
              {{yield item decorator.col}}
            {{else if decorator.col.format}}
              {{compute decorator.col.format (get item decorator.col.key)}}
            {{else}}
              {{get item decorator.col.key}}
            {{/if}}
          </td>
        {{/each}}
      </tr>
    {{else if isLoading}}
      <tr class='vinli-collection-table__row vinli-collection-table__row--body vinli-collection-table__row--loading'
          data-test={{hook 'vinli-collection-table-loading-row'}}>
        <td data-test={{hook 'vinli-collection-table-loading-cell'}}
            class='vinli-collection-table__cell vinli-collection-table__cell--loading'
            colspan={{cols.length}}>
          {{inline-svg 'spinner' class='icon spinner'}}
          {{if loadingMsg loadingMsg (t 'vinli-collection.table.loading')}}
        </td>
      </tr>
    {{else}}
      <tr class='vinli-collection-table__row vinli-collection-table__row--body vinli-collection-table__row--empty'
          data-test={{hook 'vinli-collection-table-empty-row'}}>
        <td data-test={{hook 'vinli-collection-table-empty-cell'}}
            class='vinli-collection-table__cell vinli-collection-table__cell--empty'
            colspan={{cols.length}}>
          {{if emptyMsg emptyMsg (t 'vinli-collection.table.empty')}}
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>
