<div class="js-pager"></div>
<table class="table table-hover<% if @class: %> <%= @class %><% end %>">
  <thead>
    <tr>
    <% if @sortable: %>
      <th style="width: 36px" class="table-draggable"></th>
    <% end %>
    <% if @checkbox: %>
      <th style="width: 30px" class="table-checkbox">
        <label class="checkbox-replacement">
          <input type="checkbox" value="" name="bulk_all">
          <%- @Icon('checkbox', 'icon-unchecked') %>
          <%- @Icon('checkbox-checked', 'icon-checked') %>
          <%- @Icon('checkbox-indeterminate', 'icon-indeterminate') %>
        </label>
      </th>
    <% end %>
    <% if @radio: %>
      <th style="width: 30px" class="table-radio"></th>
    <% end %>
    <% for header, i in @headers: %>
      <th class="js-tableHead<% if header.className: %> <%= header.className %><% end %><% if header.align: %> align-<%= header.align %><% end %>" style="<% if header.displayWidth: %>width:<%= header.displayWidth %>px<% end %>" data-column-key="<%= header.name %>">
        <div class="table-column-head<%= ' js-sort' if @tableId %>">
          <div class="table-column-title"><%- @T(header.display) %></div>
          <div class="table-column-sortIcon"><% if header.sortOrderIcon: %><%- @Icon(header.sortOrderIcon[0], header.sortOrderIcon[1]) %><% end %></div>
        </div>
        <% if @tableId && !header.unresizable && i < @headers.length - 1 && (@headers.length - 1 != i && @headers[ i + 1 ] && !@headers[ i + 1 ].unresizable): %>
          <div class="table-col-resize js-col-resize"></div>
        <% end %>
      </th>
    <% end %>
    </tr>
  </thead>
  <tbody class="js-tableBody"><%- @tableBody %></tbody>
</table>
<div class="js-pager"></div>
