<table id="geofences" class="table-content-crud table table-hover table-striped">
  <thead>
  <tr>
    <th style="width: 80px;background-color: transparent;">
    </th>

    <th class="text-center">
      <%= _("Geofence Name") %>
      <img class="loading-image" style="width: 10px;visibility: hidden;" src="<%= asset_path("others/loading.gif") %>">
    </th>
    <th class="text-center">
    </th>
  </tr>
  </thead>
  <tbody>
  <% @geofences.each do |geofence| %>
    <% @geofences_by_id[geofence.id.to_s] = geofence %>
    <tr>
      <td align="center">
        <%= link_to '<i style="font-size: 14pt !important;" class="icon icon-trash"></i>'.html_safe, geofence_path(geofence) + '?url_refresh=' + site_user_site_user_geofences_url + '&' + request.query_parameters.to_query, remote: true, method: :delete, data: { confirm: _("Are you sure?") }, class: "icon-opt button-delete" if current_user.user_admin %>
        <%= link_to '<i style="font-size: 14pt !important;" class="icon icon-pencil"></i>'.html_safe, edit_geofence_path(geofence) + '?url_refresh=' + site_user_site_user_geofences_url + '&' + request.query_parameters.to_query, remote: true, class: "icon-opt button-edit" if current_user.user_admin %>
        <%= link_to '<i style="font-size: 14pt !important;" class="icon icon-redo"></i>'.html_safe, assign_to_device_geofence_path(geofence) + '?url_refresh=' + site_user_site_user_geofences_url + '&' + request.query_parameters.to_query, remote: true, class: "icon-opt" if current_user.user_admin %>
      </td>
      <td>
        <img style="width: 20px;" src="<%= asset_path("others/"+ geofence.area.split("(")[0].downcase.gsub(" ", "") + ".png") %>">
        <%= geofence.name %>
        <textarea style="display: none;" id="geofence_<%= geofence.id %>"><%= geofence.area.html_safe %></textarea>
      </td>
      <td align="center"><input id="check_geofence_<%= geofence.id %>" onchange="showGeofenceArea(this, '<%= geofence.id %>')" type="checkbox"></td>
    </tr>
  <% end %>
  </tbody>
</table>

<script>
    var filtersConfig = {
        // instruct TableFilter location to import ressources from
        base_path: 'https://unpkg.com/tablefilter@0.6.102/dist/tablefilter/',
        highlight_keywords: true,
        alternate_rows: true,
        rows_counter: true,
        btn_reset: true,
        status_bar: true,
        popup_filters: true,
        enable_empty_option: true,
        enable_non_empty_option: true,
        auto_filter: {
            delay: 1100 //milliseconds
        },
        // theme
        themes: [{ name: 'default' }],
        col_widths:[
            '100px'
        ],
        extensions: [{ name: 'sort' }]
    };

    var tf = new TableFilter('geofences', filtersConfig);
    try{
        tf.init();
    }catch (e) {

    }
</script>
