{% extends "base.html" %}

{% block title %}{{ '| '+ title }}{% endblock %}

{% block content %}
<div id="main-wrapper">
	{% include '_nav.html' %}
	<div id="page-header">
		<a href="/exhibitions"><div class="hyperlink-header" id="exhibitions">\Exhibitions</div></a>
		<a href="/events"><div class="hyperlink-header" id="events">\Events</div></a>
		<a href="/conferences"><div class="hyperlink-header" id="conferences">\Conferences</div></a>
	</div>
	<hr>
	<div id="main-container">
		<div id="list-info-container">
			{% if title == 'Conferences'%}
				<p id="list-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare quis mauris consequat molestie. Cras porta porta dignissim.</p>
			{% endif %}
			{% if title == 'Exhibitions'%}
				<p id="list-info-text">Xorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare quis mauris consequat molestie. Cras porta porta dignissim. Pellentesque blandit felis nec sapien cursus, in pulvinar nunc semper. Suspendisse vitae varius ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed luctus mi sit amet lobortis interdum. Curabitur quis blandit massa. Vestibulum fringilla tortor sit amet lacus consequat tristiq.</p>
			{% endif %}
			{% if title == 'Events'%}
				<p id="list-info-text">Porem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare quis mauris consequat molestie. Cras porta porta dignissim. Pellentesque blandit felis nec sapien cursus, in pulvinar nunc semper. Suspendisse vitae varius ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
			{% endif %}
			</div>

		<div id="list-container" class="fadeInUp-animation">
		{% for event in content %}
		<a href='/{{ title.lower() }}/{{ event.title }}'>
		<div class="list">
			<div class="list-image">
				<img src="{{ event.image }}" alt="{{ event.title }}" loading="lazy">
				<div class="list-image-overlay"></div>
			</div>
			<div class="list-title">{{ event.title }}</div>
			<div class="list-artists">
				<p>{{ event.artists | join(', ') }}</p>
			</div>
			<div class="list-details">
				{% if event.dates %}
				<div class="list-date">● {{ event.dates | join(', ') }}</div>
				{% endif %}
				{% if event.times %}
				<div class="list-date">● {{ event.times | join(', ')}}</div>
				{% endif %}
				
				<div class="list-date">● {{ event.location[0] }}</div>
			</div>
		</div>
		</a>
		{% endfor %}
		</div>
	</div>
</div>
<div id="container"></div>
<script type="module" src="{{ url_for('static', filename='js/list.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
{% endblock content %}