<div id="vehicle_detail_modal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="vehicle_detail_modal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="vehicle_detail_title">----</h5>
        <img class="loading-image" style="width: 30px;visibility: hidden;" src="<%= asset_path("others/loading.gif") %>">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div style="padding: 0;z-index: 1000;" class="modal-header">
        <div class="row" style="width: 100%; padding: 0;margin: 0;">
          <div class="col-md-12" style="padding: 0;margin: 0;">
            <ul class="nav nav-tabs nav_vehicle_detail" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="home_vehicle-tab" data-toggle="tab" href="#home_vehicle" role="tab"
                   aria-controls="home_vehicle" aria-expanded="true"><%= _("Now") %></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="session_vehicle-tab" data-toggle="tab" href="#session_vehicle" role="tab"
                   aria-controls="session_vehicle"><%= _("Session") %></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="alerts_vehicle-tab" data-toggle="tab" href="#alerts_vehicle" role="tab"
                   aria-controls="alerts_vehicle"><%= _("Alerts") %></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="commands_vehicle-tab" data-toggle="tab" href="#commands_vehicle" role="tab"
                   aria-controls="commands_vehicle"><%= _("Commands") %></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="locations_vehicle-tab" data-toggle="tab" href="#locations_vehicle" role="tab"
                   aria-controls="locations_vehicle"><%= _("Locations") %></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="locations_vehicle_over_map-tab" data-toggle="tab" href="#locations_vehicle_over_map" role="tab"
                   aria-controls="locations_vehicle_over_map"><%= _("Locations over map") %></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="events_vehicle-tab" data-toggle="tab" href="#events_vehicle" role="tab"
                   aria-controls="events_vehicle"><%= _("Events") %></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="geofences_vehicle-tab" data-toggle="tab" href="#geofences_vehicle" role="tab"
                   aria-controls="geofences_vehicle"><%= _("Geofences") %></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="shared_location-tab" data-toggle="tab" href="#shared_location" role="tab"
                   aria-controls="shared_location"><%= _("Shared Location") %></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="home_vehicle" role="tabpanel" aria-labelledby="home_vehicle-tab"></div>
          <div class="tab-pane fade" id="session_vehicle" role="tabpanel" aria-labelledby="session_vehicle-tab"></div>
          <div class="tab-pane fade" id="alerts_vehicle" role="tabpanel" aria-labelledby="alerts_vehicle-tab"><%= _("Alerts") %></div>
          <div class="tab-pane fade" id="commands_vehicle" role="tabpanel" aria-labelledby="commands_vehicle-tab"><%= _("Commands") %></div>
          <div class="tab-pane fade" id="locations_vehicle" role="tabpanel" aria-labelledby="locations_vehicle-tab"><%= _("Locations") %></div>
          <div class="tab-pane fade" id="locations_vehicle_over_map" role="tabpanel" aria-labelledby="locations_vehicle_over_map-tab">
            <div id="accordion_locations" role="tablist">
              <div class="card">
                <div class="card-header row" role="tab" id="heading-modal2" style="display: flex;">
                  <h5 class="mb-0 col-md-2">
                    <a class="historical_locations_over_map_link_tab collapsed" data-toggle="collapse" href="#detail_location_over_map_info" aria-expanded="false"
                       aria-controls="collapseTwo">
                      <%= _("Historical locations") %>
                    </a>
                  </h5>
                  <div class='col-md-2'>
                    <button align="rigth" class="refresh_locations_over_map_table"><%= _("Refresh") %></button>
                  </div>

                  <div class='col-md-8'>
                    <%= _("Date ini") %>
                    <input type='date' style='width: 130px' id='location_over_map_date_ini'>
                    <%= _("Date end") %>
                    <input type='date' style='width: 130px' id='location_over_map_date_end'>
                    <button align="rigth" class="refresh_locations_over_map_table_with_date"><%= _("Send") %></button>
                  </div>
                </div>
              </div>
            </div>
            <div id="detail_location_over_map_info" class="collapse show" role="tabpanel" aria-labelledby="heading-modal2"
                 data-parent="#accordion">
              <div class="card-block content_map_positions">
                <button id="start-animation" style="position: absolute;z-index: 10;right: 10px;bottom: 10px;" class="btn"><%= _("See route") %></button>
                <button id="pause-animation" onclick="stopAnimation(false)" style="position: absolute;z-index: 10;right: 10px;bottom: 10px;" class="btn"><%= _("See route") %></button>
                <div id="map_content_locations" style="width: 100%;height: 400px" class="map_content_locations">
                  <div id="popup"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="events_vehicle" role="tabpanel" aria-labelledby="events_vehicle-tab"><%= _("Events") %></div>
          <div class="tab-pane fade" id="geofences_vehicle" role="tabpanel" aria-labelledby="geofences_vehicle-tab"><%= _("Geofences") %></div>
          <div class="tab-pane fade" id="shared_location" role="tabpanel" aria-labelledby="shared_location-tab"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= _("Close") %></button>
      </div>
    </div>
  </div>
</div>
