{% extends "layout.html" %}
{% block content %}
<div class="container-fluid bg-gradient-primary">
  <div class="row justify-content-center">
    <div class="col-xl-10 col-lg-12 col-md-9">
      <div class="card o-hidden shadow-lg my-5" style="border-width:1px;border-style:solid;border-color:black;">
        <div class="card-body p-0">
          <!-- Nested Row within Card Body -->
          <div class="row">
            <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
            <div class="col-lg-6">
              <div class="p-5">
                <div class="text-center">
                  <h1 class="h4 text-gray-900 mb-4">Welcome!</h1>
                </div>
                <form method="POST">
                  {{ form.hidden_tag() }}
                  <div class="form-group">
                    {{form.username(placeholder="Enter Username...",class="form-control form-control-user")}}
                  </div>
                  {% for error in form.username.errors %}
                    <div class="container text-center" style="color:black;margin-bottom:15px;"><em>{{ error }}</em></div>
                  {% endfor %}
                  <div class="form-group">
                    {{form.password(placeholder="Password",class="form-control form-control-user")}}
                  </div>
                  {% for error in form.password.errors %}
                    <div class="container text-center" style="margin-top: 10px;color:black;"><em>{{ error }}</em></div>
                  {% endfor %}
                  <div class="form-group">
                    <div class="custom-control custom-checkbox large">
                      {{form.remember()}}{{form.remember.label(style="padding-left:8px;margin-top:10px;")}}
                    </div>
                  </div>
                    {{form.submit(class="btn btn-success btn-block",style="border-width:1px;border-style:solid;border-color:#4c4c59;")}}
                </form>
                <hr>
                <div class="text-center">
                    <a class="" href="{{ url_for('register') }}">Create an Account!</a>
                  </div>
                  <div class="text-center">
                    <a class="small" href="{{ url_for('forgot') }}">Forgot Password?</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



{% endblock content %}