extends ../layout

block vars
	- metadata = { viewport: true }

block content
	main.content.content-alt
		.container
			.row
				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
					.card
						.page-header
							h1 #{translate("log_in")}
						form(async-form="login", name="loginForm", action='/login', method="POST", ng-cloak)
							input(name='_csrf', type='hidden', value=csrfToken)
							form-messages(for="loginForm")
							.form-group
								input.form-control(
									type='email',
									name='email',
									required,
									placeholder='email@example.com',
									ng-model="email",
									ng-model-options="{ updateOn: 'blur' }",
									focus="true"
								)
								span.small.text-primary(ng-show="loginForm.email.$invalid && loginForm.email.$dirty")
									| #{translate("must_be_email_address")}
							.form-group
								input.form-control(
									type='password',
									name='password',
									required,
									placeholder='********',
									ng-model="password"
								)
								span.small.text-primary(ng-show="loginForm.password.$invalid && loginForm.password.$dirty")
									| #{translate("required")}
							.actions
								button.btn-primary.btn.btn-block(
									type='submit',
									ng-disabled="loginForm.inflight"
								)
									span(ng-show="!loginForm.inflight") #{translate("login_with_email")}
									span(ng-show="loginForm.inflight") #{translate("logging_in")}…
							.form-group.text-center(style="padding-top: 10px")
								a.btn-block.login-btn(href="/oauth/redirect" style='padding-left: 0px')
									| Log in via KeyCloak Service