{% set title = "Login" %}

{% extends "layout/bootstrap.html" %}

{% block content %}
<style>
html, body {
	height: 100%;
	scroll-behavior: smooth;
}

.main-head{
    height: 150px;
    background: #FFF;
}

.sidenav {
    height: 100%;
    background-color: #000;
    overflow-x: hidden;
    padding-top: 20px;

	display: grid;
	grid-template-rows: 25% 50% 25%;
	height: 100%;

	overflow: hidden;
}

.sidenav > div:nth-child(1n) {
	grid-row-start: 1;
}

.sidenav > div:nth-child(2n) {
	grid-row-start: 2;
	align-self: center;
}

.sidenav > div:nth-child(3n) {
	grid-row-start: 3;
	align-self: end;
}

#main {
    padding: 0px 10px;
	display: grid;
	grid-template-rows: 25% auto;
	height: 100%;
}

#main > .col:nth-child(1n) {
	grid-row-start: 1;
}

#main > .col:nth-child(2n) {
	grid-row-start: 2;
}

#focus-login {
	text-decoration: none;
	color: #fff;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
}

@media screen and (max-width: 450px) {
    .login-form{
        margin-top: 10%;
    }

    .register-form{
        margin-top: 10%;
    }
}

@media screen and (min-width: 768px){
    #main{
        margin-left: 40%; 
    }

    .sidenav {
        width: 40%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
    }

	#focus-login {
		display: none;
	}
}

.login-main-text{
    padding: 60px;
    color: #fff;
}

.login-main-text h2{
    font-weight: 300;
}

.btn-black{
    background-color: #000 !important;
    color: #fff;
}

.hidable[aria-expanded="true"] {
	display: none;
}

.toggle-form > form:nth-child(2n) {
	display: none;
}

.toggle-form.toggled > form:nth-child(1n) {
	display: none;
}
.toggle-form.toggled > form:nth-child(2n) {
	display: block;
}

.lang-icon {
	background-position: left;
	background-size: contain;
    width: 32px;
    height: 24px;

    color: white;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
    display: table-cell;
}

.lang-en {
    background-image: url("{{ url_for('static', filename='const/img/flags/gb.svg') }}");
}

.lang-no {
    background-image: url("{{ url_for('static', filename='const/img/flags/no.svg') }}");
}

.dropdown-menu {
	background-color: #6c757d;
}

.dropdown-menu a {
	color: white;
}
</style>
<script>
function toggleform(caller) {
	let selectedDOM = caller;
	do {
		if (selectedDOM.classList.contains("toggle-form")){
			let classes = selectedDOM.classList;
			classes[classes.contains("toggled") ? "remove" : "add"]("toggled");
			return;
		}
		selectedDOM = selectedDOM.parentElement;
	} while (selectedDOM != null);
	throw Error("Missing toggle-form class for self/parent(s)");
}
</script>
<div class="sidenav">
	<div class="login-main-text">
		<h2>Husstanden<br>{{ _("Login Page") }}</h2>
		<p>{{ _("Login is required to use this service.") }}</p>
	</div>
	<div class="text-center mx-auto">
		<a href="#main" class="display-1" id="focus-login">Login</a>
	</div>
	<div class="btn-group dropup m-2">
		<div>
			<div class="btn btn-secondary col d-flex m-1" data-toggle="dropdown" aria-expanded="false">
				<div class="lang-icon lang-{{ session.lang }}"></div>
				<div class="flex-grow-1"></div>
				<span>{{ _("Language") }}</span>
				<div class="flex-grow-1"></div>
			</div>
			<ul class="dropdown-menu">
				<li>
					<div class="row">
						<a class="col d-flex m-1" href="?lang=en">
							<div class="lang-icon lang-en"></div>
							<div class="flex-grow-1"></div>
							<span>{{ _("english") | title }}</span>
							<div class="flex-grow-1"></div>
						</a>
					</div>
					<div class="row">
						<a class="col d-flex m-1" href="?lang=no">
							<div class="lang-icon lang-no"></div>
							<div class="flex-grow-1"></div>
							<span>{{ _("norwegian") | title }}</span>
							<div class="flex-grow-1"></div>
						</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<div id="main">
	<div class="col pt-4">
{% with messages = get_flashed_messages(with_categories = true) %}
	{% if messages %}
		{% for category, message in messages %}
		<div class="alert alert-{{ category }} fade in show" role="alert" style="margin-bottom:0px;padding:6px;">
			<a href="#" class="close" data-dismiss="alert" aria-label="close" style="margin-left:10px;">&times;</a>
			{{ message }}
		</div>
		{% endfor %}
	{% endif %}
{% endwith %}
	</div>
	<div class="col col-md-6 col-sm-12">
		<div class="login-form">
{% macro render_field(field) %}
	<div class="form-group">
		<label for="{{ field.label.field_id }}">{{ _(field.label.text) }}</label>
		{{ field(**kwargs)|safe }}
		{% if field.errors %}
			<ul class=errors>
			{% for error in field.errors %}
			<li>{{ error }}</li>
			{% endfor %}
			</ul>
		{% endif %}
	</div>
{% endmacro %}
			<div class="toggle-form false">
				<form method="post">
					{{ render_field(form.login.email) }}
					{{ render_field(form.login.password) }}
					<button class="btn btn-black">{{ _("Login") }}</button>
					<span class="btn btn-secondary" onclick="toggleform(this)">{{ _("Register") }}</span>
				</form>
				<form method="post">
					{{ render_field(form.register.email) }}
					{{ render_field(form.register.password) }}
					{{ render_field(form.register.confirm_password) }}
					{{ render_field(form.register.firstname) }}
					{{ render_field(form.register.surname) }}
					{{ render_field(form.register.accept_tos) }}
					<span class="btn btn-secondary" onclick="toggleform(this)">{{ _("Login") }}</span>
					<button class="btn btn-black">{{ _("Register") }}</button>
				</form>
			</div>
		</div>
	</div>
</div>
{% endblock %}