
<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>Predador Movil::</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <%= csrf_meta_tags %>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

  <link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700italic,700,900,900italic" rel="stylesheet">
  <script async src="https://kit.fontawesome.com/607a197362.js" crossorigin="anonymous"></script>


  <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/es.js"></script>
  <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
  <script src="https://unpkg.com/tablefilter@0.6.102/dist/tablefilter/tablefilter.js"></script>


  <!-- STYLESHEETS -->
  <style type="text/css">
    [fuse-cloak],
    .fuse-cloak {
      display: none !important;
    }
  </style>
  <script>
      function getAddressFromCoords(elm, positionid, latitude, longitude){
          $(".loading-image").css("visibility", "visible");
          $.ajax({
              url: "<%= ENV["TRACCAR_SERVER_URI"] %>/api/server/geocode?positionid=" + positionid + "&latitude=" + latitude + "&longitude=" + longitude,
              data: {},
              dataType: 'text',
              xhrFields: {
                  withCredentials: true
              },
              success: function(data){
                  $(".loading-image").css("visibility", "hidden");
                  let parent = $(elm).parent().find("div");
                  if(parent.length > 0){
                      parent.html(data);
                  } else {
                      $(elm).parent().html(data);
                  }
              }
          });
      }
  </script>
</head>

<body class="layout-vertical layout-left-navigation layout-above-toolbar layout-above-footer">


<%= render "shared/left_main" %>

<nav id="toolbar" class="bg-white">

  <div class="row no-gutters align-items-center flex-nowrap">

    <div class="col">

      <div class="row no-gutters align-items-center flex-nowrap">

        <div class="toolbar-separator d-block d-lg-none"></div>

        <%= render "shared/top_main" %>

      </div>
    </div>

    <div class="col-auto">

      <div class="row no-gutters align-items-center justify-content-end">

        <div class="toolbar-separator"></div>

        <div class="language-button dropdown">

          <div class="dropdown-toggle ripple row align-items-center justify-content-center no-gutters px-0 px-sm-4" role="button" id="dropdownLanguageMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div class="row no-gutters align-items-center">
              <img class="flag mr-2" src="<%= asset_path('images/flags/' + session[:locale].to_s + '.png') %>">
              <span class="d-none d-md-block" style="text-transform: uppercase;"><%= session[:locale] %></span>
            </div>
          </div>
          <div class="dropdown-menu" aria-labelledby="dropdownLanguageMenu">
            <a class="dropdown-item" href="?locale=es">
              <div class="row no-gutters align-items-center flex-nowrap">
                <img class="flag" src="<%= asset_path('images/flags/es.png') %>">
                <span class="px-3"><%= t("main.language.es") %></span>
              </div>
            </a>
            <a class="dropdown-item" href="?locale=en">
              <div class="row no-gutters align-items-center flex-nowrap">
                <img class="flag" src="<%= asset_path('images/flags/en.png') %>">
                <span class="px-3"><%= t("main.language.en") %></span>
              </div>
            </a>
          </div>
        </div>

        <div class="toolbar-separator"></div>
        <div class="user-menu-button dropdown">

          <div class="dropdown-toggle ripple row align-items-center no-gutters px-2 px-sm-4" role="button" id="dropdownUserMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div class="avatar-wrapper">
              <% if current_user.avatar.present? %>
                <%= image_tag(current_user.avatar_url, class: "avatar") %>
              <% else %>
                <img class="avatar" src="<%= asset_path('images/avatars/profile.jpg') %>">
              <% end %>
              <i class="status text-green icon-checkbox-marked-circle s-4"></i>
            </div>
            <span class="username mx-3 d-none d-md-block"><%= current_user.username if current_user %></span>
          </div>

          <div class="dropdown-menu" aria-labelledby="dropdownUserMenu">
            <% if session[:prev_user_id] != nil %>
              <% if current_user.user_admin %>
                <a class="dropdown-item" href="/site_user/admin">
                  <div class="row no-gutters align-items-center flex-nowrap">
                    <i class="icon-apps"></i>
                    <span class="px-3"><%= _("User admin") %></span>
                  </div>
                </a>
              <% end %>
              <a rel="nofollow" data-method="post" class="dropdown-item" href="<%= leave_impersonate_user_path(current_user) %>">
                <div class="row no-gutters align-items-center flex-nowrap">
                  <i class="icon-logout"></i>
                  <span class="px-3"><%= _("Back to site") %></span>
                </div>
              </a>
            <% end %>
            <a rel="nofollow" data-method="get" class="dropdown-item" href="<%= edit_profile_user_path current_user %>">
              <div class="row no-gutters align-items-center flex-nowrap">
                <i class="icon icon-pencil"></i>
                <span class="px-3"><%= _("Edit profile") %></span>
              </div>
            </a>
            <a rel="nofollow" data-method="delete" class="dropdown-item" href="<%= destroy_user_session_path %>">
              <div class="row no-gutters align-items-center flex-nowrap">
                <i class="icon-logout"></i>
                <span class="px-3"><%= _("Logout") %></span>
              </div>
            </a>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="breadcrumbs-content">
    <%= render "shared/filter_select" %>
  </div>
</nav>
<main>
  <div id="wrapper">

    <div class="content-wrapper py-0" style="padding-bottom: 0px !important;">
      <div class="content">
        <%= render "shared/notice" %>
        <%= yield %>
      </div>
    </div>
  </div>
  <div class="dinamic-content"></div>
</main>


<style>
  #toolbar{
    border-bottom: 3px solid #045784;
  }
  @media(max-width:700px){
    .dropdown-menu.show{
      transform: translate3d(-137px, 64px, 0px) !important
    }
  }
</style>

</body>

</html>
