<!doctype html>
<html lang="es" 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">
	<title>Meetup</title>
	<link href="/dist/css/bootstrap.min.css" rel="stylesheet">    
</head>
<body>
	<header>
	  <div class="navbar navbar-dark bg-dark box-shadow">
	        <div class="container d-flex justify-content-between">
	          <a href="/" class="navbar-brand d-flex align-items-center">
	            <strong>Messages</strong>
	          </a>
	        </div>
      </div>
	</header>
	<main>
	  <div class="container">
	    <div class="panel col-md-5">
			<div class="panel panel-primary" style="margin-top:50px;">
				<div class="panel-heading">Login Form</div>
				<div class="panel-body">

					<form action="home" th:action="@{/login}" method="post">
						<div class="form-group has-feedback">
							<input type="text" class="form-control" name="username" placeholder="Email" />
							<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
						</div>
						<div class="form-group has-feedback">
							<input type="password" class="form-control" name="password" placeholder="Password"/> 
							<span class="glyphicon glyphicon-lock form-control-feedback"></span>
						</div>
						<div class="form-group">
							<label>
						      <input type="checkbox" name="remember-me"> Remember Me
						    </label>
						</div>
						<div class="row" style="margin-top:25px;">
							<div class="form-group col-xs-offset-8 col-xs-4">
								<button type="submit" class="btn btn-primary btn-block btn-flat">Login</button>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div th:if="${param.error}"
									class="alert alert-danger alert-dismissable">
									<p>
										<i class="icon fa fa-ban"></i> 
										<span>Invalid Email and Password.</span>
									</p>
								</div>
								<div th:if="${param.logout}"
									class="alert alert-info alert-dismissable">
									<p>
										<i class="icon fa fa-info"></i> 
										<span>You have been logged out.</span>
									</p>
								</div>
								<div th:if="${msg!=null}"
									class="alert alert-warning alert-dismissable">
									<p>
										<i class="icon fa fa-warning"></i> <span th:text="${msg}"></span>
									</p>
								</div>
							</div>

						</div>
					</form>
				</div>
			</div>
		</div>
	  </div>
	</main>
	
    <script src="/dist/js/bootstrap.bundle.min.js"></script>   
</body>
</html>

