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

{% block title %}
	Consultrer vos commandes
{% endblock %}

{% block headerCompte %}
	gColor
{% 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 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">
			<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-10 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 ft-s-30-r600 t-a-c">
						Vos informations
					</h1>
				</div>
			</div>
			{% if app.session.get('client_id') %}
				<div class="dp-f-c gp-30 ft-s-20 mar-t-220">
					<div class="dp-f-r j-c-c a-i-c w-s-nw f-d-c-r700">
						<a class="barre-menu-button barre-menu-button-left" href="{{ path('app_commande') }}">
							Vos commandes
						</a>
						<a class="barre-menu-button dg2BgColor" href="{{ path('app_compte') }}">
							Vos informations
						</a>
						<a class="barre-menu-button barre-menu-button-right" href="{{ path('app_client_logout') }}">
							Déconnexion
						</a>
					</div>
					<div class="dp-f-c gp-30 w-100-p">
						{% set heure = "now"|date("H") %}
						{% set salutation = (heure >= 19 or heure < 5) ? 'Bonsoir' : 'Bonjour' %}
						<p class="ft-s-35 ft-s-25-r1000 ft-s-18-r700">
							<b>
								<span class="gColor">{{ salutation }}</span>
								{{ app.session.get('client_prenom') }}
								{{ app.session.get('client_nom') }}
							</b>
						</p>
                        <p>
                        <b>Votre email :</b><br/><span class="gColor">{{ app.session.get('client_email') }}</span>
                        </p>
						<a href="{{ path('app_request_email_edit_password', {'email': app.session.get('client_email')}) }}" class="button t-a-c">
							Modifier mon mot de passe
						</a>
					</div>

				</div>
			{% else %}
				<div class="dp-f-c gp-30 ft-s-20 mar-t-220">
					<div>
						<div class="little"></div>
						<h2 class="ft-s-25">Connectez vous pour avoir accès à vos commande et à votre espace client.</h2>
					</div>
					<div class="dp-f-r j-c-c a-i-c">
						<a class="barre-menu-button barre-menu-button-left" href="{{ path('app_client_login') }}">
							Connexion
						</a>
						<a class="barre-menu-button barre-menu-button-right" href="{{ path('app_inscription') }}">
							Inscription
						</a>
					</div>
				</div>
			{% endif %}
		</div>
	</div>
	<script>
		function commanderProductArrowIcon(iconId, containerId) { // Get the container element
const container = document.getElementById(containerId);

// Toggle the rotation class on the icon
if (document.getElementById(iconId)) {
const icon = document.getElementById(iconId);
icon.classList.toggle('rotate-180');
}

// Toggle the show class on the container to trigger the animation
container.classList.toggle('max-h-500');
}
	</script>
{% endblock %}