{% extends "layout.html" %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/decklist.js') }}"></script>
{% endblock %}

{% block card_display %}
<div id="card-modal" class="modal" onclick="this.style.display='none'" tabindex="-1">
	<div id=card-prev class="modal-nav">&#xf077</div>
	<img class="modal-content" id="card-image">
	<div id=card-next class="modal-nav">&#xf078</div>
</div>
<div id="card-hover" class="hover-modal" tabindex="-1">
	<img class="modal-content" id="card-hover-image">
</div>
{% endblock %}

{% block content %}
{% block archetype_name %}{% endblock %}
<div id="decklist" class="decklist" style="display: none">
	<h2 id="deck-name"></h2>
	<p id="deck-header"></p>
	<h3 id="command_zone">Command Zone</h3>
	<ul id="commanders">
	</ul>
	<h3 id="library-header"></h3>
	<ul id="library-list">
	</ul>
</div>
{% block archetype %}{% endblock %}
{% endblock %}

{% block script %}
<script>
	window.onload = function () {
		const content = document.querySelector('meta[property="decklist"]').content
		const decklist = JSON.parse(JSON.parse(content))
		/**
		 * Code need to be reworked
		document.getElementById("card-modal").addEventListener("keydown", modalKeydown)
		document.getElementById("card-prev").addEventListener("click", prevCard)
		document.getElementById("card-next").addEventListener("click", nextCard)
		 */
		displayDeck(decklist)
	}
</script>
{% endblock %}
