{% extends '@yuuno/settings/friends/master.twig' %}
{% from '@yuuno/macros.twig' import pagination %}

{% set friends = user.friends(1)|batch(12) %}

{% set mode = 'Listing' %}

{% block description %}
    <p>Manage your friends.</p>
{% endblock %}

{% block settingsContent %}
    {% if friends|length %}
        <div style="text-align: center">
            {% for friend in friends[get.page|default(1) - 1] %}
                <div class="friend-box" id="friendslist-friend-{{ friend.id }}">
                    <a class="friend-box__container" href="{{ route('user.profile', friend.id) }}">
                        <div class="friend-box__avatar avatar avatar--border" style="background-image: url('{{ route('user.avatar', friend.id) }}')"></div>
                        <div class="friend-box__name" style="color: {{ friend.colour }};">{{ friend.username }}</div>
                    </a>
                    <div class="friend-box__actions">
                        <a class="friend-box__action friend-box__action--red fa fa-remove" title="Remove friend" href="javascript:void(0);" onclick="Sakura.Friend.Remove({{ friend.id }});"></a>
                    </div>
                </div>
            {% endfor %}
            <div class="clear"></div>
        </div>
        {% if friends|length > 1 %}
            <div>
                {{ pagination(route('settings.friends.listing'), friends, get.page|default(1)) }}
            </div>
        {% endif %}
    {% else %}
        <h1 style="margin: 2em auto; text-align: center;">You don't have any friends yet!</h1>
    {% endif %}
{% endblock %}