<div class="row" style="margin: 0">
  <div style="border-bottom: 1px solid #cfcfcf;margin: 0; padding: 0 0 10px 0;" class="col-12" align="center">
    <% if @group.avatar? %>
      <%= image_tag(@group.avatar_url, class: "img-round", style: "width: 100px;") %>
    <% else %>
      <img style="width: 100px;" class="img-round" src="<%= asset_path("images/avatars/profile.jpg")  %>">
    <% end %>
  </div>
</div>
<ul class="nav flex-column left_main">
  <li class="nav-item">
    <a class="nav-link <%= 'selected' if selected == "settings" %>" data-href="data_show_settings" href="<%= edit_group_path @group if !@group.new_record? %>">
      <span><%= _("Grupo Settings") %></span>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link <%= 'selected' if selected == "vehicles" %>" data-href="data_show_map_images" href="<%= group_vehicles_path @group if !@group.new_record? %>">
      <span><%= _("Vehiculos") %> (<%= @group.vehicles.joins('INNER JOIN tc_user_device ON tc_user_device.deviceid = vehicles.tc_device_id').where('tc_user_device.userid = ?', current_user.id).distinct.count %>)</span>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link <%= 'selected' if selected == "poi" %>" data-href="data_show_map_options" href="<%= points_interest_index_path(@group) if !@group.new_record? %>">
      <span><%= _("Puntos de interes ") %> (<%= @group.points_of_interests.count %>)</span>
    </a>
  </li>
</ul>

<script>
  $(".left_main .nav-link").click(function(){
      $(".nav-link.selected").removeClass("selected");
      $(".data_config.show").removeClass("show");
      $(".data_config").removeClass("hide");
      $(".data_config").addClass("hide");

      $(this).addClass("selected");
      $("#" + $(this).attr("data-href")).addClass("show");

  });
</script>

<style>
  .data_config.hide{
    display: none;
  }

  .data_config.show{
    display: block;
  }
</style>
