{% extends "base.html" %} 
{% load crispy_forms_tags %}
{% block body_main %}
{% include 'profile/_header.html' with active='friends' %}
<div class="card">
    <h2>Users</h2>
    {% for user in users %}
        <a href="{% url 'citizens:view_profile_with_pk' pk=user.pk %}">
            <h4>{{ user.username }}</h4>
        </a>
        {% if not user in friends %}
        <a href="{% url 'citizens:change_friends' operation='add' pk=user.pk %}">
            <button type="button" class='btn btn-success'>Add Friend</button>
        </a>
        {% endif %}
        {% empty %}
        <h4>No users yet.</h4>
    {% endfor %}
    <br><br>
    <h2>Friends</h2>
    {% for friend in friends %}
        <a href="{% url 'citizens:view_profile_with_pk' pk=user.pk %}">
            <h4>{{ friend.username }}</h4>
        </a>
        <a href="{% url 'citizens:change_friends' operation='remove' pk=friend.pk %}">
            <button type="button" class='btn btn-default'>Remove Friend</button>
        </a>
        {% empty %}
        <h4>You haven't added any friends yet.</h4>
    {% endfor %}
</div>
{% endblock %}