<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-148161067-1"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());
		gtag('config', 'UA-148161067-1');
	</script>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Alucho Portfolio</title>
	<link rel="stylesheet" href="{{ 'css/hamburger.css' | static }}">
	<link rel="stylesheet" href="{{ 'css/main.css' | static }}">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
	<link rel="icon" type="image/x-icon" href="/favicon.ico">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
	<link rel="manifest" href="/site.webmanifest">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
	<meta name="msapplication-TileColor" content="#da532c">
	<meta name="theme-color" content="#ffffff">
	<script src="{{ 'js/eye.js' | static }}"></script>
</head>
<body id="body">
	<header id="mobile-header">
		<!-- This checkbox will give us the toggle behavior, it will be hidden, but functional -->
		<input id="toggle" type="checkbox">

		<!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element -->

		<!-- This label is tied to the checkbox, and it will contain the toggle "buttons" -->
		<label class="toggle-container" for="toggle">
				<!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon -->
				<span class="button button-toggle"></span>
		</label>

		<!-- The nav menu -->
		<nav class="nav">
				<a class="nav-item" href="https://lmgonzalves.github.io/morphing-hamburger-menu/">Dashboard</a>
				<a class="nav-item" href="https://lmgonzalves.github.io/morphing-hamburger-menu/">History</a>
				<a class="nav-item" href="https://lmgonzalves.github.io/morphing-hamburger-menu/">Statistics</a>
				<a class="nav-item" href="https://lmgonzalves.github.io/morphing-hamburger-menu/">Settings</a>
		</nav>
	</header>
	<header id="wide-header">
		<div class="header-box">
			<div class="lbox">
				<div id="lang-chooser" class="vbox">
					<a class="first en {% if lang == 'en' %}selected{% endif %}" href="{{ 'en' | lang_url }}">en</a>
					<a class="first {% if lang == 'es' %}selected{% endif %}" href="{{ 'es' | lang_url }}">es</a>
				</div>
				<object id="logo" type="image/svg+xml" data="{{ 'svg/alucho-logo.svg' | static }}"></object>
				<div class="vbox">
					<div id="alucho-title" class="hbox"><h1 class="header-title"><a>Alejandro Rodríguez</a></h1></div>
					<div id="designer-subtitle" class="hbox"><a>{{ 'graphic designer' | lang }}</a></div>
				</div>
			</div>
			<div id="menu" class="rbox">
					<div class="vbox">
						<div class="hbox">
							<h1 class="header-title">
								<div><a href="{{ '/work' | cur_lang }}" {% if work_selected %}class="selected"{% endif %}>{{ 'work' | lang }}</a></div> /
								<div><a href="{{ '/news' | cur_lang }}" {% if news_selected %}class="selected"{% endif %}>{{ 'news' | lang }}</a></div> /
								<div><a href="{{ '/about-and-contact' | cur_lang }}" class="last{% if about_selected %} selected{% endif %}">{{ 'about & contact' | lang }}</a></div>
							</h1>
						</div>
						<div class="hbox">
							<div class="header-subtitle">
								<div><a href="{{ '/work/all' | cur_lang }}" {% if all_selected %}class="selected"{% endif %}>{{ 'all' | lang }}</a></div> /
								<div><a href="{{ '/work/poster' | cur_lang }}" {% if poster_selected %}class="selected"{% endif %}>{{ 'poster' | lang }}</a></div> /
								<div><a href="{{ '/work/illustration' | cur_lang }}" {% if illustration_selected %}class="selected"{% endif %}>{{ 'illustration' | lang }}</a></div> /
								<div><a href="{{ '/work/editorial' | cur_lang }}" {% if editorial_selected %}class="selected"{% endif %}>{{ 'editorial' | lang }}</a></div> /
								<div><a href="{{ '/work/branding' | cur_lang }}" {% if branding_selected %}class="selected"{% endif %}>{{ 'branding' | lang }}</a></div> /
								<div><a href="{{ '/work/other' | cur_lang }}" class="last{% if other_selected %} selected{% endif %}">{{ 'other' | lang }}</a></div>
							</div>
						</div>
					</div>
			</div>
		</div>
	</header>
	<main>
		{% block main %}
		{% endblock %}
	</main>
	<footer>
		<div class="footer-content">
			<div class="copyright">
				<a class="first">© Alejandro Rodríguez Fornés</a> / <a>2019</a>
			</div>
			<div class="hbox social">	
				<a href="https://www.facebook.com/alucho">{{ 'facebook' | svg }}</a>
				<a href="https://www.linkedin.com/alucho">{{ 'linkedin' | svg }}</a>
				<a href="https://www.instagram.com/alucho">{{ 'instagram' | svg }}</a>
			</div>
		</div>
	</footer>

	<form name="setLangEnglish" action="/i18n/setlang/" method="POST">
		{# {% csrf_token %} #}
		<input name="next" type="hidden" value="{{ path }}"/>
		<input type="hidden" name="language" value="en"/>
	</form>

	<form name="setLangSpanish" action="/i18n/setlang/" method="POST">
		{# {% csrf_token %} #}
		<input name="next" type="hidden" value="{{ path }}"/>
		<input type="hidden" name="language" value="es"/>
	</form>
  <dialog class="hidden" id="dialog-image-modal">
		<div id="modal-image-container" class="vbox">
			<div class="hbox">
				<div id="img-prev">{{ 'prev' | svg}}</div>
				<img id="modal-image" src="{{ list(images('work/poster'))[1].filenames[0] | static }}" alt="Ejemplo">
				<div id="img-next">{{ 'next' | svg}}</div>
			</div>
		</div>
	</dialog>
	<script src="{{ 'js/image-modal.js' | static }}"></script>
	<link rel="stylesheet" href="{{ 'css/image-modal.css' | static }}">
</body>
</html>
