<!DOCTYPE html>
<html lang="{{ lang }}">

<head>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-F9Q44T07MM"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());

		gtag('config', 'G-F9Q44T07MM');
	</script>
	<!-- Data Drawling -->
	<meta name="robots" content="all">
	{% block head %}
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta property="og:title" content="{{ og_title|default('Barrin\'s Codex') }}" />
	<meta property="og:description"
		content="{{ og_description|default('Ressources stratégiques pour le Duel Commander') }}" />
	<meta property="og:image" content="{{ og_image|default(url_for('static', filename='img/codex.jpg')) }}" />
	<meta property="og:image:url" content="{{ og_image|default(url_for('static', filename='img/codex.jpg')) }}" />
	{% if og_image_dimensions %}
	<meta property="og:image:width" content="{{ og_image_dimensions[0] }}" />
	<meta property="og:image:height" content="{{ og_image_dimensions[1] }}" />
	{% endif %}
	{% if og_image_secure %}
	<meta property="og:image:secure_url" content="{{ og_image_secure }}" />
	{% endif %}
	<meta name="description" content="Ressources stratégiques pour le Duel Commander">
	<meta name="keywords" content="Magic: the Gathering, MtG, Duel Commander, Commander, Duel, EDH">
	{% block meta %}{% endblock %}
	<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
	<link rel="icon" href="{{ url_for('static', filename='img/icons/codex.svg') }}">
	<!-- Style Sheets -->
	<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/light-theme.css') }}" id="theme-link">
	<!-- Card display -->
	<script src="{{ url_for('static', filename='js/dC.js') }}"></script>
	{% block scripts %}{% endblock %}
	<title>Barrin's Codex</title>
	{% endblock %}
</head>

<body>
	<header role="banner">
		<a href="{{ i18n_url('') }}" class="site-logo">
			<img src="{{ url_for('static', filename='img/icons/barrin.svg') }}" class="svg" alt="Barrin's Codex">
			<h1>Barrin's Codex</h1>
		</a>
		<nav role="navigation">
			<ul>
				<li>{{ link('/archetypes') }}</li>
				<li>{{ link('/articles') }}</li>
				<li>{{ link('/cartes-thematiques') }}</li>
			</ul>
		</nav>
		<nav role="theme-switch">
			<div class="btn-toggle">Toggle Dark Mode</div>
		</nav>
		<!--
		<nav role="translation">
			<ul>
				<li>{{ translation('en', "🇬🇧") }}</li>
				<li>{{ translation('fr', "🇫🇷") }}</li>
			</ul>
		</nav>
		-->
	</header>

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

	{% block article %}
	<article id="article">
		{% block content %}{% endblock %}
	</article>
	{% endblock %}

	<footer>
		{% block footer %}
		<nav role="navigation">
			{{ prev() }}
			{{ top() }}
			{{ next() }}
		</nav>
		{% endblock %}
	</footer>
</body>
{% block script %}{% endblock %}
<script>
	const btn = document.querySelector(".btn-toggle");
	const theme = document.querySelector("#theme-link");

	if (localStorage.getItem("theme") == "dark") {
		theme.href = "{{ url_for('static', filename='css/dark-theme.css') }}";
	}

	btn.addEventListener("click", function() {
		// Swap out the URL for the different stylesheets
		if (localStorage.getItem("theme") == "light") {
			theme.href = "{{ url_for('static', filename='css/dark-theme.css') }}";
			localStorage.setItem("theme", "dark");
		} else {
			theme.href = "{{ url_for('static', filename='css/light-theme.css') }}";
			localStorage.setItem("theme", "light");
		}
	});
</script>
<script src="{{ url_for('static', filename='js/svg_handler.js') }}"></script>
{% block style %}{% endblock %}

</html>
