{% extends 'base.html.twig' %}

{% block title %}Sign in
{% endblock %}

{% block body %}
	<!--
	=========================================================
	* Material Dashboard 3 - v3.2.0
	=========================================================
	
	* Product Page: https://www.creative-tim.com/product/material-dashboard
	* Copyright 2024 Creative Tim (https://www.creative-tim.com)
	* Licensed under MIT (https://www.creative-tim.com/license)
	* Coded by Creative Tim
	
	=========================================================
	
	* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
	-->
	<div class="container position-sticky z-index-sticky top-0">
		<div class="row">
			<div class="col-12">
				{{ block("nav", "libs/nav.html.twig") }}
			</div>
		</div>
	</div>
	<main
		class="main-content  mt-0">
		<!-- @todo replace background image -->
		<div class="page-header align-items-start min-vh-100" style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
			<span class="mask bg-gradient-dark opacity-6"></span>
			<div class="container my-auto">
				<div class="row">
					<div class="col-lg-4 col-md-8 col-12 mx-auto">
						<div class="card z-index-0 fadeIn3 fadeInBottom">
							<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
								<div class="bg-gradient-dark shadow-dark border-radius-lg py-3 pe-1">
									<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Sign in</h4>
								</div>
							</div>
							<div class="card-body">
								<form role="form" class="text-start" method="post">
									{% if error %}
										<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
									{% endif %}

									{% if app.user %}
										<div class="mb-3">
											You are logged in as
											{{ app.user.userIdentifier }},
											<a href="{{ path('app_logout') }}">Logout</a>
										</div>
									{% endif %}

									<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
									<div class="input-group input-group-outline my-3">
										<label class="form-label" for="username">Username</label>
										<input type="text" value="{{ last_username }}" name="_username" id="username" autocomplete="username" required autofocus class="form-control">
									</div>
									<div class="input-group input-group-outline mb-3">
										<label class="form-label" for='password'>Password</label>
										<input type="password" name="_password" id="password" autocomplete="current-password" required class="form-control">
									</div>
									<div class="form-check form-switch d-flex align-items-center mb-3">
										<input class="form-check-input" type="checkbox" name="_remember_me" id="_remember_me">
										<label class="form-check-label mb-0 ms-3" for="_remember_me">Remember me</label>
									</div>
									<div class="text-center">
										<button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign in</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			{{ block("footer", "libs/footer.html.twig")  }}
		</div>
	</main>
{% endblock %}
