{% extends "base.html" %}

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

{% block content %}
<div id="main-wrapper">
	{% include '_nav.html' %}
	<div id="page-header">
		<div>/{{ title }}</div>
	</div>
	<hr>
	<div id="main-container">
		<div id="list-container">
		{% for event in content %}
		<a href='/{{ title.lower() }}/{{ event.title }}'>
		<div class="list">
			<div class="list-image">
				<img src="{{ event.image }}" alt="{{ event.title }}">
				<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">
				<div class="list-date">● {{ event.date }}</div>
				<div class="list-date">● {{ event.time }}→{{ event.end_time }}</div>
				<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>
{% endblock content %}