{% extends 'base.html.twig' %}

{% block title %}{{ pageTitle }}{% endblock %}
{% block PageTitle %}{{ pageTitle }}{% endblock %}
   
{% block body %}
    {% include "shared-components/_search_data.html.twig" with {
        form:form ?? null
    } only %}
    <div class="row">
    <a href="{{ path('client.exportcsv') }}"><i class="fa fa-download"></i> Exporter en csv</a>
        {% for client in clients %}
            <div class="card m-2" style="width: 18rem;">
                <div class="card-body d-flex justify-content-between flex-column">
                    <div>
                        <h6 class="card-title">{{ client.firstname}} {{ client.lastname}}</h6>
                        <ul>
                            {% for website in client.getWebsite %}
                                <li>{{ website.company }}<a class="card-link" href="{{ path('website.addorupdate',{id:website.id}) ~ '#contrat' }}">
                                    <i class="fa fa-file-contract"></i>
                                </a></li>
                            {% endfor %}
                        </ul>
                        
                    </div>
                    <div>
                        <div class="row border mb-2" >
                            <h7><strong>Notes</strong></h7>
                            <textarea class="border-0" disabled style="background-color:transparent;height:150px; max-height: 150px; overflow: hidden;">{{ client.comment|slice(0, 150) ~ (client.comment|length > 150 ? '...' : '')}}</textarea>
                        </div>
                        {% include "shared-components/_edit_delete_toolsbar.html.twig" with {
                            deleteId:client.id, 
                            refId: '',
                            name: client.firstname, 
                            designation:'client', 
                            route:'client',
                            editRoute:path('client.addorupdate',{id:client.id})
                        } only %}
                    </div>
                </div>
            </div>
        {% endfor %}   
    </div>
{% endblock %}