{% extends "base.html" %}

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

{% block content %}
<div id="main-wrapper">
	{% include '_nav.html' %}
	{% include '_list-header.html'%}
	<div id="main-container">
		{% if ex_type == "S4W2" %}
		<div class="list-header">
			STARTS4WaterII ↑
		</div>
		{% endif %}
		{% if ex_type == "LAN" %}
		<div class="list-header">
			Local Artists Network ↑
		</div>
		{% endif %}
		{% if ex_type == "ES" %}
		<div class="list-header">
			Ethics Studio ↑
		</div>
		{% endif %}

		<div id="list-container" class="fadeInUp-animation">
		
		{% for event in content %}
		{% if event.exh_type == ex_type %}
		{% if ex_type == "S4W2"%}
			<a href='/{{ title.lower() }}/starts4waterii/{{ event.title }}'>
		{% endif %}
		{% if ex_type == "LAN"%}
			<a href='/{{ title.lower() }}/local-artists-network/{{event.title}}'>
		{% endif %}
		{% if ex_type == "ES"%}
			<a href='/{{ title.lower() }}/ethics-studio/{{event.title}}'>
		{% endif %}
		<div class="list">
			<div class="list-image">
				<img src="{{ event.image }}" alt="{{event.title}}" loading="lazy">
				<div class="list-image-overlay"></div>
			</div>
			{% if event.title == 'This Is How I Roll' %}
				<div class="list-title">This Is How 👁️ Roll</div>
			{% else %}
				<div class="list-title">{{ event.title }}</div>
			{% endif %}
			<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>
		{% endif %}
		{% 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 %}