{% extends "a3a/a3a1/_master.nimja" %}

{% block content %}
<body>

<div class="site-wrap">
  <header class="site-navbar" role="banner">
    <div class="site-navbar-top">
      <div class="container">
        <div class="row align-items-center">

          <div class="col-6 col-md-4 order-2 order-md-1 site-search-icon text-left">
            <form action="" class="site-block-top-search">
              <span class="icon icon-search2"></span>
              <input type="text" class="form-control border-0" placeholder="Search">
            </form>
          </div>

          <div class="col-12 mb-3 mb-md-0 col-md-4 order-1 order-md-2 text-center">
            <div class="site-logo">
              <a href="/" class="js-logo-clone">Shoppers</a>
            </div>
          </div>

          <div class="col-6 col-md-4 order-3 order-md-3 text-right">
            <div class="site-top-icons">
              <ul>
                <li><a href="/login"><span class="icon icon-person"></span></a></li>
                <li><a href="#"><span class="icon icon-heart-o"></span></a></li>
                <li>
                  <a href="/cart" class="site-cart">
                    <span class="icon icon-shopping_cart"></span>
                    {# <span class="count">2</span> #}
                  </a>
                </li> 
                <li class="d-inline-block d-md-none ml-md-0"><a href="#" class="site-menu-toggle js-menu-toggle"><span class="icon-menu"></span></a></li>
              </ul>
            </div> 
          </div>

        </div>
      </div>
    </div> 
    <nav class="site-navigation text-right text-md-center" role="navigation">
      <div class="container">
        <ul class="site-menu js-clone-nav d-none d-md-block">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/shop">Shop</a></li>
          <li><a href="#">Catalogue</a></li>
          <li><a href="#">New Arrivals</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <div class="bg-light py-3">
    <div class="container">
      <div class="row">
        <div class="col-md-12 mb-0"><a href="/">Home</a> <span class="mx-2 mb-0">/</span> <strong class="text-black">Login</strong></div>
      </div>
    </div>
  </div>  

  <div class="container">
      <div class="row">
          <div class="col">
              <h1 class="mt-5">Login</h1>

              <form id="input_form" method="post" class="" novalidate>

                <label class="text-danger">{{loginError}}</label>
                  <div class="form-group mt-5">
                      <label for="email">Email:</label>
                      <label class="text-danger">{{emailError}}</label>

                      {% if emailError != "" %}
                      <input type="email" name="email" id="email" class="form-control is-invalid" required autocomplete="off">
                      {% else %}
                      <input type="email" name="email" id="email" class="form-control" required autocomplete="off" value="{{email}}">
                      {% endif %}

                  </div>

                  <div class="form-group">
                      <label for="password">Password:</label>
                      <label class="text-danger">{{passwordError}}</label>

                      {% if passwordError != "" %}
                      <input type="password" name="password" id="password" class="form-control is-invalid" required autocomplete="off">
                      {% else %}
                      <input type="password" name="password" id="password" class="form-control" required autocomplete="off" value="{{password}}">
                      {% endif %}


                  </div>

                  <hr>

                  <button id="b4" type="submit" class="btn btn-primary">Submit</button>
                  <a id="b4" type="submit" class="btn btn-outline-primary" onclick="window.location='/signup'">Sign Up</a>
                  <hr>
              </form>
          </div>
      </div>
  </div>
</div>

{% endblock %}
