{% extends "../layout.html" %}
{% load static %}

{% block menubutton %}
{% if userflag %}
  <li><a class="getstarted scrollto" href="{% url 'logout' %}">Logout</a></li>
{% else %}
  <li><a class="getstarted scrollto" href="#login">Login</a></li>
{% endif %}
{% endblock %}


{% block content %}

<link href="{% static 'assets/css/login.css' %}" rel="stylesheet">

{% if errors %}

{% else %}
<section id="hero" class="d-flex align-items-center">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 pt-5 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
          <h1 data-aos="fade-up">Manage Better...</h1>
          <h2 data-aos="fade-up" data-aos-delay="400">All your inventory solutions in one place</h2>
          <div data-aos="fade-up" data-aos-delay="800">
            <a href="#login" class="btn-get-started scrollto">Login</a>
          </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left" data-aos-delay="200">
          <img src="{% static 'assets/img/hero-img.png' %}" class="img-fluid animated" alt="">
        </div>
      </div>
    </div>

  </section>

  <section id="features" class="features features">
    <div class="container">

      <div class="row">

        <div class="col-lg-2 col-md-4 col-6">
          <img src="{% static 'assets/img/features/ccomputing.png' %}" class="img-fluid" alt="" data-aos="zoom-in">
        </div>

        <div class="col-lg-2 col-md-4 col-6">
          <img src="{% static 'assets/img/features/shopping-cart.png' %}" class="img-fluid" alt="" data-aos="zoom-in"
            data-aos-delay="100">
        </div>

        <div class="col-lg-2 col-md-4 col-6">
          <img src="{% static 'assets/img/features/checklist.png' %}" class="img-fluid" alt="" data-aos="zoom-in" data-aos-delay="200">
        </div>

        <div class="col-lg-2 col-md-4 col-6">
          <img src="{% static 'assets/img/features/warehouse.png' %}" class="img-fluid" alt="" data-aos="zoom-in" data-aos-delay="300">
        </div>

        <div class="col-lg-2 col-md-4 col-6">
          <img src="{% static 'assets/img/features/customer-service.png' %}" class="img-fluid" alt="" data-aos="zoom-in"
            data-aos-delay="400">
        </div>

        <div class="col-lg-2 col-md-4 col-6">
          <img src="{% static 'assets/img/features/data-science.png' %}" class="img-fluid" alt="" data-aos="zoom-in"
            data-aos-delay="500">
        </div>

      </div>

    </div>
  </section>
{% endif %}
{% if request.user.is_authenticated %}

{% else %}
  <section id="login">
    <div class="container py-5 h-100">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col col-xl-10">
          <div class="card" style="border-radius: 1rem;">
            <div class="row g-0">
              <div class="col-md-6 col-lg-5 d-none d-md-block login-img align-items-center">
                <img src="{% static 'assets/img/login.png' %}" alt="login form" class="img-fluid"
                  style="border-radius: 1rem 0 0 1rem;" />
              </div>
              <div class="col-md-6 col-lg-7 d-flex align-items-center">
                <div class="card-body p-4 p-lg-5 text-black">

                  <form method="POST" action="{% url 'auth_view' %}" id="loginform">

                    <div class="d-flex align-items-center mb-3 pb-1">
                      <i class="fas fa-cubes fa-2x me-3" style="color: #ff6219;"></i>
                      <span class="h1 fw-bold mb-0">Employee Login</span>
                    </div>

                    <h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Sign into your account
                    </h5>

                    <div class="form-outline mb-4 field username">
                      <div class="input-area">
                      <input type="text" id="form2Example17" name="_username" class="form-control form-control-lg" placeholder="Username" />
                      <i class="icon fas fa-envelope"></i>
                      <i class="error error-icon fas fa-exclamation-circle"></i>
                      </div>
                      <div class="error error-txt">Username can't be blank</div>
                    </div>

                    <div class="form-outline mb-4 field password">
                      <div class="input-area">
                      <input type="password" id="form2Example27" name="_password" class="form-control form-control-lg" placeholder="Password"/>
                      <i class="icon fas fa-lock"></i>
                      <i class="error error-icon fas fa-exclamation-circle"></i>
                      </div>
                      <div class="error error-txt">Password can't be blank</div>
                    </div>
                    {% for message in messages %}
    
                    <div class="alert alert-error">
                      <a class="close" href="#" data-dismiss="alert">×</a>
                      {{ message }}
                    </div>

                    {% endfor %}
                    
                    <div class="pt-1 mb-4">
                      <button class="btn btn-dark btn-lg btn-block" type="submit">Login</button>
                    </div>
                  </form>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endif %}

{% if errors %}
<script src="{% static 'assets/js/validate.js' %}"></script>
{% endif %}
<script src="{% static 'assets/js/login.js' %}"></script>
{% endblock %}