<div id="contacts" class="page-layout simple left-sidebar-floating">

  <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; 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><%= _("Group") %></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| %>
                <% if vehicle.device %>
                  <% position = vehicle.device.last_position %>
                  <% temperature = position.get_temperature if position.present? %>

                  <% @vechicles_by_id[vehicle.tc_device_id] = vehicle.name + (temperature.present? ? " / "+ temperature + "°" : '') %>
                  <tr data-marker="<%= vehicle.marker_url %>" id="device_id_<%= vehicle.tc_device_id %>">
                    <td title="offline" class="name_vehicle offline"><%= vehicle.group.name %></td>
                    <td title="offline" class="name_vehicle_event">
                      <a href="javascript:void(0)"><%= vehicle.name %><span class="temperature"><%= temperature.present? ? " - "+ temperature + "°" : ''  %></span></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>
          <hr>
          <%= _("Make your payment with:") %>
          <a href="https://www.psepagos.co/PSEHostingUI/ShowTicketOffice.aspx?ID=8050" target="_blank"><img src="/assets/images/logos/pse.jpeg", style="width: 150px"/></a>
        </div>
        <!-- / SIDENAV CONTENT -->
      </div>
    </aside>

    <!-- CONTENT -->
    <div class="col-sm-12 col-md-12 col-lg-8 col-xl-8 content-map" 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;">
          <button style="margin-top: -12px;" 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>
          <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 "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>