{% extends 'app.html' %}
{% block main %}
<main>
	<section class="section">
		{% if flash %}
		<div class="container is-widescreen mt-5">
			<article class="message {% if flash.success %}is-success{% else %}is-danger{% endif %}">
			  <div class="message-header">
					{% if flash.success %}<p>Operation successful</p>
					{% else %}<p>Operation failed</p>
					{% endif %}
				</div>
				<div class="message-body">
					<p>{{ flash.message }}</p>
				</div>
			</article>
		</div>
		{% endif %}

		<div class="container is-widescreen mt-5">
			<div class="card">
			  <header class="card-header">
			    <p class="card-header-title">My account</p>
			  </header>
			  <div class="card-content">
			    <div class="content">
						<p><i class="fa fa-user mr-3" aria-hidden="true"></i>{{ user.username }}</p>
						<p><i class="fa fa-envelope mr-3" aria-hidden="true"></i>{{ user.mail }}</p>
			    </div>
			  </div>
			</div>
		</div>
		<div class="container is-widescreen mt-5">
			<article class="message is-danger">
			  <div class="message-header">
			    <p>Change my password</p>
				</div>
				<div class="message-body">
					<form action="/user_settings/change_password" method="POST">
						<div class="field">
							<label class="label">Current password</label>
							<div class="control">
								<input name="current_password" class="input" type="password" placeholder="My current password">
							</div>
						</div>
						<div class="field">
							<label class="label">New password</label>
							<div class="control">
								<input name="new_password" class="input" type="password" placeholder="My new password">
							</div>
						</div>
						<div class="field">
							<label class="label">New password (confirmation)</label>
							<div class="control">
								<input name="new_password_confirm" class="input" type="password" placeholder="My new password">
							</div>
						</div>
						<button type="submit" class="button is-danger is-link">Change</button>
					</form>
				</div>
			</article>
		</div>
	</section>
</main>
{% endblock %}