package templates

templ ProfileModal(user User) {
	<div id="profile-modal" class="fixed inset-0 flex items-center justify-center z-50 p-4" x-data="profileModal" x-init="setupProfileModal()" style="background-color: var(--surface-overlay);">
		<div class="card w-full max-w-4xl max-h-[90vh] overflow-y-auto" style="box-shadow: var(--shadow-pop);">
			<div class="flex justify-between items-start gap-4 p-6 border-b" style="border-color: var(--border);">
				<div class="flex items-center gap-3">
					<span class="grid place-items-center h-10 w-10 rounded-xl shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
						@Icon("edit", "h-5 w-5")
					</span>
					<div>
						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Edit User Profile</h2>
						<p class="text-sm mt-0.5" style="color: var(--text-secondary);">
							{ user.Username } ({ user.Email })
						</p>
					</div>
				</div>
				<button
					@click="closeProfileModal()"
					class="icon-btn shrink-0"
					aria-label="Close"
				>
					@Icon("close", "h-5 w-5")
				</button>
			</div>
			<div class="p-6">
				@ProfileForm(user, "/api/auth/profile/" + user.ID, false, true, true)
			</div>
		</div>
	</div>
}