<div class='container'>
  <div class='row'>
    <div class='col-md-12'>
      <div class="page-header">
        <h2>Event from <%= @event.agent.name %></h2>
      </div>

      <p>
        <b>Expires in:</b>
        <%= @event.expires_at ? time_ago_in_words(@event.expires_at) : 'never' %>
      </p>

      <p>
        <b>Payload:</b>
        <pre><%= Utils.pretty_jsonify @event.payload || {} %></pre>
      </p>

      <% if @event.lat && @event.lng %>
        <% content_for :head do -%>
<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?sensor=false" %>
<%= javascript_include_tag "map_marker" %>
        <% end -%>

        <p>
          <b>Lat:</b>
          <%= @event.lat %>
          <br/>
          <b>Lng:</b>
          <%= @event.lng %>
        </p>

        <div id="map_canvas" style="width:400px; height:300px"></div>

        <script type="text/javascript">
          var mapOptions = {
            center: new google.maps.LatLng(<%= @event.lat %>, <%= @event.lng %>),
            zoom:15,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };

          var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

          map_marker(map, <%= Utils.jsonify(@event.location) %>);
        </script>
      <% end %>

      <br />
      <div class="btn-group">
        <%= link_to '<span class="glyphicon glyphicon-chevron-left"></span> Back'.html_safe, events_path, class: "btn btn-default" %>
      </div>
    </div>
  </div>
</div>