{% extends "layout.html" %}

{% block static %}
  <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="application/javascript" src="{{ url_for('static', filename='js/main.js') }}"></script>
{% endblock %}

{% block content %}
  <div class="row">
    <div class="column">
      <h3 id="updates-alert" class="hidden" data-now="{{ now }}">New webhooks are here. <a
              href="{{ url_for('events.list') }}">Reload</a> page to see updates</h3>
      {% if events | length > 0 %}
        <table>
          <thead>
          <tr>
            <th>Contact ID</th>
            <th>Contact Name</th>
            <th>Event</th>
            <th>Occurred At</th>
          </tr>
          </thead>
          <tbody>
          {% for event in events %}
            <tr>
              <td>{{ event.object_id }}</td>
              <td>
                {% if event.object_id in contacts_dict %}
                  {{ contacts_dict[event.object_id].fullname}}
                {% endif %}
              </td>
              <td>
                <span class="event {{ event.event_type.split('.')[1] }}">{{ event.event_type }}</span>
                {% if event.property_name %}
                  <span>({{ event.property_name }} to "{{ event.property_value }}")</span>
                {% endif %}
              </td>
              <td>
                {{ event.occurred_at }}
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      {% else %}
        <h3 id="no-webhooks-alert">No webhooks have been received so far.</h3>
      {% endif %}
    </div>
  </div>

{% endblock %}