<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Login</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
    />
    <style>
      body {
        background-color: grey;
      }
      .container {
        padding: 20px;
        background-color: lightblue;
        border: 2px solid black;
        text-align: center;
      }
      .errormessage {
        color: red;
      }
    </style>
  </head>

  <body class="body">
    <div class="container">
      {%if error_message%}
      <div class="errormessage">{{error_message}}</div>
      {% endif %}
      <h1
        class="text-center font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
      >
        Login
      </h1>
      <form
        class="row g-0 justify-content-center"
        action="{% url 'loginView' %}"
        method="post"
      >
        {% csrf_token %} {%for field in form%}
        <div class="col-md-12 fs-3">{{field.label}}</div>
        <div class="col-md-12 m-2">{{field}}</div>
        {%endfor%}
        <div class="col-md-6 m-2">
          <button type="submit" class="col-md-12 btn btn-primary">
            Start!
          </button>
        </div>
      </form>
    </div>
  </body>
</html>
