{% set calendarList = {} %}
{% for key,item in calendar %}
    
        {% set time = item.time|date('H:i')  ~'-'~ item.timeEnd|date('H:i')  %}

        {% if calendarList[time] is not defined %}

            {% set calendarList = calendarList|merge({ (time) : {
                (key) :{
                    title: item.title,
                    time: time,
                    centered: item.centered,
                    color: item.color,
                    content: item.content,
                    leader: item.leader,
                    leader2: item.leader2,
                    panellist1: item.panellist1,
                    panellist2: item.panellist2,
                    panellist3: item.panellist3,
                    panellist4: item.panellist4
                }
            }
            }) %}
        {% else %}
            {% set tmpList = calendarList[time] %}
            {% set tmpList = tmpList|merge({ (key) :{
                title: item.title,
                time: time,
                centered: item.centered,
                color: item.color,
                content: item.content,
                leader: item.leader,
                leader2: item.leader2,
                panellist1: item.panellist1,
                panellist2: item.panellist2,
                panellist3: item.panellist3,
                panellist4: item.panellist4
            }
            }) %}
            {% set calendarList = calendarList|merge({ (time) : tmpList}) %}

        {% endif %}
 
{% endfor %}

<section>
	<div class="container">
		{% if existH1 %}
			<h2>Agenda</h2>
		{% else %}
			<h1>Agenda</h1>
		{% endif %}
		<div class="rwd-table">
			<div class="row-table bg-black mobile-hidden">
				<div class="column-table p-3"><big><strong>Godzina</strong></big></div>
				<div class="column-table p-3"><big><strong>Tytuł/opis</strong></big></div>
				<div class="column-table p-3"><big><strong>Osoby prowadzące</strong></big></div>
				<div class="column-table p-3 text-end"><big><strong>Panelistki i paneliści</strong></big></div>
			</div>
			{% for item in calendarList %}	
				<div class="{% if loop.index%2==1 %} bg-box{% endif %} bg-box-{{ item|first.color }}">
					{% for el in item %}
						{% if loop.index>1 %}<div class="hr"></div>{% endif %}
						{% if el.centered %}
							<div class="row-table bg-box my-3 justify-content-start justify-content-sm-center bg-orange">
								<div class="column-table p-3 text-end"><strong>{{ el.time }}</strong></div>
								<div class="column-table p-3"><strong>{{ el.content|raw }}</strong></div>
							</div>
						{% else %}
							<div class="row-table">
								<div class="column-table p-3">{% if loop.first %}{{ el.time }}{% endif %}</div>
								<div class="column-table p-3">{{ el.content|raw }}</div>
								<div class="column-table p-3">
									{% if el.leader is not empty %}
										<div class="mobile-show"><h4>Osoby prowadzące:</h4></div>
										<div class="person-img-small v2"><a href="{{ path('speakers', {slug: el.leader.slug}) }}" aria-label="Zobacz BIO {{ el.leader.getName() }}">{{ sonata_thumbnail(el.leader.image, 'person_person_small_calendar') }}</a></div>
							
								        {% set firstName = el.leader.getName()|split(' ',2)[0] %}
										{% set otherName = el.leader.getName()|split(' ',2)[1] %}
										<p><a href="{{ path('speakers', {slug: el.leader.slug}) }}" aria-label="Zobacz BIO {{ el.leader.getName() }}"><strong>{{ firstName }}<br />{{ otherName }}</strong></a></p>
										{% if el.leader2 is not empty %}
											<div class="person-img-small v2"><a href="{{ path('speakers', {slug: el.leader2.slug}) }}" aria-label="Zobacz BIO {{ el.leader2.getName() }}">{{ sonata_thumbnail(el.leader2.image, 'person_person_small_calendar') }}</a></div>
								
									        {% set firstName2 = el.leader2.getName()|split(' ',2)[0] %}
											{% set otherName2 = el.leader2.getName()|split(' ',2)[1] %}
											<p><a href="{{ path('speakers', {slug: el.leader2.slug}) }}" aria-label="Zobacz BIO {{ el.leader2.getName() }}"><strong>{{ firstName2 }}<br />{{ otherName2 }}</strong></a></p>
									    {%  endif %}
								    {%  endif %}

								</div>
								<div class="column-table p-3">
									<div class="d-flex calendar-panellists">
										{% if el.panellist1 is not empty or el.panellist2 is not empty or el.panellist3 is not empty or el.panellist4 is not empty %}
											<div class="mobile-show"><h4>Panelistki i paneliści:</h4></div>
										{% endif %}
										{% if el.panellist1 is not empty %}
											<div class="person-img-small v3 me-2 mb-2"><a href="{{ path('speakers', {slug: el.panellist1.slug}) }}" aria-label="Zobacz BIO {{ el.panellist1.getName() }}">
												{{ sonata_thumbnail(el.panellist1.image, 'person_person_small_calendar') }}
											</a></div>
									    {%  endif %}
									    {% if el.panellist2 is not empty %}
											<div class="person-img-small v3 me-2 mb-2"><a href="{{ path('speakers', {slug: el.panellist2.slug}) }}" aria-label="Zobacz BIO {{ el.panellist2.getName() }}">
												{{ sonata_thumbnail(el.panellist2.image, 'person_person_small_calendar') }}
											</a></div>
									    {%  endif %}
								    
									    {% if el.panellist3 is not empty %}
											<div class="person-img-small v3 me-2 mb-2"><a href="{{ path('speakers', {slug: el.panellist3.slug}) }}" aria-label="Zobacz BIO {{ el.panellist3.getName() }}">
												{{ sonata_thumbnail(el.panellist3.image, 'person_person_small_calendar') }}
											</a></div>
									    {%  endif %}
									    {% if el.panellist4 is not empty %}
											<div class="person-img-small v3"><a href="{{ path('speakers', {slug: el.panellist4.slug}) }}" aria-label="Zobacz BIO {{ el.panellist4.getName() }}">
												{% if el.panellist4.image is not empty %}
													{{ sonata_thumbnail(el.panellist4.image, 'person_person_small_calendar') }}
												{% else %}
													<img alt="{{ el.panellist4.name }}" src="{{ asset('favicon-32x32.png') }}"  />
												{% endif %}
											</a></div>
									    {% endif %}
									
									</div>
								</div>
							</div>
						{% endif %}
					{% endfor %}
				</div>
			{% endfor %}
		</div>

		{% if calendarAll == false %}
			<div class="d-flex justify-content-center mt-5">
				<a href="/agenda" class="btn" aria-label="Pełna agenda">Pełna agenda</a>
			</div>
		{% endif %}

	</div>
</section>