extends ../layout-marketing

block content
	main.content.content-alt#main-content
		.container
			.row
				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
					.card
						.page-header
							h1 #{translate("log_in")}
						form(data-ol-async-form, name="loginForm", action='/login', method="POST")
							input(name='_csrf', type='hidden', value=csrfToken)
							+formMessages()
							+customFormMessage('invalid-password-retry-or-reset', 'danger')
								| !{translate('email_or_password_wrong_try_again_or_reset', {}, [{ name: 'a', attrs: { href: '/user/password/reset', 'aria-describedby': 'resetPasswordDescription' } }])}
								span.sr-only(id='resetPasswordDescription')
									| #{translate('reset_password_link')}
							+customValidationMessage('password-compromised')
								| !{translate('password_was_detected_on_a_public_list_of_known_compromised_passwords', {}, [{name: 'a', attrs: {href: 'https://haveibeenpwned.com', rel: 'noopener noreferrer', target: '_blank'}}])}.
								|
								| !{translate('please_reset_your_password_to_login', {}, [{name: 'a', attrs: {href: '/user/password/reset', target: '_blank'}}])}.
							.form-group
								input.form-control(
									type='email',
									name='email',
									required,
									placeholder='email@example.com',
									autofocus="true"
								)
							.form-group
								input.form-control(
									type='password',
									name='password',
									required,
									placeholder='********',
								)
							.actions
								button.btn-primary.btn(
									type='submit',
									data-ol-disabled-inflight
								)
									span(data-ol-inflight="idle") #{translate("login")}
									span(hidden data-ol-inflight="pending") #{translate("logging_in")}…
								a.pull-right(href='/user/password/reset') #{translate("forgot_your_password")}?