<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Cache-Control"
	content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="common/css/bootstrap.cerulean.min.css" />

<title th:text="${sysconf.title} + ': login'"></title>
</head>

<body>

	<div>
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<a class="navbar-brand" href="#"><img src="resources/images/openaire_logo_small.png" width="30" height="30" alt="OpenAIRE logo"><span th:text="${sysconf.title}"></span></a>
		
			<button class="navbar-toggler" type="button" data-toggle="collapse"	data-target="#navbarSupportedContent"><span class="navbar-toggler-icon"></span></button>
				
			<div class="collapse navbar-collapse w-100 order-1" id="navbarSupportedContent">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Support</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a class="dropdown-item" th:href="${sp.value}" th:each="sp : ${supportPages}" th:text='${sp.key}' target="_blank"></a>
						</div>
					</li>
				</ul>
			</div>
		</nav>
	</div>

	<div class="container-fluid">
		<div class="row" style="margin-top: 20px">
			<div class="col-xs-12 col-sm-10 col-md-8 col-lg-4 offset-sm-1 offset-md-2 offset-lg-4">
				<div class="card">
					<div class="card-header">
						<ul id="tabList" class="nav nav-tabs card-header-tabs">
							<li class="nav-item"><a href="#tabLogin" class="nav-link active">Sign In</a></li>
							<li class="nav-item"><a href="#tabRegister" class="nav-link">Info</a></li>
						</ul>
					</div>
					<div class="card-body">
						<div class="tab-content">
							<div class="tab-pane active text-center p-3" id="tabLogin">
								<div th:utext="${sysconf.homepageMessage}"></div>
								
								<hr th:if="${sysconf.homepageMessage != '' and sysconf.homepageMessage != null}" />
							
								<a href="./main" class="btn btn-lg btn-primary">Access using OpenAIRE credentials</a>
							</div>
							<div class="tab-pane" id="tabRegister">
								<h4 class="card-title">Access Guide</h4>
								<div id="registerMessage">
									<p class="card-text mb-4">
										To use this service you have to perform the following steps:
										<ol>
											<li>Register on the OpenAIRE portal.</li>
											<li>Login using the OpenAIRE credentials</li>
											<li>Compile the Authorization Request Form</li>
											<li>An administrator will authorize you as soon as possible</li>
										</ol>	
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="common/js/jquery.min.js"></script>
	<script src="common/js/popper.min.js"></script>
	<script src="common/js/bootstrap.min.js"></script>
	
	<script>
		$('#tabList a').on('click', function (e) {
			e.preventDefault()
			$(this).tab('show')
		});
	</script>
</body>
</html>