{% set title = "Login" %}

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

{% block content %}
<script src="{{ url_for('static', filename='js/alerts.js') }}"></script>
<div class="container pt-3">
	<div class="row alert-section">
		<div class="col-md-8 mx-auto">
			<div class="card rounded-1">
				<div class="card-header navbar topnav">
					<h3 class="mb-0">Login Methods</h3>
					<div class="my-2 my-lg-0 d-flex">
						<a href="{{ url_for('register') }}">Register</a>
					</div>
				</div>
				<div class="card-body row">
					<div class="col-md-6">
						<h5>Electronic ID</h5>
						<p class="lead">
							Secure login using Electronic ID allows Husstanden to show you banking details, bills and receipts.<br>
							<a target="_blank" href="https://eid.difi.no/en/id-porten/how-obtain-electronic-id">How to obtain an Electronic ID</a>
						</p>
					</div>
					<div class="col-md-6">
						<h5>House Account</h5>
						<p class="lead">
							Accounts with less privileges and fast login to view non-sensitive information.<br>
							Multiple house accounts can be created by logging in with house holder's verified <i>Electronic ID</i>.
						</p>
					</div>
				</div>
				<hr>
				<div class="card-body row pt-2">
					<div class="col-md-6 pb-2">
						<a class="btn btn-primary btn-lg btn-block" href="#TODO_LOGIN_EID" onclick="alertAbove(this, 'warning', 'This should redirect the user to Electronic ID page (but due to phishing, we can not demo this)')">Electronic ID</a>
					</div>
					<div class="col-md-6">
						<a class="btn btn-primary btn-lg btn-block" href="#" data-toggle="modal" data-target="#myModal">House Account</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal" role="dialog">
		<div class="modal-dialog">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Login</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
{% macro render_field(field) %}
	<dt>{{ field.label }}
	<dd>{{ field(**kwargs)|safe }}
	{% if field.errors %}
		<ul class=errors>
		{% for error in field.errors %}
		<li>{{ error }}</li>
		{% endfor %}
		</ul>
	{% endif %}
	</dd>
{% endmacro %}
					<form method=post>
						<dl>
							{{ render_field(form.email) }}
							{{ render_field(form.password) }}
						</dl>
						<input type=submit value="Login">
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
{% with messages = get_flashed_messages() %}
	{% if messages %}
let alertArea = document.getElementsByClassName("alert-section")[0];
		{% for message in messages %}
alertAbove(alertArea, "info", "{{ message }}");
		{% endfor %}
	{% endif %}
{% endwith %}
</script>
{% endblock %}