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

{% block title %}Profile
{% endblock %}

{% block body %}
	{{ block('nav', 'internal/libs/nav.html.twig') }}

	<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
		{{ block('topnav', 'internal/libs/top-nav.html.twig') }}
		{{ form_start(form) }}

		{{ form_errors(form) }}
		<div class='container'>
			<div class='row'>
				<div class='col' id='profile-image'>
                    <input type='hidden' name='id' value='{{ currentUser.id }}'/>
					<img class='profile-image' src='{% if currentUser.imageName %}/uploads/user_images/{{ currentUser.imageName }}{% endif %}'/>

					{{ form_row(form.imageName) }}
				</div>
				<div class='col'>
					<div class='input-group input-group-outline mb-3 is-filled'>
						<label for='profile_form_name' class='form-label'>Name</label>
						<input type='text' name='{{ field_name(form.name) }}' id='profile_form_name' class='form-control' value='{{ currentUser.name }}'/>
					</div>

					<div class='input-group input-group-outline mb-3 is-filled'>
						<label for='profile_form_email' class='form-label'>Email</label>
						<input type='email' name='{{ field_name(form.email) }}' id='profile_form_email' class='form-control' value='{{ currentUser.email }}'/>
					</div>

					<div class='input-group input-group-outline mb-3'>
						<label for='profile_form_password' class='form-label'>Password</label>
						<input type='password' name='{{ field_name(form.password.first) }}' id='profile_form_password' class='form-control' autocomplete='new-password'/>
					</div>
					<div class='input-group input-group-outline mb-3'>
						<label for='profile_form_confirmPassword' class='form-label'>Confirm Password</label>
						<input type='password' name='{{ field_name(form.password.second) }}' id='profile_form_confirmPassword' class='form-control' autocomplete='new-password'/>
					</div>
				</div>
			</div>

			<div class='row'>
				<div class='col text-center'>
					<div class='input-group input-group-outline mb-3'>
						{{ form_row(form.submit) }}
					</div>
				</div>
			</div>
		</div>
		{{ form_end(form) }}
	</main>
{% endblock %}

{% block page_css %}
	<style rel='stylesheet'>
		.profile-image {
			width: 300px;
			height: 300px;
		}
	</style>
{% endblock %}