{% set title = "Login" %}

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

{% block content %}
<style>
html, body {
	height: 100%;
}

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

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


.main {
    padding: 0px 10px;
	display: grid;
	grid-template-rows: 25% auto;
	grid-row-gap: 8px;
	height: 100%;
}

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

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

@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;
    }
}

.login-main-text{
    margin-top: 20%;
    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;
}
</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>
<div class="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">
		{{ field.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 %}