{% extends "punkweb_bb/base.html" %}
{% load static styled_username %}

{% block title_prefix %}Members | {% endblock%}
{% block og_title_prefix %}Members | {% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'punkweb_bb/css/members.css' %}" />
{% endblock %}

{% block content %}

<nav>
  <ul class="pw-breadcrumb">
    <li class="pw-breadcrumb-item">
      <a href="{% url 'punkweb_bb:index' %}">Home</a>
    </li>
    <li class="pw-breadcrumb-item active">
      Members
    </li>
  </ul>
</nav>

<div class="pw-card fluid">
  <ul class="members__list">
    {% for user in users %}
    <li class="members__user">
      <div class="members__user__avatar">
        {% if user.profile.image %}
        <img class="pw-avatar sm" src="{{user.profile.image.url}}" />
        {% else %}
        <img class="pw-avatar sm" src="{% static 'punkweb_bb/img/default-profile-image.png' %}" />
        {% endif %}
      </div>
      <div class="members__user__info">
        <div class="members__user__username"><a href="{% url 'punkweb_bb:profile' user.id %}">{{ user|styled_username }}</a></div>
        <div class="members__user__stats">
          <div class="members__user__stat">
            Posts:
            <span class="members__user__stat__value">{{user.profile.post_count}}</span>
          </div>
          <div class="members__user__stat">
            Date Joined:
            <span class="members__user__stat__value">
              <time datetime="{{user.date_joined|date:'c'}}">{{user.date_joined | date:'m/d/Y'}}</time>
            </span>
          </div>
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>
</div>

{% if users.has_other_pages %}
<nav>
  <ul class="pw-pagination">
    {% if users.has_previous %}
    <li class="pw-pagination-item">
      <a class="pw-pagination-link" href="{% url 'punkweb_bb:members' %}?page={{users.previous_page_number}}">
        Prev
      </a>
    </li>
    {% else %}
    <li class="pw-pagination-item disabled">
      <a class="pw-pagination-link" href="#">
        Prev
      </a>
    </li>
    {% endif %}
    {% for i in users.paginator.page_range %}
    {% if users.number == i %}
    <li class="pw-pagination-item active">
      <a class="pw-pagination-link" href="#">
        {{i}}
      </a>
    </li>
    {% else %}
    <li class="pw-pagination-item">
      <a class="pw-pagination-link" href="{% url 'punkweb_bb:members' %}?page={{i}}">
        {{i}}
      </a>
    </li>
    {% endif %}
    {% endfor %}
    {% if users.has_next %}
    <li class="pw-pagination-item">
      <a class="pw-pagination-link" href="{% url 'punkweb_bb:members' %}?page={{users.next_page_number}}">
        Next
      </a>
    </li>
    {% else %}
    <li class="pw-pagination-item disabled">
      <a class="pw-pagination-link" href="#">Next</a>
    </li>
    {% endif %}
  </ul>
</nav>
{% endif %}

{% endblock %}