{% if content.referents is defined and content.referents is not empty and content.referents|length > 0 %}
<div class="referent-splide splide br8 shadow-standard mt-40px" aria-label="Référents PQN-A">
<h2 class="fs30 fw400 lh36 center">Les référents PQN-A</h2>
<div class="splide__track">
<ul class="splide__list">
{% for referent in content.referents %}
<li class="splide__slide">
<div class="slide">
<div class="profile-img-container center">
{% if referent.avatar is defined and referent.avatar is not empty %}
{% if referent.avatar.id is defined and referent.avatar.id is not empty %}
{% set avatar = sulu_resolve_media(referent.avatar.id, 'fr') %}
<img src="{{ avatar.formats['sulu-260x.webp'] }}" srcset="{{ avatar.formats['300x.webp'] }} 300w, {{ avatar.formats['600x.webp'] }} 600w, {{ avatar.formats['1000x.webp'] }} 1000w" sizes="260px" title="{{ referent.fullName }}" class="referent-avatar" width="{{ avatar.fileVersion.properties.width }}" height="{{ avatar.fileVersion.properties.height }}">
{% endif %}
{% else %}
<span class="diflex profile-initials cwhite jcc aic bgblue p-1em fs24">
{% if referent.firstName is defined and referent.firstName is not empty %}
{{ referent.firstName|first|upper }}
{% endif %}
{% if referent.lastName is defined and referent.lastName is not empty %}
{{ referent.lastName|first|upper }}
{% endif %}
</span>
{% endif %}
</div>
<div class="center fw400 lh32 fs24 mt-1em">
{{ referent.firstName }} {{ referent.lastName }}
</div>
{% if referent.typologieActeur is defined and referent.typologieActeur is not empty and referent.typologieActeur.name is defined and referent.typologieActeur.name is not empty %}
<div class="center fw400 lh24 fs16">{{ referent.typologieActeur.name }}</div>
{% endif %}
{% if referent.mainPhone is defined and referent.mainPhone is not empty %}
<div class="center fw400 lh24 fs16 corange">{{ referent.mainPhone }}</div>
{% endif %}
{% if referent.mainEmail is defined and referent.mainEmail is not empty %}
<div class="center fw400 lh24 fs16">{{ referent.mainEmail }}</div>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}