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

{% block title %}Mon profile
{% endblock %}

{% block content %}
	<div class="h-screen p-2 md:p-4 overflow-y-auto scroll-smooth">
		<div class="flex flex-col gap-3 md:gap-6 max-w-4xl mx-auto">
			<h1 class="text-xl md:text-3xl font-bold text-stone-800 dark:text-stone-200">Mon profil</h1>

			<section class="bg-white dark:bg-stone-700 rounded-2xl shadow-md border-2 border-stone-500 p-6 transition-all duration-200">
				<div class="flex items-start justify-between">
					<h2 class="text-lg md:text-xl font-semibold mb-2 md:mb-4 text-stone-700 dark:text-stone-100">
						Informations personnelles
					</h2>
				</div>

				<div class="mt-5 flex flex-col sm:flex-row sm:items-center gap-6 relative">
					{{ component('change_avatar', { user: user }) }}

					<div class="flex-1 space-y-1">
						{{ component('change_name', { user: user }) }}
						<p class="text-sm text-stone-600 dark:text-stone-400 flex items-center gap-1">
							{{ ux_icon('ix:e-mail-filled', { class: 'w-4 h-4' }) }}
							<span>{{ user.email }}</span>
						</p>
						<p class="text-sm text-stone-500 dark:text-stone-500 flex items-center gap-1">
							{{ ux_icon('guidance:calendar', { class: 'w-4 h-4' }) }}
							<span>Membre depuis le
								{{ user.joinedAt|date('d/m/Y') }}</span>
						</p>
					</div>
				</div>
			</section>

			<section class="bg-white dark:bg-stone-700 rounded-2xl shadow-md border-2 border-stone-500 p-6 transition-all duration-200">
				<div>
					<h2 class="text-lg md:text-xl font-semibold mb-2 md:mb-4 text-stone-700 dark:text-stone-100">Modifier mes informations de connexion</h2>
					{{ component('change_email') }}
					<hr class="my-3 border border-stone-500 dark:border-stone-200"/>
					{{ component('change_password') }}
				</div>
			</section>

			<section class="bg-white dark:bg-stone-700 rounded-2xl shadow-md border-2 border-stone-500 p-6 transition-all duration-200">
				<h2 class="text-lg md:text-xl font-semibold mb-2 md:mb-4 text-stone-700 dark:text-stone-100">Paramètres du compte</h2>

				<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 md:gap-6">
					<div class="w-full md:w-1/2">
						{{ component('change_theme', { user: user }) }}
					</div>

					<hr class="my-1.5 border border-stone-500 dark:border-stone-200 w-full md:w-px md:h-auto md:self-stretch "/>

					<div class="w-full md:w-1/2">
						<span class="text-stone-700 dark:text-stone-200">Notifications :
							{% if user.notifications %}
								<span class="text-green-600 font-semibold">Activées</span>
							{% else %}
								<span class="text-red-600 font-semibold">Désactivées</span>
							{% endif %}
						</span>
						<button class="text-blue-600 hover:underline">Gérer</button>
					</div>
				</div>
			</section>

			<section class="bg-white dark:bg-stone-700 rounded-2xl shadow p-6 border-2 border-red-500">
				<h2 class="text-lg md:text-xl font-semibold mb-2 md:mb-4 text-red-500">Zone sensible</h2>
				<p class="text-sm text-stone-600 dark:text-stone-400 mb-3">Supprimer votre compte est une action irréversible.</p>
				<div class="text-right">
					<button class="button-style button-delete">Supprimer mon compte</button>
				</div>
			</section>
		</div>
	</div>
{% endblock %}