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

<head th:replace="~{layouts/common.html :: head}"></head>

<body id="page-top">

	<!-- Navigation -->
	<nav th:replace="~{layouts/common.html :: navbar}"></nav>
 
 	<!-- Content -->
	<div class="content uv-content">
		<section class="container uv-home-section" style="min-width:100%">
			<div class="uv-container">
				<div class="uv-container-login">
					<div class="row">
						<div class="row uv-login-row">
							<img class="uv-login-img" th:src="@{/img/uv-chano-gris.png}">
						</div>
						<div class="row uv-login-row">
							<span class="uv-login-title" th:text="#{login.h2}"></span>
						</div>
					</div>
					<div class="row">
						<div class="row">
							<form enctype='multipart/form-data' method="POST" action="/login" id="loginForm">
								<div class="form-group uv-login-form-group">
									<input type="text" id="username" class="uv-login-input" name="username" th:placeholder="#{login.placeholder.username}">
								</div>
								<div class="form-group uv-login-form-group">
									<input type="password" id="passwd" class="uv-login-input" name="password" th:placeholder="#{login.placeholder.passwd}">
								</div>
								<div class="form-group">
									<input type="submit" class="uv-login-button" th:value="#{login.button}" id="loginButton">
								</div>
						    </form>
					    </div>
					</div>
					<div class="row uv-mar-t-20" th:if="${error}">
						<span class="alert alert-danger alert-dismissible fade show" role="alert">
							<span th:text="#{login.error}"></span>
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						    	<span aria-hidden="true">&times;</span>
						  	</button>
						</span>
					</div>
					<div class="row uv-mar-t-20" th:if="${restricted}">
						<span class="alert alert-warning alert-dismissible fade show" role="alert">
							<span th:text="#{login.restricted}"></span>
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						    	<span aria-hidden="true">&times;</span>
						  	</button>
						</span>
					</div>
					<div class="row uv-mar-t-20" th:if="${expired}">
						<span class="alert alert-danger alert-dismissible fade show" role="alert">
							<span th:text="#{login.expired}"></span>
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						    	<span aria-hidden="true">&times;</span>
						  	</button>
						</span>
					</div>
					<div class="row uv-mar-t-20" style="display:none;" id="incompatible">

					</div>
					<div class="row" style="display:none;">
						<div class="row uv-notice-container">
							<div th:each="item : ${notices}">
								<span th:if="${#locale.language} == 'ca'" th:text="${item.tituloV}"></span> 
								<span th:if="${#locale.language} == 'es'" th:text="${item.tituloC}"></span> 
								<br>
								<span th:if="${#locale.language} == 'ca'" th:utext="${item.textoV}" th:remove="tag"></span>
								<span th:if="${#locale.language} == 'es'" th:utext="${item.textoC}" th:remove="tag"></span>
								<br>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>

	<!-- contactModal -->
	<div th:replace="~{layouts/common.html :: contactModal}"></div>
  
	<!-- Footer -->
	<footer class="uv-footer uv-footer-text" th:replace="~{layouts/common.html :: footer}"></footer>

	<script th:src="@{/js/jquery/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
	<script th:src="@{/js/fa/all.js}"></script>
	<script th:src="@{/js/jquery-easing/jquery.easing.min.js}"></script>
	<script th:src="@{/js/saic.js}"></script>
  
	<script type="text/javascript">
		var ua = window.navigator.userAgent;
		var isIE = /MSIE|Trident/.test(ua);
		//var isIE = /MSIE/.test(ua);
		if ( isIE ) {
			$('#incompatible').show();
			$("#loginForm :input").prop("disabled", true);			
			var span = $(document.createElement('span'));
			$(span).addClass('alert')
				.addClass('alert-danger')
				.addClass('fade')
				.addClass('show')
				.attr('role', 'alert')
				.html("<span>El vostre navegador no és compatible amb aquesta aplicació</span>"
							+"<br>"
							+"<span>Recomanem l'ús de Chrome, Firefox o Edge</span>"
							+"<hr>"
							+"<span>Su navegador no es compatible con esta aplicación.</span>"
							+"<br>"
							+"<span>Recomendamos el uso de Chrome, Firefox o Edge.</span>")
				.appendTo($('#incompatible'));	  
		}
	</script>

</body>

</html>
