{# SPDX-License-Identifier: EUPL-1.2 #}

		<section id="contact">
			<div class="layout-contact layout-maxed">
				<div class="md:flex p-36">

					<article class="contact-card border-rounded flex flex-col justify-between flex-grow bg-blue bg-section bg-overlay bg-glazient color-white sm:p-24 md:m-24">
						<div class="card-content-top">
                            <h3 id="title-card" class="color-white mt-8">{{ meta.titlecard }}</h3>
							<?php h3('title-card', 'color-white mt-8')?>
							<?php txt('intro-card', 'text-bold md:mt-24')?>
						</div>
						<div class="card-content-bottom">
							<ul class="card-info is-unstyled text-smaller text-bold mt-24 md:mb-24">
								<li><?php txt('item-1', 'ml-8')?></li>
								<li><?php txt('item-2', 'ml-8')?></li>
								<li><?php txt('item-3', 'ml-8')?></li>
							</ul>
						</div>
					</article>

					<article class="contact-form sm:p-24 md:m-24">

						<form id="form-contact">

							<?php h2('title-form', 'color-blue')?>
							<?php txt('intro-form', 'mb-16')?>

							<div class="editable-hidden">

								<label for="email-to"><?php _e("Email to")?> (your@domain.com)<span class="color-red">*</span></label><br>
								<?input("email-to", array('name' => 'email-to', 'placeholder' => __("Email to"), 'class' => 'w100'));?>
								<?input("email-hash", array('name' => 'email-hash', 'type' => 'hidden', 'class' => 'hidden'));?>

							</div>

							<div class="grid grid-cols-2 gap-36 mt-24">
								<div>
									<input type="text" name="name" id="name" placeholder="<?php _e("Name / Forname")?> *" class="w100" required>
								</div>
								<div>
									<input type="email" name="email-from" id="email-from" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" autocomplete="email" placeholder="<?php _e("Email")?> *" class="w100" required>
								</div>
								<div class="col-span-full">
									<input type="text" name="subject" id="subject" placeholder="<?php _e("Subject")?> *" class="w100" required>
								</div>
								<div class="col-span-full">
									<textarea name="message" id="message" placeholder="<?php _e("Message")?> *" rows="5" cols="150" class="mb-8" required></textarea>
								</div>
							</div>


							<div class="">

								<!-- Captcha -->
								<?
								$chiffre = array('zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten');
								$operators = array("+", "-");
								$operator = $operators[array_rand($operators)];
								$nb1 = rand(1, 5);//10
								$nb2 = ($operator === '-') ? mt_rand(1, $nb1) : mt_rand(1, 5);// on évite les résultats négatifs en cas de soustraction
								eval('$captcha = strval('.$nb1.$operator.$nb2.');');
								$captcha_hash = hash('sha256', $captcha.$GLOBALS['pub_hash']);
								// On change le signe "-" moins de calcul en "−" lisible en accessibilité
								?>
								<div>
									<label for="captcha">
										<?php _e("For security reasons please solve the following calculation")?><span class="color-red">*</span> :
										<?=(__($chiffre[$nb1])." ".($operator=='-'?'−':$operator)." ".__($chiffre[$nb2]));?> =
									</label>
									<input type="text" name="captcha" id="captcha" placeholder="?" class="text-center" autocomplete="off" required>

									<input type="hidden" name="captcha_hash" value="<?=$captcha_hash;?>">
								</div>

								<!-- RGPD -->
								<div class="mt-24">
									<label for="rgpdcheckbox" class="inline"><?php _e("Please verify your entry and check the box to accept the storage and processing of this information.")?><span class="color-red">*</span></label>
									<input type="checkbox" name="rgpdcheckbox" id="rgpdcheckbox" required>
								</div>

							</div>


							<!-- Bouton envoyer -->
							<div class="foat-right mt-36">
								<button type="submit" id="send" class="btn btn--line border-rounded text-bold">
									<?php _e("Send")?>
									<i class="icon moon-arrow-right ml-24" aria-hidden="true"></i>
								</button>
							</div>

							<?php txt('texte-rgpd', 'mt-36')?>

							<input type="hidden" name="rgpd_text" value="<?=htmlspecialchars(@$GLOBALS['content']['rgpd']);?>">

							<input type="hidden" name="nonce_contact" value="<?=nonce("nonce_contact");?>">

							<input type="hidden" name="referer" value="<?=htmlspecialchars((isset($_SERVER['HTTP_REFERER'])?$_SERVER['HTTP_REFERER']:""));?>">

						</form>

					</article>

				</div>
			</div>
		</section>


		<script>
			// Titre de la page en cours
			// title = document.title;

			// Pour rétablir le fonctionnement du formulaire
			function activation_form(){
				desactive = false;

				$("#form-contact #send .moon-settings").removeClass("icon-spin moon-settings").addClass("moon-arrow-right");

				// Activation des champs du formulaire
				$("#form-contact input, #form-contact textarea, #form-contact button").attr("readonly", false).removeClass("disabled");

				// On peut soumettre le formulaire avec la touche entrée
				//$("#form-contact").on("submit", function(event) { send_mail(event) });
				$("#form-contact button").attr("disabled", false);
			}

			desactive = false;
			function send_mail(event)
			{
				event.preventDefault();

				if($("#captcha").val()=="" || $("#name").val()=="" || $("#subject").val()=="" || $("#message").val()=="" || $("#email-from").val()=="" || $("#rgpdcheckbox").prop("checked") == false)
				error(__("Thank you for completing all the required fields!"));
				else if(!desactive)
				{
					desactive = true;

					// Icone envoi en cours
					$("#form-contact #send .moon-settings").removeClass("moon-settings").addClass("icon-spin moon-settings");

					// Désactive le formulaire
					$("#form-contact input, #form-contact textarea, #form-contact button").attr("readonly", true).addClass("disabled");

					// Désactive le bouton submit (pour les soumissions avec la touche entrée)
					//$("#form-contact").off("submit");
					//$("#form-contact button").attr("disabled", true);// => ne permet pas le focus sur le btn une fois envoyer

					$.ajax(
						{
							type: "POST",
							url: path+"theme/"+theme+(theme?"/":"")+"tpl/contact.php?mode=send-mail",
							data: $("#form-contact").serializeArray(),
							success: function(html){ $("body").append(html); }
						});
				}
			}

			$(function()
			{
				// Message d'erreur en cas de mauvaise saisie du mail. Pour l'accessibilité
				var email_from = document.getElementById("email-from");
				email_from.addEventListener("invalid", function() {
					email_from.setCustomValidity("<?_e("Invalid email")?>. <?_e("Expected format")?> : name@example.com")
				}, false);
				email_from.addEventListener("input", function() {
					email_from.setCustomValidity("");
				}, false);

				// Soumettre le formulaire
				$("#form-contact").submit(function(event)
				{
					send_mail(event)
				});
				// Avant la sauvegarde
					before_save.push(function() {
						// Encode
						if(data["content"]["email-to"] != undefined)
							data["content"]["email-to"] = btoa(data["content"]["email-to"]);
					});

					// Edit
					edit.push(function()
					{
						// Décode
						$("#email-to").val(function(index, value) {
							if(value) return atob(value);
						});
					});

				});
			</script>