<table class="hardware_profiles_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') %>">
          <%= HardwareProfile.human_attribute_name(column) %>
        </th>
      <% end %>
    </tr>
  </thead>
  <tbody>

  <% @hardware_profiles.each do |hardware_profile| %>
    <tr>
      <td>
        <%= link_to '<i class="icon icon-trash"></i>'.html_safe, hardware_profile_path(hardware_profile) + '?' + 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_hardware_profile_path(hardware_profile) + '?' + request.query_parameters.to_query, remote: true, class: "icon-opt button-edit" %>
      </td>
      <% @columns_selected.each do |column| %>
        <td><%= eval("hardware_profile." + 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 @hardware_profiles, :remote => true %>

        </div>
        <div class="col-md-6" align="right">
          <%= t("count") %>: <%= @hardware_profiles.count %> &nbsp;&nbsp;&nbsp;
        </div>
      </div>
    </td>
  </tr>
  </tfoot>
</table>
<script>
    $(".select_number_by_register").change(function() {
        showLoadingImg();
        $.get("<%= hardware_profiles_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("<%= hardware_profiles_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>
