{% 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">
					<div>{{ article.title }}</div>
				</div>
				<div id="article-artists">{{ article.artists | join(', ') }}</div>
				{% if article.bookUrl %}
						<div class="hyperlink"><a href="{{ article.bookUrl }}" target="_blank">Tickets</a></div>
					{% endif %}
				<div id="article-stats">
					{% for article in content %}
					{% if article.dates %}
					<div class="page-info-cont">
						<div class="page-info-title">Date(s):</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(s):</div>
						<div class="page-info-entry">{{ article.times | join(', ') }}</div>
					</div>
					{% endif %}
					<div class="page-info-cont">
						<div class="page-info-title">Location(s):</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 id="article-information"><br>{{ article.information | replace('\n', '<br>') | safe }}</div>
			</div>
			<div id="article-image">
				<div id="container-article"></div>	
			</div>
		</div>
		{% 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 %}