<!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 async src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js" crossorigin="anonymous"></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) {
          console.log("asd");
          $(".loading-image").css("visibility", "hidden");
          $(elm).parent().html(data);
        }
      });
    }
  </script>
</head>

<body class="layout layout-vertical layout-left-navigation layout-above-toolbar layout-above-footer">
<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 %>
                <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>
  </nav>
  <div class="row" style="margin: 0px;">
    <div class="breadcrumbs-content">
      <%= render "shared/breadcrumbs" %>
      <%= render "shared/filter_select" %>
    </div>
  </div>

  <div id="wrapper">
    <div class="content-wrapper" style="padding-bottom: 0px !important;">
      <div class="content"  style="min-height: 500px;max-height: 100%;">
        <%= render "shared/notice" %>
        <%= yield %>
      </div>
    </div>
  </div>
  <div class="dinamic-content"></div>

  <style>
    .dropdown-menu.show {
      transform: translate3d(20px, 64px, 0px) !important;
    }
  </style>

</main>
</body>

</html>
