{% if app.request.cookies.get('layerEdition') is not defined or app.request.cookies.get('layerEdition') is empty  %}
	<div class="bg-layer-wrapper">
		<div class="bg-layer-top">	
			<div class="inner bg-layer">
				<div class="p-5 position-relative">
					<div id="closeLayer" onclick="setCookieLayer()" class="position-absolute right">X</div>
					<div class="text-center mb-3">
						<h4 class="text-uppercase mb-3"><big>Druga edycja Akcji Tron już wkrótce!<br />
						Zobacz, dlaczego warto wziąć udział.</big></h4>
						<iframe width="560" height="315" src="https://www.youtube.com/embed/T7pcnsL6fUs?si=ypj3Ri2sf95HjHL2&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
					</div>
					<div id="formWrapper">
						<form action="/post/edition-form" method="post" id="editionForm" onsubmit="return submitForm()">
							<h4><label for="editionEmail">Zostaw nam swój email - damy Ci znać, kiedy ruszy rejestracja.</label></h4>
							<div class="d-flex flex-wrap align-items-center">
								<div class="input"><input class="form-control" type="text" name="editionEmail" id="editionEmail" required autocomplete="off"/></div>
								<button type="submit" id="editionSubmit" aria-label="Wyślij"></button>
							</div>
							<div id="errorEdition" class="d-none text-center"><small>Błędny e-mail</small></div>
						</form>
					</div>
				</div>
			</div>
			<div class="bg-bottom"></div>
		</div>
	</div>

	<script type="text/javascript">
	
		function setCookieLayer(){
			let expires = "";
		
			const date = new Date();
			date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
			expires = "; expires=" + date.toUTCString();
			
			document.cookie = "layerEdition=1" + expires + "; path=/";
		}

		function submitForm(){
			const input = document.getElementById('editionEmail');
			const error = document.getElementById('errorEdition');
			const form = document.getElementById('editionForm');
			const formWrapper = document.getElementById('formWrapper');
			
	      	if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(input.value) == false)
	        	error.classList.remove('d-none');
	        else{
	        	error.classList.add('d-none');

	        	const formData = new FormData(form);
         
				const XHR = new XMLHttpRequest();
				XHR.open("POST", form.getAttribute('action'));
				XHR.responseType = 'text';
				XHR.onreadystatechange = () => {
				if (XHR.readyState === XMLHttpRequest.DONE && XHR.status === 200) {
				   if(JSON.parse(XHR.response)['status']=='ok'){
				      formWrapper.innerHTML = '<h4 class="text-center"><big>Twój adres mailowy został dodany.<br />Dziękujemy!</big></h4>';
				   }
				}
				}
				XHR.send(formData);
	        }

	        return false;
    	}
   

	</script>

{% endif %}