{% extends "layout/clean_layout.html" %}

{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans 'Login page' %}{% endblock title %}

{% block content %}
  <div class="auth-main">
    <div class="auth-wrapper v4">
      <div class="auth-form">
        <div class="card my-5">
          <div class="row g-0">
            <div
              class="bg-brand-color-1 col-md-4 col-lg-6 d-none d-md-flex d-lg-flex align-items-center justify-content-center">
              <img src="{% static 'images/authentication/lock.png' %}" alt="lock images" class="img-fluid" />
            </div>
            <div class="col-md-8 col-lg-6">
              <div class="card-body">
                <div class="text-center">
                  <a href="#"><img src="{% static 'images/logo-dark.svg' %}" alt="img" /></a>
                </div>
                <h4 class="text-center f-w-500 mt-4 mb-3">{% trans 'Login' %}</h4>
                <form action="{% url 'login' %}" method="post">
                  {% csrf_token %}
                  <div class="input-group mb-3">
                    <input id="id_email" name="email" type="text" class="form-control" placeholder="{% trans 'Email' %}"
                           required>
                  </div>
                  <div class="input-group mb-4">
                    <input id="password" type="password" name="password" class="form-control rounded-left"
                           placeholder="{% trans 'Password' %}" required>
                  </div>
                  <button class="btn btn-primary d-block mx-auto">{% trans 'Login' %}</button>
                </form>
                <div class="d-flex justify-content-between align-items-end mt-4">
                  <h6 class="f-w-500 mb-0">{% trans "Don't have an Account" %}?</h6>
                  <a href="{% url 'registration' %}" class="link-primary">{% trans 'Create Account' %}</a>
                </div>
                <div class="d-flex justify-content-between align-items-end">
                  <h6 class="f-w-500 mb-0">{% trans "Forgot password" %}?</h6>
                  <a href="{% url 'forgot_password' %}" class="link-primary">{% trans 'Reset password' %}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock content %}