<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

let { required = false }: { required?: boolean } = $props();
</script>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
	<label class="block">
		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.profile_label_new_password()}
		</span>
		<input
			type="password"
			name="newPassword"
			required={required}
			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</label>

	<label class="block">
		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.profile_label_new_password_confirm()}
		</span>
		<input
			type="password"
			name="confirmPassword"
			required={required}
			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</label>
</div>
