<section class="grid gap-6 md:grid-cols-2 box" data-density="comfortable">
	<h2 class="md:col-span-2">{{ p__('heading', 'Profile') }}</h2>

	<div>
		<label for="first_name">{{ p__('label', 'First name') }}</label>

		<input type="text" id="first_name" name="first_name" class="mt-2 input" autocomplete="off" value="{{ user.first_name }}" placeholder="{{ user.first_name }}" required/>
	</div>

	<div>
		<label for="last_name">{{ p__('label', 'Last name') }}</label>

		<input type="text" id="last_name" name="last_name" class="mt-2 input" autocomplete="off" value="{{ user.last_name }}" placeholder="{{ user.last_name }}" required/>
	</div>

	<div>
		<label for="language">{{ p__('label', 'Language') }}</label>

		<select name="language" id="language" class="mt-2 input">
			{% for locale in locales %}
				{% if locale.enabled %}
					<option value="{{ locale.code }}" {{ locale.code == user.language ? 'selected' : '' }}>
						{{ locale.label }}</option>
				{% endif %}
			{% endfor %}
		</select>
	</div>

	{% if option.site.phone_requirement_policy|default('none') in ['relaxed', 'strict'] %}
		<fieldset>
			<label for="phone_number">
				{{ p__('label', 'Phone number') }}
			</label>

			<x-phone-input class="block relative" x-ref="el" x-data="{country: null}" @input="country = $refs.el.dataset.country">
				<div class="flex absolute left-3 top-1/2 justify-center items-center w-6 h-6 text-2xl -translate-y-1/2 text-content-dimmed">
					<template x-if="!country">
						<i class="ti ti-world"></i>
					</template>

					<template x-if="country">
						<x-avatar class="w-6 h-6" :title="country" :src="`https://flagcdn.com/${country.toLowerCase()}.svg`"></x-avatar>
					</template>
				</div>

				<input type="tel" id="phone_number" maxlength="30" name="phone_number" value="{{ user.phone_number }}" placeholder="{{ user.phone_number ?: __('Type your phone number') }}" class="pl-12 input" {{ option.site.phone_requirement_policy|default('none') == 'strict' ? 'required' : '' }}>
			</x-phone-input>

			{% if option.site.phone_requirement_purpose|default('')|trim %}
				<ul class="info">
					<li>
						{{ option.site.phone_requirement_purpose }}
					</li>
				</ul>
			{% endif %}
		</fieldset>
	{% endif %}

	<div class="{{ option.site.phone_requirement_policy|default('none') in ['relaxed', 'strict'] ? 'md:col-span-2' : '' }}">
		<div class="flex justify-between items-center">
			<label for="email" class="inline-flex gap-2 items-center">
				{{ p__('label', 'Email') }}

				{% if user.is_email_verified %}
					<span class="text-xs text-success">{{ __('Verified') }}</span>
				{% elseif option.site.email_verification_policy is defined and option.site.email_verification_policy in ['relaxed', 'strict']  %}
					<a href="app/account/verification" class="text-xs text-failure hover:underline">
						{{ p__('button', 'Verify email') }}
					</a>
				{% endif %}
			</label>

			<a href="app/account/email" class="text-xs font-semibold hover:underline">
				{{ p__('button', 'Change email') }}
			</a>
		</div>

		<input type="text" id="email" class="mt-2 input" autocomplete="off" placeholder="{{ user.email }}" value="{{ user.email }}" disabled/>
	</div>

	<div class="md:col-span-2">
		<button type="submit" class="w-full button" :processing="isProcessing">

			{% include "/snippets/spinner.twig" %}

			{{ p__('button', 'Save changes') }}
		</button>
	</div>

	<div class="flex gap-1 items-center text-sm md:col-span-2">
		<i class="text-xl ti ti-lock"></i>

		<a href="app/account/password">{{ p__('button', 'Change password') }}</a>
	</div>

	<div class="text-xs sm:col-span-2 text-content-dimmed">
		{% set provider %}
		<a href="https://en.gravatar.com/" target="_blank">
			Gravatar
			<i class="text-xs ti ti-external-link"></i>
		</a>
		{% endset %}

		{{ __('Profile images are provided by %s', provider)|raw }}
	</div>
</section>
