{% extends "base.html" %}

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

{% block content %}
<div id="main-wrapper">
	{% include '_nav.html' %}
	<div id="main-container-article">
		{% for article in content %}
		<div id="article-container">
			<div id="article-text">
				<div id="article-title">{{ article.title }}</div>
				<div id="article-artists">{{ article.artists | join(', ') }}</div>
				<div id="article-information">{{ article.information }}</div>
				{% if article.bookUrl %}
					<a href="{{ article.bookUrl }}" target="_blank"><div id="article-book">↳ Book</div></a>
				{% endif %}
			</div>
			<div id="article-image">
				<div id="container-article"></div>	
			</div>
		</div>
		{% endfor %}		
	</div>
	<hr>
	<div id="page-header">
		{% for article in content %}
		{% if article.dates %}
		<div class="page-info-cont">
			<div class="page-info-title">/ Date:</div>
			<div class="page-info-entry">{{ article.dates | join(', ') }}</div>
		</div>
		{% endif %}
		{% if article.times%}
		<div class="page-info-cont">
			<div class="page-info-title">/ Time:</div>
			<div class="page-info-entry">{{ article.times | join(', ') }}</div>
		</div>
		{% endif %}
		<div class="page-info-cont">
			<div class="page-info-title">/ Location:</div>
			<div class="page-info-entry">{{ article.location[0] }}</div>
		</div>
		<script>
			// Define a JavaScript variable using a Jinja variable
			const imageUrl = "{{ article.image }}";
		</script>
		{% endfor %}	
	</div>
</div>

<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/scrollbar.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/article.js') }}"></script>
{% endblock content %}