{% 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 my-4" 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_visitors}}</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>

<div class="pw-card fluid my-4">
  <div class="pw-card-header">Recent visitors</div>
  <div class="pw-table-container">
    <table class="pw-table">
      <colgroup>
        <col />
        <col style="width: 16rem" />
        <col style="width: 8rem" />
        <col style="width: 7rem" />
        <col style="width: 7rem" />
      </colgroup>
      <thead>
        <tr>
          <th class="text-left">Username</th>
          <th class="text-left">Start time</th>
          <th class="text-left">Time on site</th>
          <th class="text-left">IP address</th>
          <th>Page views</th>
        </tr>
      </thead>
      <tbody>
        {% for visitor in recent_visitors %}
        <tr>
          <td>{% if visitor.user %}{{visitor.user.username}}{% else %}Anonymous{% endif %}</td>
          <td>
            <time datetime="{{visitor.start_time|date:'c'}}">
              {{visitor.start_time|date:'M j, Y'}} at
              {{visitor.start_time|date:'g:i A'}}
            </time>
          </td>
          <td>{{ visitor.time_on_site|duration }}</td>
          <td>{{ visitor.ip_address }}</td>
          <td class="text-center">{{ visitor.page_views.count }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="pw-card fluid my-4">
  <div class="pw-card-header">Popular pages</div>
  <div class="pw-table-container">
    <table class="pw-table">
      <colgroup>
        <col />
        <col style="width: 10rem" />
        <col style="width: 10rem" />
      </colgroup>
      <thead>
        <tr>
          <th class="text-left">Page</th>
          <th>Views</th>
          <th>Unique visitors</th>
        </tr>
      </thead>
      <tbody>
        {% for page in popular_pages|slice:":10" %}
        <tr>
          <td>{{ page.url }}</td>
          <td class="text-center">{{ page.total_views }}</td>
          <td class="text-center">{{ page.unique_visitors }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="pw-card fluid my-4">
  <div class="pw-card-header">Popular referrers</div>
  <div class="pw-table-container">
    <table class="pw-table">
      <colgroup>
        <col />
        <col style="width: 10rem" />
        <col style="width: 10rem" />
      </colgroup>
      <thead>
        <tr>
          <th class="text-left">Referrer</th>
          <th>Views</th>
          <th>Unique visitors</th>
        </tr>
      </thead>
      <tbody>
        {% for obj in popular_referrers|slice:":10" %}
        <tr>
          <td>{{ obj.referrer }}</td>
          <td class="text-center">{{ obj.total_views }}</td>
          <td class="text-center">{{ obj.unique_visitors }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}