{% extends 'base.html' %}
{% load activity_extras %}
{% block title %}User logs — {{ activity_seo_site_name }} | nkscoder{% endblock %}
{% block sub_header %}
  {% include 'user_management_sub_header.html' %}
{% endblock %}
{% block extra_head %}
  {% include "activity/_seo_head.html" %}
<style>
  table thead th { background-color: #0d6efd !important; color: #fff !important; }
</style>
{% endblock %}
{% block content %}
<div class="container mt-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
      <h3>Activity: {{ user_obj|user_display }}{% if user_obj.pk %} <span class="text-muted small">#{{ user_obj.pk }}</span>{% endif %}</h3>
    <div class="d-flex gap-2">
      <a href="{% url 'activity_user_list' %}" class="btn btn-outline-secondary btn-sm">Back to list</a>
      <a href="{% url 'user_activity_dashboard' %}" class="btn btn-outline-primary btn-sm">Dashboard</a>
    </div>
  </div>

  <div class="row mb-4">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h6 class="text-muted">Total time on site</h6>
          <p class="mb-0 fs-5">{{ total_time|duration_hms }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h6 class="text-muted">Log entries</h6>
          <p class="mb-0 fs-5">{{ total_logs }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h6 class="text-muted">Last seen</h6>
          <p class="mb-0">{% if last_seen %}{{ last_seen|date:"d M Y, H:i" }}{% else %}—{% endif %}</p>
        </div>
      </div>
    </div>
  </div>

  {% if page_time %}
  <h5 class="mt-4">Time by page</h5>
  <div class="table-responsive mb-4">
    <table class="table table-sm table-bordered">
      <thead><tr><th>Path</th><th>Total time</th></tr></thead>
      <tbody>
        {% for row in page_time %}
        <tr>
          <td><code>{{ row.path }}</code></td>
          <td>{{ row.total|duration_hms }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  <h5>Activity log</h5>
  <form method="get" class="mb-2">
    <select name="per_page" class="form-select form-select-sm w-auto d-inline-block" onchange="this.form.submit()">
      <option value="10" {% if per_page == 10 %}selected{% endif %}>10</option>
      <option value="25" {% if per_page == 25 %}selected{% endif %}>25</option>
      <option value="50" {% if per_page == 50 %}selected{% endif %}>50</option>
      <option value="100" {% if per_page == 100 %}selected{% endif %}>100</option>
    </select>
  </form>

  <div class="table-responsive">
    <table class="table table-bordered table-sm">
      <thead>
        <tr>
          <th>When</th>
          <th>Type</th>
          <th>Action</th>
          <th>Search</th>
          <th>Path</th>
          <th>IP</th>
          <th>Device</th>
          <th>Duration</th>
        </tr>
      </thead>
      <tbody>
        {% for log in logs %}
        <tr>
          <td>{{ log.created_at|date:"d M Y H:i:s" }}</td>
          <td>{{ log.event_type }}</td>
          <td>{{ log.action|default:"—" }}</td>
          <td class="small">{% if log|meta_search_term %}<span class="badge bg-secondary">{{ log|meta_search_term }}</span>{% else %}—{% endif %}</td>
          <td><code class="small">{{ log.path }}</code></td>
          <td>{{ log.ip_address|default:"—" }}</td>
          <td class="small">{{ log.device|default:"—" }}</td>
          <td>{{ log.duration_seconds|duration_hms }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="8" class="text-center text-muted">No activity recorded yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page_obj.has_other_pages %}
  <nav>
    <ul class="pagination pagination-sm justify-content-center">
      {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}&per_page={{ per_page }}">Previous</a></li>
      {% endif %}
      <li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
      {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}&per_page={{ per_page }}">Next</a></li>
      {% endif %}
    </ul>
  </nav>
  {% endif %}
  {% include "activity/_opensource_footer.html" %}
</div>
{% endblock %}