templates/user/_list.html.twig line 1

<div class="pagination">
    {% if pagination.currentPageNumber > 1 %}
        <a href="#" data-page="{{ pagination.currentPageNumber - 1 }}" class="prev">Prev</a>
    {% endif %}

    <span>&nbsp;&nbsp;Page {{ pagination.currentPageNumber }} of {{ pagination.pageCount }}&nbsp;&nbsp;</span>

    {% if pagination.currentPageNumber < pagination.pageCount %}
        <a href="#" data-page="{{ pagination.currentPageNumber + 1 }}" class="next">Next</a>
    {% endif %}
</div>
    {% if pagination.items is not empty %}
                {% for user in pagination.items %}
                    <div class=" mb-3 card border border-secondary card-user" >
                        <div class="d-flex flex-column flex-md-row flex-wrap card-header bg-secondary text-white">
                            <div class="w-50 text-left"><h3>{{ user.username }}</h3></div>
                            <div class="w-50 justify-content-center  d-flex flex-wrap">
                                <a href="{{ path('profile_show', {'id': user.id}) }}" class="invite-button btn btn-secondary w-50 d-flex align-items-center justify-content-center">
                                    <i class="fas fa-eye me-2"></i> Show
                                </a>
                                {% if user != app.user %}
                                <a href="{{ path('chat', {'id': user.id})}}" class="invite-button btn btn-secondary w-50 d-flex align-items-center justify-content-center">
                                    <i class="fas fa-envelope me-2"></i> Message
                                </a>
                                {%  endif %}
                            </div>
                        </div>
                        <div class="card-body row">
                            <div class="col-12 col-md-2">
                                <img class="profile-picture-display me-1" 
                                     src="{{ user.profilePictureSmall ? asset('/pictures/' ~ user.profilePictureSmall) : asset('/pictures/default-avatar.png') }}" 
                                     alt="Profile Picture" 
                                     >
                                {% if user.country is defined and user.country != null %}
                                    <img class="country-flag-show" src="/flags/{{ user.country.code }}.png" alt="Country flag">
                                {% else %}
                                    
                                {% endif %}

                            </div>
                            <div class="col-12 col-md-10">
                                <p class="card-text"><b>Instruments:</b>&nbsp;
                                    {% for instrument in user.instruments  %}
                                        {{ instrument.instrument }}
                                        {% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                </p>
                                <p class="card-text"><b>Music Styles:</b>&nbsp;
                                    {% for musicStyle in user.musicStyles  %}
                                        {{ musicStyle.style }}
                                        {% if not loop.last %}, {% endif %}
                                    {% endfor %}
                                </p>
                            </div>

                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <p>Can't find users whit these criteria.</p>
            {% endif %}
            

<div class="pagination">
    {% if pagination.currentPageNumber > 1 %}
        <a href="#" data-page="{{ pagination.currentPageNumber - 1 }}" class="prev">Prev</a>
    {% endif %}

    <span>&nbsp;&nbsp;Page {{ pagination.currentPageNumber }} of {{ pagination.pageCount }}&nbsp;&nbsp;</span>

    {% if pagination.currentPageNumber < pagination.pageCount %}
        <a href="#" data-page="{{ pagination.currentPageNumber + 1 }}" class="next">Next</a>
    {% endif %}
</div>