{% extends "base_generic.html" %}

{% block header %}
<style>
.form-container {
  margin: 5% 35%;
  width: 30%;
  padding: 10px;
  background-color: whitesmoke;
  border-radius: 30px;
  border-width: 3px;
  border-style: solid;
  border-color: grey;
  text-align: center;
}

/* Set a style for the submit/login buttons */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  width: 93%;
  margin: 10px 0;
  padding: 16px 20px;
  opacity: 0.8;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
/* Full-width input fields */
.form-container form input{
  width: 92.5%;
  padding: 15px;
  margin: 2.5% 0 2.5% 0;
  border: none;
  background: #ddd;
}
/* When the inputs get focus, do something */
.form-container form input:focus{
  background-color: #ddd;
  outline: none;
}

.titles {
  text-align: left;
  margin: 5% 0 0 3.5%;
}
</style>
Security Lab Manager
{% endblock %}


{% block body %}

<div class="form-container">
  <form method="POST">
    {% csrf_token %}
    <h1>Welcome</h1>
    <h5 class="titles">Username: </h5>
    {{ form.username }}
    <h5 class="titles">Password: </h5>
    {{ form.password }}
    <button type="submit" class="btn">Login</button>
  </form>
  <a href="{% url 'signup' %}"><button class="btn">Sign Up</button></a>
  <a href="{% url 'password_reset' %}"><button class="btn">Reset Password</button></a>
</div>

{% endblock %}