{% extends 'base.html' %}
{% load static %}

{% block title %}Users - Packs Site{% endblock %}

{% block content %}
<h1><i class="fas fa-users"></i> Users</h1>

<form method="get" class="browse-search-form">
    <div class="browse-search-row">
        <input type="text" name="q" value="{{ q }}" placeholder="Search users…" class="browse-search-input">
        <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
    </div>
</form>

<div class="user-grid">
    {% for u in users %}
        <a href="{% url 'profiles:user_profile' u.username %}" class="user-card">
            <div class="user-card-avatar">
                {% if u.userprofile.avatar %}
                    <img src="{{ u.userprofile.avatar_url }}" alt="{{ u.username }}">
                {% else %}
                    <div class="default-avatar">{{ u.username|first|upper }}</div>
                {% endif %}
            </div>
            <div class="user-card-body">
                <h3>{{ u.username }}</h3>
                <p class="user-card-meta"><i class="fas fa-calendar"></i> Joined {{ u.userprofile.joined|date:"M j, Y" }}</p>
                <p class="user-card-meta"><i class="fas fa-box-open"></i> {{ u.projects.count }} pack{{ u.projects.count|pluralize }}</p>
            </div>
        </a>
    {% empty %}
        <p class="empty-hint">No users found.</p>
    {% endfor %}
</div>

{% if users.has_other_pages %}
    <div class="pagination">
        {% if users.has_previous %}
            <a href="?{% if q %}q={{ q|urlencode }}&{% endif %}page={{ users.previous_page_number }}">&laquo;</a>
        {% endif %}
        <span>Page {{ users.number }} of {{ users.paginator.num_pages }}</span>
        {% if users.has_next %}
            <a href="?{% if q %}q={{ q|urlencode }}&{% endif %}page={{ users.next_page_number }}">&raquo;</a>
        {% endif %}
    </div>
{% endif %}
{% endblock %}