<div class="page-header bg-primary text-auto row no-gutters align-items-center justify-content-between p-4 p-sm-6">

  <div class="col">

    <div class="row no-gutters align-items-center flex-nowrap">

      <button type="button" class="sidebar-toggle-button btn btn-icon d-inline-block d-lg-none mr-2" data-fuse-bar-toggle="contacts-sidebar">
        <i class="icon icon-menu"></i>
      </button>

      <!-- APP TITLE -->
      <div class="logo row no-gutters align-items-center flex-nowrap">
                                      <span class="logo-icon mr-4">
                                          <i class="icon-map s-6"></i>
                                      </span>
        <span class="logo-text h4"><%= _("Cases") %></span>
      </div>

    </div>
    <!-- / APP TITLE -->
  </div>

</div>
<table id="cases" class="hardware_profiles_table table-content-crud table table-hover table-striped">
  <thead>
  <tr>
    <th></th>
    <th><%= _("Id case") %></th>
    <th><%= _("Case") %></th>
    <th><%= _("User") %></th>
    <th><%= _("Id devise") %></th>
    <th><%= _("Item") %></th>
    <th><%= _("Customer name") %></th>
    <th><%= _("Group") %></th>
    <th><%= _("State") %></th>
    <th><%= _("Date Processed") %></th>
    <th><%= _("Date Received") %></th>
    <th><%= _("Device date") %></th>
  </tr>
  </thead>
  <tbody>
  <% @cases.each do |_case| %>
    <% if _case.device_alert %>
      <tr>
        <td>
          <%= link_to site_monitoring_edit_case_path(_case.id), remote: true, method: :get do %>
            <div align="center">
              <i style="font-size: 15px;color: red;" class="icon icon-alert"></i>
            </div>
          <% end %>
        </td>
        <td><%= _case.id %></td>
        <td><%=( _case.device_alert.position.get_event_type_name.present?)?  _case.device_alert.position.get_event_type_name : _case.device_alert.name %></td>
        <td><%= _case.user.username %></td>
        <td><%= _case.device.uniqueid %></td>
        <td><%= _case.device.get_vehicle.name %></td>
        <td>
          <% if !_case.device.client.is_active? %>
            <i class="fas fa-bell-slash" style="color: red;font-size: 20px" title="<%= _('Disabled client') %>"></i>
          <% end %>
          <%= _case.device.client.full_name %>
        </td>
        <td><%= _case.device.get_vehicle.group.name %></td>
        <td><%= _case.cases_status.status_name %></td>
        <td><%= _case.created_at %></td>
        <td><%= _case.device_alert.date %></td>
        <td><%= _case.device_alert.position.devicetime %></td>
      </tr>
    <% end %>
  <% end %>
  </tbody>
</table>
<%= javascript_include_tag "map" %>
<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,
        paging: {
            length: 30
        },
        enable_empty_option: true,
        enable_non_empty_option: true,
        auto_filter: {
            delay: 1100 //milliseconds
        },
        // theme
        themes: [{ name: 'default' }],
        col_widths:[
            '60px'
        ],
        extensions: [{ name: 'sort' }]
    };

    var tf = new TableFilter('cases', filtersConfig);
    try{
      tf.init();
    }catch (e) {
        
    }
    
</script>
