{% set title = "Login" %}

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

{% block content %}
<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">
					<h3 class="mb-0">Login Methods</h3>
				</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" id="test" href="#TODO_LOGIN_HA" onclick="alertAbove(this, 'info', 'Unimplemented - Awaiting database')">House Account</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}