<section>
	<div class="container">
		{% if existH1 %}
			<h2>Prelegenci</h2>
		{% else %}
			<h1>Prelegenci</h1>
		{% endif %}
		<div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-3">
			{% for speaker in speakers %}
				<div class="col mb-5">
					<div class="d-block d-md-flex h-100 align-items-center">
						<div class="text-center">
							<div class="person-img-small img-up">
								{% if speaker.image is not empty %}
									{{ sonata_thumbnail(speaker.image, 'person_person_small') }}
								{% else %}
									<div class="placeholder ph-people-small mx-auto"><img alt="{{ speaker.name }}" src="{{ asset('dist/img/logo.png') }}" class="w-100" /></div>
								{% endif %}
								{% if speaker.linkedin is not empty %}
									<div class="icon-linkedin"><a href="{{ speaker.linkedin }}" target="_blank" rel="nofollow"><img alt="Logo linkedin" src="{{ asset('dist/img/linkedin-black.png') }}" /></a></div>
								{% endif %}
							</div>	
							<a href="{{ path('speakers', {slug: speaker.slug}) }}" class="btn">Czytaj BIO</a>
						</div>
						<div class="ms-0 ms-md-4 mt-3 mt-md-0 text-center text-md-start">
							{% set firstName = speaker.name|split(' ',2)[0] %}
							{% set otherName = speaker.name|split(' ',2)[1] %}
							<p><strong>{{ firstName }}<br />{{ otherName }}</strong></p>
							<p>{{ speaker.info|nl2br }}</p>
						</div>
					</div>
				</div>
			{% endfor %}
		</div>
		{% if speakersAll == false %}
			<div class="d-flex justify-content-center mt-5">
				<a href="/prelegenci" class="btn" aria-label="Wszyscy prelegenci">Wszyscy prelegenci</a>
			</div>
		{% endif %}
	</div>
</section>