{% extends 'base.html.twig' %}

{% block title %}
	Erreur lors du paiement
{% endblock %}

{% block metaDesc %}Une erreur est survenue lors du paiement de votre commande chez Vulcan' Affûtage. Veuillez réessayer ou contacter notre service client.{% endblock %}

{% block headerPanier %}
	gColor
{% endblock %}

{% block seoIndex %}
	<meta name="robots" content="noindex, nofollow">
{% endblock %}

{% block body %}
	<div class="header-image w-100-p h-100-vh dp-f j-c-c a-i-c p-f z-i--1">
		<img class="p-a max-h-65-p max-w-90-p b-60 b-u-r600 op-3" src="/assets/logo-sf2.webp" alt="Header image">
	</div>
	<div class="pageContainer l-h-1-5">
		<div class="p-r dp-f-c bg-va-transparent pad-30 gp-30 b-s-b-b b-r-10 ovf-h mar-b-100 ">
			<div class="contact-header p-a t-0 l-0 w-100-p h-200 dp-f-c j-c-c a-i-c pad-10 gBgColor b-s-b-b">
				<div class="dp-f-c gp-5 b-r-5 dp-f-c j-c-c a-i-c gBgColor b-s-b-b w-100-p h-100-p pad-15 b-s-b-b" style="border: 2px solid var(--dom-cwhite);">
					<h1 class="cwColor ft-s-45 t-a-c ft-s-35-r1000 ft-s-26-r600" id="titlePage">ERREUR LORS DU PAIEMENT</h1>
					<p class="txtGColor ft-f-chomsky ft-s-20 t-a-c ft-s-16-r600">Vous n'avez pas été débité</p>
				</div>
			</div>
			<div class="dp-f-c gp-50 ft-s-20 mar-t-220">
				<section class="w-100-p dp-f-r j-c-s-b a-i-c gp-10">
					<div class="dp-f" title="Panier">
						<?xml version="1.0" encoding="UTF-8"?>
						<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" height="35" class="ico-cart-state" fill="currentColor">
							<path d="M23.297,9.034c-.57-.657-1.396-1.034-2.267-1.034h-.086C20.445,3.506,16.625,0,12,0S3.555,3.506,3.056,8h-.056c-.87,0-1.695,.377-2.266,1.034S-.093,10.562,.03,11.425l1.061,7.424c.42,2.937,2.974,5.151,5.94,5.151h9.969c2.966,0,5.52-2.215,5.94-5.151l1.061-7.424c.123-.862-.134-1.733-.704-2.391ZM12,2c3.52,0,6.441,2.613,6.928,6H5.072c.487-3.387,3.408-6,6.928-6Zm10.021,9.142l-1.061,7.424c-.28,1.958-1.982,3.435-3.96,3.435H7.031c-1.979,0-3.681-1.477-3.96-3.435l-1.061-7.424c-.042-.291,.042-.574,.234-.797,.193-.223,.461-.345,.755-.345H21.03c.294,0,.562,.122,.756,.345,.192,.223,.276,.506,.234,.797Zm-9.021,1.858v6c0,.553-.447,1-1,1s-1-.447-1-1v-6c0-.553,.447-1,1-1s1,.447,1,1Zm5,0v6c0,.553-.447,1-1,1s-1-.447-1-1v-6c0-.553,.447-1,1-1s1,.447,1,1Zm-10,0v6c0,.553-.447,1-1,1s-1-.447-1-1v-6c0-.553,.447-1,1-1s1,.447,1,1Z"/>
						</svg>
					</div>

					<div class="separator w-u f-1 separator-cart-state active"></div>

					<div class="dp-f">
						<?xml version="1.0" encoding="UTF-8"?>
						<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" height="35" class="ico-cart-state" fill="currentColor">
							<path d="m3.307,11.412c5.009,2.212,9.836-2.176,8.452-7.136-.546-1.959-2.077-3.489-4.036-4.035C2.764-1.143-1.624,3.684.588,8.692c.532,1.205,1.514,2.187,2.719,2.719Zm1.693-9.412h2v3.586l2.207,2.207-1.414,1.414-2.793-2.793V2Zm19,8.5c0-3.033-2.468-5.5-5.5-5.5h-1.5v-.5h0c0-1.93-1.57-3.5-3.5-3.5h-1.26c.715.891,1.238,1.939,1.52,3.083.141.088.241.238.241.417,0,0,0,0,0,0v12.499H3v-3h0v-.587C1.838,12.942.815,12.205,0,11.279v2.721s0,0,0,0v5.999h3.058c-.034.162-.058.328-.058.5,0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5c0-.172-.024-.338-.058-.5h8.115c-.034.162-.058.328-.058.5,0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5c0-.172-.024-.338-.058-.5h3.058v-9.5Zm-5.5-2.5c1.379,0,2.5,1.122,2.5,2.5v2.5h-4v-5h1.5Z"/>
						</svg>
					</div>

					<div class="separator w-u f-1 separator-cart-state active"></div>

					<div class="dp-f">
						<img src="/assets/paypal-logo2.svg" alt="Icons PayPal" class="max-h-35 max-h-25-r600 img-cart-state"></img>
					</div>

					<div class="separator w-u f-1 separator-cart-state active"></div>

					<div class="dp-f">
						<?xml version="1.0" encoding="UTF-8"?>
						<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" height="35" class="ico-cart-state rColor" fill="currentColor">
							<path d="M16,8a1,1,0,0,0-1.414,0L12,10.586,9.414,8A1,1,0,0,0,8,9.414L10.586,12,8,14.586A1,1,0,0,0,9.414,16L12,13.414,14.586,16A1,1,0,0,0,16,14.586L13.414,12,16,9.414A1,1,0,0,0,16,8Z"/>
							<path d="M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,22A10,10,0,1,1,22,12,10.011,10.011,0,0,1,12,22Z"/>
						</svg>

					</div>
				</section>
				<p class="t-a-c ft-s-20 t-a-c ft-s-16-r600">
					{{ message }}
				</p>
			</div>
		</div>
	</div>


{% endblock %}