{% extends 'punkweb_insight/base.html' %}
{% load static duration %}

{% block content %}
<h1>Punkweb Insights</h1>

<form class="pw-form inline my-4" method="get">
  {% for field in form %}
  <div class="pw-form-group">
    <label class="pw-input-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
    {{ field }}
  </div>
  {% endfor %}
  {% if form.non_field_errors %}
  {{ form.non_field_errors }}
  {% endif %}
  <div class="pw-form-actions">
    <button class="pw-button raised" type="submit">Filter</button>
  </div>
</form>

<div class="pw-card" style="width: fit-content;">
  <div class="pw-card-header">Statistics</div>
  <div class="pw-card-content">
    <div class="flex flex-column text-size-xs">
      <div class="flex justify-between align-center">
        <div>Visitors:</div>
        <div>
          {{total_sessions}}
        </div>
      </div>
      <div class="flex justify-between align-center">
        <div>Page Views:</div>
        <div>{{total_page_views}}</div>
      </div>
      <div class="flex justify-between align-center">
        <div>New Users:</div>
        <div>{{total_new_users}}</div>
      </div>
      <div class="flex justify-between align-center">
        <div>Time On Site:</div>
        <div>{{total_time_on_site|duration}}</div>
      </div>
      <div class="flex justify-between align-center">
        <div>Avg. Time On Site:</div>
        <div>{{average_time_on_site|duration}}</div>
      </div>
    </div>
  </div>
</div>

<h2>Visitors</h2>

<table class="pw-table">
  <thead>
    <tr>
      <th>Username</th>
      <th>Start Time</th>
      <th>Time on Site</th>
      <th>IP Address</th>
      <th>Page views</th>
    </tr>
  </thead>
  <tbody>
    {% for visitor in visitors %}
    <tr>
      <td>{% if visitor.user %}{{visitor.user.username}}{% else %}Anonymous{% endif %}</td>
      <td>{{ visitor.start_time }}</td>
      <td>{{ visitor.time_on_site|duration }}</td>
      <td>{{ visitor.ip_address }}</td>
      <td>{{ visitor.page_views.count }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<h2>Page views</h2>

<table class="pw-table">
  <thead>
    <tr>
      <th>Page</th>
      <th>Session</th>
  </thead>
  <tbody>
    {% for event in page_views %}
    <tr>
      <td>{{ event.url }}</td>
      <td>{{ event.visitor }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{% endblock %}