{##
 # @file event_detail.html
 # Copyright (C) 2015 Pressa. All rights reserved.
 #}

<div class="col-sm-12 form-group"><div class= "col-sm-12">
  <div class="detail-obs"><span class="detail-obs-title">Observaciones:&nbsp;</span><span class="detail-obs-text"></span></div>
  {% if events.status %}
  <table class="table table-detail-status">
    <thead>
        <tr><th colspan="7">ESTADO</th></tr>
        <tr><th>Fecha</th><th>Evento</th><th>Velocidad [Km/h]</th><th>Bateria [V]</th><th>GPS</th><th>Direccion</th><th>Link</th></tr>
    </thead>
    <tbody>
        <tr>
          <td class="detail-date">{{ events.status.dateTime}}</td>
          <td class="detail-event">{{ events.status.currEventCode.description}}</td>
          <td class="detail-speed">{{events.status.speed}}</td>
          <td class="detail-battery">{{events.status.mainBatteryVolt}}</td>
          <td class="detail-gps-status">{% if events.status.age < 40 %}OK{% else %}NO{% endif %}</td>
          <td class="detail-address">{{events.status.address}}</td>
          <td class="detail-location"><a href="https://maps.google.com/maps?q={{events.status.lat}},{{events.status.lng}}&ll={{events.status.lat}},{{events.status.lng}}&z=17&t=h" target="_blank"><img src="./img/earth.svg"/></a></td>
        </tr>
    </tbody>
  </table>
  {% endif %}
  <table class="table table-detail-history table-hover table-striped">
        <thead>
          <tr><th colspan="7">HISTORIAL</th></tr>
          <tr><th style="width: 10%;">Fecha</th><th>Comentario</th><th style="width: 8%;">Usuario</th><th style="width: 8%;">Estado</th></tr>
        </thead>
        <tbody>
        {% for e in events.events %}
            <tr>
              <td class="detail-history-date">{{e.fecha}}</td>
              <td class="detail-history-obs">{{e.observaciones}}</td>
              <td class="detail-history-user">{{e.usuario}}</td>
              <td class="detail-history-status">{{lang['dashboard']['events']['table']['detail']['event_status'][e.estado]}}</td>
            </tr>
        {% endfor %}
        </tbody>
      </table>
</div>