{% if services and refRoute %}
    {% for service in services %}
        <div class="card m-2 align-items-center" style="width:25rem;">
            <img src="{{asset('uploads/services/' ~ service.image | defaultImage ) }}" class="card-img-top p-3" style="height:6rem;width:auto;">
            <div class="card-body px-0">
                <h5 class="card-title">{{ service.name }}</h5>
                {# username #}
                {% include "shared-components/_copy_input.html.twig" with {
                    label: 'Utilisateur', 
                    name: 'username',
                    type: 'text', 
                    value: service.username,
                    designation: 'service' ~ service.id
                } only %}
                {# password #}
                {% include "shared-components/_copy_input.html.twig" with {
                    label: 'Mot de passe', 
                    name: 'password',
                    type: 'password', 
                    value: service.password,
                    designation: 'service' ~ service.id
                } only %}
                {% if service.url %}
                    <a class="custom-link" target="_blank" href="{{ service.url }}"><i class="fa-solid fa-globe pe-2 fa-lg"></i></a>
                {% endif %}
                {% include "shared-components/_edit_delete_toolsbar.html.twig" with {
                    deleteId:service.id, 
                    refId: refRoute,
                    name: service.name, 
                    designation:'service', 
                    route:'service',
                    editRoute: path('service.addorupdate', {id: service.id})
                } only %}
                {% if service in app.user.getFavoris() %} 
                    <a href="{{ path('service.favoris.delete', {id: service.id}) }}" class="ms-3">
                        <span style="color:tomato">
                            <i class="fa fa-heart fa-lg "></i>
                        </span>
                {% else %}
                    <a href="{{ path('service.favoris.add', {id: service.id}) }}" class="ms-3">
                        <span style="color:grey">
                            <i class="fa-regular fa-heart fa-lg "></i>
                        </span>
                {% endif %}
                </a>
            </div>
        </div>    
    {% endfor %}  
{% endif %}