<!doctype html>
<html lang="en">

	<head><meta charset="euc-jp">
		<!-- Required meta tags -->
		
		<meta
		name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

		<title>Acceso al sistema</title>
	</head>

	<body>

		<!-- Image and text -->
		<header class="container-fluid bg-verdedark">
			<nav class="container navbar navbar-light p-0">
				<a class="navbar-brand p-0" href="#">
					<img src="public/galeria/{{empresa.logo}}" width="250px" alt="" loading="lazy">
				</a>
				<div class="text-white">
					<p class="m-0 text-center text-uppercase">{{empresa.nombre}}</p>
					<h6 class="text-center">INTRANET</h6>
				</div>
				<div class="align-self-center"></div>
			</nav>
		</header>

		<div class="container">
			<div class="row">
				<div class="col d-flex justify-content-end align-items-center">
					<div class="logo-public w-75 d-none d-md-block">
						<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
							<div class="carousel-inner" style="width: 400px;height: 200px;">
								{% set bandera = true %}
								{% for carrusel in carruseles %}
									{% if bandera %}
										<div class="carousel-item active">
											<img src="public/galeria/{{carrusel.url}}" class="d-block w-100" alt="carrusel">
										</div>
										{% set bandera = false %}
									{% else %}
										<div class="carousel-item">
											<img src="public/galeria/{{carrusel.url}}" class="d-block w-100" alt="carrusel">
										</div>
									{% endif %}

								{% endfor %}
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-6 col-12">
					<div class="container border rounded mt-5 pt-4 pb-5 bg-light" style="width: 340px;">
						<div style="width: 100%;height: 150px;" class="d-flex justify-content-center align-items-center">
							<img src="public/galeria/{{empresa.logo}}" style="max-width: 100%;max-height: 100%;" alt="logo">
						</div>
						<form action="inicio.php" method="post" class="mt-3">
							<div class="form-group">
								<label for="password">Nombre de usuario</label>
								<div class="input-group mb-2">
									<div class="input-group-prepend mr-2">
										<div class="input-group-text">
											<svg class="bi bi-person-fill" width="1em" height="1em" viewbox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
												<path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
											</svg>
										</div>
									</div>
									<input type="text" name="nick" id="nick" class="form-control" placeholder="Usuario" required>
								</div>
							</div>
							<div class="form-group">
								<label for="password">Contrase&ntilde;a</label>
								<div class="input-group mb-2">
									<div class="input-group-prepend mr-2">
										<div class="input-group-text">
											<svg class="bi bi-lock-fill" width="1em" height="1em" viewbox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
												<rect width="11" height="9" x="2.5" y="7" rx="2"/>
												<path fill-rule="evenodd" d="M4.5 4a3.5 3.5 0 117 0v3h-1V4a2.5 2.5 0 00-5 0v3h-1V4z" clip-rule="evenodd"/>
											</svg>
										</div>
									</div>
									<input type="password" name="password" id="password" class="form-control" placeholder="Password" required>
								</div>
							</div>
							{% if response %}
								<div class="alert alert-danger alert-dismissible fade show" role="alert">
									{{response}}
									<button type="button" class="close" data-dismiss="alert" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
							{% endif %}

							<button class="btn btn-sm border mt-2" type="submit">Ingresar</button>
						</form>
					</div>
				</div>
			</div>
		</div>


		<footer class="container mt-3 mt-md-5">
			<p class="text-right">
				<b>Version</b>
				1.0.0</p>
		</footer>


		<script src="public/js/jquery-3.5.1.min.js"></script>
		<script src="public/js/bootstrap.min.js"></script>
		<script src="public/js/main.js"></script>
	</body>

</html>
