{% extends 'base.html' %}
{% load activity_extras %}
{% block title %}Users — {{ activity_seo_site_name }} | {{ activity_author_handle }}{% 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 flex-wrap gap-2">
    <h3>User Activity</h3>
    <div class="d-flex gap-2">
      <a href="{% url 'user_activity_dashboard' %}" class="btn btn-outline-primary btn-sm">Dashboard</a>
      <a href="{% url 'export_user_list_excel' %}?search={{ search }}&section={{ section_filter|urlencode }}" class="btn btn-success btn-sm">Export Excel</a>
    </div>
  </div>

  <form method="get" class="row mb-3 align-items-end">
    <input type="hidden" name="section" value="{{ section_filter }}">
    <div class="col-md-4">
      <label class="form-label small">Per page</label>
      <select name="per_page" class="form-select form-select-sm" onchange="this.form.submit()">
        <option value="10" {% if per_page == 10 %}selected{% endif %}>10</option>
        <option value="12" {% if per_page == 12 %}selected{% endif %}>12</option>
        <option value="20" {% if per_page == 20 %}selected{% endif %}>20</option>
        <option value="50" {% if per_page == 50 %}selected{% endif %}>50</option>
        <option value="100" {% if per_page == 100 %}selected{% endif %}>100</option>
      </select>
    </div>
    <div class="col-md-8">
      <div class="d-flex justify-content-end gap-2">
        <input type="text" name="search" value="{{ search }}" class="form-control form-control-sm" style="max-width:280px" placeholder="{{ search_placeholder|default:activity_search_placeholder }}" aria-label="Search users">
        <button type="submit" class="btn btn-primary btn-sm">Search</button>
        {% if search or section_filter %}<a href="{% url 'activity_user_list' %}" class="btn btn-secondary btn-sm">Clear</a>{% endif %}
      </div>
    </div>
  </form>

  {% if section_filter %}
  <p class="text-muted small mb-1">Filtered app section: <span class="badge bg-info text-dark">{{ section_filter }}</span></p>
  {% endif %}
  <p class="text-muted small">Total: {{ total_users }} user{{ total_users|pluralize }}</p>

  <div class="table-responsive">
    <table class="table table-bordered table-sm table-hover">
      <thead>
        <tr>
          <th>#</th>
          {% for _field, header in user_list_columns %}
          <th>{{ header }}</th>
          {% endfor %}
          <th>Name</th>
          <th>Last activity</th>
          <th>Logins</th>
          <th>Last IP</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr>
          <td>{{ page_obj.start_index|add:forloop.counter0 }}</td>
          {% for field_name, _header in user_list_columns %}
          <td>{{ u|user_field:field_name }}</td>
          {% endfor %}
          <td>{{ u|user_display }}</td>
          <td>{% if u.last_activity %}{{ u.last_activity|date:"d M Y, H:i" }}{% else %}—{% endif %}</td>
          <td>{{ u.total_logins|default:0 }}</td>
          <td>{{ last_ips|get_item:u.id|default:"—" }}</td>
          <td><a href="{% url 'activity_user_detail' u.id %}" class="btn btn-outline-secondary btn-sm">Logs</a></td>
        </tr>
        {% empty %}
        <tr><td colspan="12" class="text-center text-muted">No users found.</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 }}&search={{ search }}&per_page={{ per_page }}&section={{ section_filter|urlencode }}">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 }}&search={{ search }}&per_page={{ per_page }}&section={{ section_filter|urlencode }}">Next</a></li>
      {% endif %}
    </ul>
  </nav>
  {% endif %}
  {% include "activity/_opensource_footer.html" %}
</div>
{% endblock %}