{%load static%}
{% load widget_tweaks %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css">

    <!-- Font special for pages-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

    <!-- Main CSS-->
    <link href="{% static "css/main.css" %}"rel="stylesheet" media="all">




  </head>

  <style>
    body
    {
    background-image:url('{% static 'image/vehicle_service.jpg'%}');
    background-repeat:no-repeat;
    background-size:100%;
    }

    .login_form
          {
              width: 400px;
              height: 450px;
              background: #CFD8DC;
              color: #000;
              top: 50%;
              left: 50%;
              position: absolute;
              transform: translate(-50%, -50%);
              box-sizing: border-box;
              border-radius: 25px;
          }

    .login_text
          {
              margin-top: 75px;
              text-align: center;
              margin-bottom: 30px;
              font-weight: bold;
              color: #02111f;
          }

    .logo
          {
              height: 150px;
              width: 150px;
              position: absolute;
              top: -20%;
              left: calc(42% - 42px);
          }

    .login_btn
        {
            margin-left: 12%;
            margin-right:12%;
            margin-top: 7%;
            background: #02111f;
            color: #fff;
            width: 300px;
            border-radius: 25px;
            text-align: center;
        }

    .input_field
        {
              width: 100%;
              padding: 12px 20px;
              border: 1px solid #ccc;
              border-radius: 10px;
        }

    .table th
        {
              padding-top: 3px;
              vertical-align: initial;
              border-top: 0px;
        }

    .table td
        {
              vertical-align: initial;
              border-top: 0px;
        }

</style>



  <body>

    <div class="login_form">
        <img src="/static/image/logo.png" class="logo">
        <h1 class="login_text">LOGIN</h1>
          <form   method="post">
            {% csrf_token %}
            <table class="table table ">
            {{form.as_table}}
            </table>

            <input type="submit" value="LOGIN" class="btn login_btn"/>

            <br/><br/>
            {% if messages %}
              <div class="alert alert-danger" role="alert">

                {% for message in messages %}
                {% if message.tags %}    {% endif %}  {{ message }}
                {% endfor %}
              </div>
                {% endif %}
          </form>
        </div>
       </div>
      </div>
    </div>


<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>
</html>
