<table class="<%= plural_table_name %>_table table-content-crud table table-hover table-striped">
  <thead>
    <tr>
      <th class="options"></th>
      <th class="options"></th>
      <%% @columns_selected.each do |column| %>
        <th class="<%%= "selected" if @order == column %> order-table-head" data-order="<%%= column %>" data-orientation="<%%= ((@order == column)?  ((@order_orientation == "ASC")? 'DESC' : 'ASC') : 'ASC') %>">
          <%%= <%= singular_table_name.split("_").map!(&:capitalize).join('') %>.human_attribute_name(column) %>
        </th>
      <%% end %>
    </tr>
  </thead>
  <tbody>

  <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
    <tr>
      <td>
        <%%= link_to '<i class="icon icon-trash"></i>'.html_safe, <%= singular_table_name %>_path(<%= singular_table_name %>) + '?' + request.query_parameters.to_query, remote: true, method: :delete, data: { confirm: '"#{_('Are you sure?')}"' }, class: "icon-opt button-delete" %>
      </td>
      <td>
        <%%= link_to '<i class="icon icon-pencil"></i>'.html_safe, edit_<%= singular_table_name %>_path(<%= singular_table_name %>) + '?' + request.query_parameters.to_query, remote: true, class: "icon-opt button-edit" %>
      </td>
      <%% @columns_selected.each do |column| %>
        <td><%%= eval("<%= singular_table_name %>." + column) %></td>
      <%% end %>
    </tr>
  <%% end %>

  </tbody>
  <tfoot>
  <tr>
    <td colspan="100%" style="padding-top: 10px;">
      <div class="row" style="max-height: 40px;padding-top: 1px;">
        <div class="col-md-6" style="display: flex">
          <%%= paginate @<%= plural_table_name %>, :remote => true %>

        </div>
        <div class="col-md-6" align="right">
          <%%= t("count") %>: <%%= @<%= plural_table_name %>.count %> &nbsp;&nbsp;&nbsp;
        </div>
      </div>
    </td>
  </tr>
  </tfoot>
</table>
<script>
    $(".select_number_by_register").change(function() {
        showLoadingImg();
        $.get("<%%= <%= plural_table_name %>_path %>.js?<%%= request.query_parameters.to_query %>&limit=" + this.value, function(){
            hideLoadingImg();
            loadHideColumnSelectorTable();
        });
    });

    $(".order-table-head").click(function () {
        let column_ref = $(this);
        let column_order = column_ref.attr("data-order");
        let column_orientation = column_ref.attr("data-orientation");

        showLoadingImg();
        $.get("<%%= <%= plural_table_name %>_path %>.js?<%%= request.query_parameters.to_query %>&order=" + column_order + "&order_orientation=" + column_orientation, function(){
            hideLoadingImg();
            loadHideColumnSelectorTable();
        });
    });
    <%% if @add_button %>
      $(".btn-create").attr('href', '<%%= @add_button.name.underscore.pluralize + "/new?" + request.query_parameters.to_query %>');
    <%% end %>

    $(".button-edit").click(function(){
        showLoadingImg();
    });

</script>
