{% load gravatar %}
{% if request.user.is_authenticated %}
    <a class="btn btn-info btn-xs like_unlike" name="{{ object.pk }}">
        <i class="fa fa-thumbs-up"></i> {{ likes }}
    </a>
{% else %}
    <button class="btn btn-info btn-xs" disabled>
        <i class="fa fa-thumbs-up"></i> {{ likes }}
    </button>
{% endif %}
{% if likers %}
    <a href="#likedBy"
       class="btn btn-xs btn-default liked-by"
       data-toggle="modal">Liked By</a>
{% endif %}
<div id="likedBy" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h3>Liked by:</h3>
                {% for usr in likers %}
                    <div class="list-group-item">
                        {% if usr.user.socialaccount_set.all.0.get_avatar_url %}
                            <img src="{{ usr.user.socialaccount_set.all.0.get_avatar_url }}"
                                 height="50px"
                                 width="50px"
                                 alt="user avatar">
                        {% else %}
                            <img src="{% gravatar_url usr.user.email 50 %}"
                                 height="50px"
                                 width="50px"
                                 alt="user avatar">
                        {% endif %}
                        <a href="{% url 'profile' slug=usr.user.username %}">{{ usr.user.username }}</a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% if request.user.is_authenticated %}
    <a class="btn btn-info btn-xs dislike_undislike" name="{{ object.pk }}">
        <i class="fa fa-thumbs-down"></i> {{ dislikes }}
    </a>
{% else %}
    <button class="btn btn-info btn-xs" disabled>
        <i class="fa fa-thumbs-down"></i> {{ dislikes }}
    </button>
{% endif %}
{% if dislikers %}
    <a href="#dislikedBy"
       class="btn btn-xs btn-default disliked-by"
       data-toggle="modal">Disliked By</a>
{% endif %}
<div id="dislikedBy" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h3>Disliked by:</h3>
                {% for usr in dislikers %}
                    <div class="list-group-item">
                        {% if usr.user.socialaccount_set.all.0.get_avatar_url %}
                            <img src="{{ usr.user.socialaccount_set.all.0.get_avatar_url }}"
                                 height="50px"
                                 width="50px"
                                 alt="user avatar">
                        {% else %}
                            <img src="{% gravatar_url usr.user.email 50 %}"
                                 height="50px"
                                 width="50px"
                                 alt="user avatar">
                        {% endif %}
                        <a href="{% url 'profile' slug=usr.user.username %}">{{ usr.user.username }}</a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>