{% extends 'layouts/full_base.html' %}

{% load static %}

{% block title %} Login {% endblock title %} 

{% block extra_css %} 
<style type="text/css">
	li{
		color:red;
		text-align: center;
	}
</style>
{% endblock %}

{% block content %}
<!-- BACKGROUND-IMAGE -->
<div class="login-img"> 
	<!-- PAGE -->
	<div class="page">
		<div class="">
			<!-- CONTAINER OPEN -->
			<div class="container-login100">
				<div class="wrap-login100 p-0">
					<div class="card-body"> 
						<form class="login100-form validate-form" action=" {% url 'auth:login' %}" method="post">
							{% csrf_token %}
                            <span class="login100-form-title">
                                <a href="{% url 'core:index' %}" class="logo-default">
                                    <img alt="Adtlas Project Logo" class="logo-default" src="{% static 'images/brands/logo_black.png' %}" width="171">
                                </a>
                                <h4 style="margin-top: 15px;">Sign In</h4>
                            </span>
                            <!-- Email Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input" data-bs-validate="Email is required">
                                    {{ form.email }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-email" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.email.errors %}
                                    <div class="field-errors">
                                        {% for error in form.email.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div> 
							<div class="wrap-input100 validate-input" data-bs-validate = "Password is required">
								<input class="input100" type="password" name="password" placeholder="Password">
								<span class="focus-input100"></span>
								<span class="symbol-input100">
									<i class="zmdi zmdi-lock" aria-hidden="true"></i>
								</span>
							</div> 
							<div class="container-login100-form-btn">
								<button type="submit" name="button" class="login100-form-btn btn-primary" >Login</button>
							</div>
						</form>
					</div> 
				</div>
			</div>
			<!-- CONTAINER CLOSED -->
		</div>
	</div>
	<!-- End PAGE --> 
</div>
<!-- BACKGROUND-IMAGE CLOSED -->
{% endblock %}