<div id="contacts" class="page-layout simple left-sidebar-floating">
  <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"><%= _("Tracking Map") %></span>
        </div>

      </div>
      <!-- / APP TITLE -->
    </div>

  </div>

  <div class="page-content-wrapper">
    <aside class="col-sm-12 col-md-4 col-lg-4 col-xl-4" data-fuse-bar="contacts-sidebar" data-fuse-bar-media-step="md" style="padding: 0;min-width: 436px; max-height: 100%">
      <div class="page-sidebar-card" style="max-height: 100%">
        <!-- SIDENAV CONTENT -->
        <div class="content" style="overflow-y: auto;position: absolute;height: 100%;width: 100%;">
          <table id="monitoring" class="simple clickable table-striped table-hover">
            <thead>
            <tr>
              <th><%= _("Client") %></th>
              <th class="text-center">
                <%= _("Vehicle") %>
                <img class="loading-image" style="width: 10px;visibility: hidden;" src="<%= asset_path("others/loading.gif") %>">
              </th>
              <th class="text-center"><%= _("Last") %></th>
              <th class="text-center"><%= _("Details") %></th>
            </tr>
            </thead>
            <tbody>
            <% @vehicles.each do |vehicle| %>
              <% @vechicles_by_id[vehicle.tc_device_id] = vehicle.name %>

              <% if vehicle.device %>
                <% position = vehicle.device.last_position %>
                <tr data-marker="<%= vehicle.marker_url %>" id="device_id_<%= vehicle.tc_device_id %>">
                  <td title="offline" class="name_vehicle offline">
                    <% if !vehicle.client.is_active? %>
                      <i class="fas fa-bell-slash" style="color: red;font-size: 20px" title="<%= _('Disabled client') %>"></i>
                    <% end %>
                    <%= truncate(vehicle.client.full_name, length: 16) %>
                  </td>
                  <td class="name_vehicle_event">
                    <a href="javascript:void(0)"><%= vehicle.name %></a>
                  </td>
                  <td class="last_update text-center"><% if position.present? %><%= position.get_elapsed_time %><% end %></td>
                  <td class="text-center">
                    <div class="text-center" style="display: flex;">
                      <img class="img-vehicle-direction" style='width: 24px;height: 24px;' src='/assets/images/logos/logo_compass.svg'>
                      <% if position.present? %>
                        <% if position.speed > 3 %>
                          <div class="move-indicator ng-star-inserted" style="background-color: green;" title="moving"></div>
                        <% elsif position.ignition %>
                          <div class="move-indicator ng-star-inserted" style="background-color: blue;" title="ignition_on"></div>
                        <% else %>
                          <div class="move-indicator ng-star-inserted" style="background-color: red;" title="stopped"></div>
                        <% end %>
                        <a class="btn-details" onclick="loadModalWithVechicleId(<%= vehicle.id %>, 'session')" href="javascript:void(0)" style="margin-left: 10px" title="details">
                          <i class="icon s-4 icon-library-books"></i>
                        </a>
                        <a class="btn-details" onclick="loadModalWithVechicleId(<%= vehicle.id %>, 'alerts')" href="javascript:void(0)" style="margin-left: 10px" title="notifications">
                          <i class="icon s-4 icon-bell-outline"></i>
                        </a>
                        <a class="btn-details" onclick="loadModalWithVechicleId(<%= vehicle.id %>, 'commands')" href="javascript:void(0)" style="margin-left: 10px" title="commands">
                          <i class="icon s-4 icon-email"></i>
                        </a>
                        <% if !@mobile %>
                          <a class="btn-details" href="https://www.instantstreetview.com/@<%= position.latitude %>,<%= position.longitude %>,10.5h,-19.38p,1z" target="_blank" style="margin-left: 10px" title="Street view">
                            <i class="fas fa-street-view s-4"></i>
                          </a>
                        <% end %>
                      <% end %>
                    </div>
                  </td>
                </tr>
              <% end %>
            <% end %>
            </tbody>
          </table>
        </div>
        <!-- / SIDENAV CONTENT -->
      </div>
    </aside>

    <!-- CONTENT -->
    <div class="col-sm-12 col-md-12 col-lg-8 col-xl-8" style="margin: 0px;padding: 0px;">
      <div class="row map-content-header" style="margin: 0px;height: 37px;border-bottom: 1px solid #045784;">
        <div class="col-8" style="padding-top: 8px;background-color: #eee;">
          <i class="icon-map s-6"></i><%= _("View on map") %>
        </div>
        <div class="col-4" style="padding-top: 8px;border-right: 1px solid #045784;background-color: #eee;">
          <div align="right" style="positon: flex;">
            <button onclick="centerMap();"><%= _("Center Map") %></button>
          </div>
        </div>
      </div>
      <div class="row map-content-row" style="margin: 0px;">
        <div class="col-12" style="padding: 0px; height: 100%;">
          <div id="map" class="map"></div>
        </div>
      </div>
    </div>
    <!-- / CONTENT -->
  </div>
</div>

<%= render "/site_user/tracking/details_vehicle" %>

<%= stylesheet_link_tag  'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css' %>
<%= stylesheet_link_tag  'https://unpkg.com/ol-layerswitcher@3.5.0/src/ol-layerswitcher.css' %>
<%= stylesheet_link_tag  'routing' %>

<%= javascript_include_tag 'https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js' %>
<%= javascript_include_tag 'https://unpkg.com/ol-layerswitcher@3.5.0' %>
<%= javascript_include_tag 'map' %>
<%= javascript_include_tag 'routing' %>
<script>
  var markerVectorLayer;
  var map;
  var global_positions = {};
  var global_geofences = <%= @geofences.to_json.html_safe %>;
  var global_colors = {
    "unknown": "yellow",
    "offline": "red",
    "online": "green"
  };

  var global_actual_vehicle;
  var global_vehicles = <%= @vehicles.to_json(include: {device: {include: :last_position}}).html_safe %>
  var global_vehicles_by_device_id = <%= @vechicles_by_id.to_json.html_safe %>;
  var global_audio = [];
  var URL_SERVER_TRACKING = "<%= ENV["TRACCAR_SERVER_URI"] %>";
  var SERVER_TRACKING_TOKEN = "<%= current_user.token %>";
  var CURRENT_USER_ADMIN = <%= current_user.user_admin? %>;
  $(function(){
    var tf = new TableFilter('monitoring', filtersConfig);
    try{ tf.init();  }catch (e) {}
    init();
  });
</script>