{% load static %}
<html>
<head>
	<!-- Basic Page Info -->
	<meta charset="utf-8">
	<title>PAGE DE CONNEXION</title>

	<!-- Site favicon -->
	<link rel="apple-touch-icon" sizes="180x180" href="/media/images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/media/images/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/media/images/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/media/images/favicon-16x16.png">

	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- Google Font -->
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="{% static 'vendors/styles/core.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'vendors/styles/icon-font.min.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'vendors/styles/style.css' %}">

	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());

		gtag('config', 'UA-119386393-1');
	</script>
</head>
<body class="login-page">
<div class="login-header box-shadow">
	<div class="container-fluid d-flex justify-content-between align-items-center">
		<div class="brand-logo">
			<a href="/">
				<img src="/media/images/Logo.png" alt="">
			</a>
		</div>

	</div>
</div>
<div class="login-wrap d-flex align-items-center flex-wrap justify-content-center">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-md-6 col-lg-7">
				<img src="/media/images/fond.png" alt="">
			</div>
			<div class="col-md-6 col-lg-5">
				<div class="login-box bg-white box-shadow border-radius-10">
					<div class="login-title">
						<h2 class="text-center text-primary">Connexion à la plateforme</h2>
					</div>
					<form method="post">
						{% csrf_token %}
						<div class="input-group custom">
							<input type="text" class="form-control form-control-lg" placeholder="Username" id="username" name="username">
							<div class="input-group-append custom">
								<span class="input-group-text"><i class="icon-copy dw dw-user1"></i></span>
							</div>
						</div>
						<div class="input-group custom">
							<input type="password" class="form-control form-control-lg" placeholder="**********" id="password" name="password">
							<div class="input-group-append custom">
								<span class="input-group-text"><i class="dw dw-padlock1"></i></span>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<div class="input-group mb-0">
									<div class="row">
										{% if form.non_field_errors %}
										<ul class='form-errors alert alert-danger' role="alert">
											{% for error in form.non_field_errors %}
											<li>{{ error }}</li>
											{% endfor %}
										</ul>
										{% endif %}
										<div class="col-sm-12">
											<div class="input-group mb-0">
												<input class="btn btn-primary btn-lg btn-block" type="submit" value="Se Connecter">
											</div>
											<div class="col-sm-12 text-center mt-2">
												<a href="/reset_password" class="text-muted">Mot de passe oublié ?</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- js -->
<script src="{% static 'vendors/scripts/core.js' %}"></script>
<script src="{% static 'vendors/scripts/script.min.js' %}"></script>
<script src="{% static 'vendors/scripts/process.js' %}"></script>
<script src="{% static 'vendors/scripts/layout-settings.js' %}"></script>

</body>
</html>