{% extends 'base.html' %}
<title>{% block title %}Space-O Technologies | Forgot Password
  {% endblock %}</title>

{% block extraurl %}
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="/static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/dist/css/adminlte.min.css">
{% endblock %}
{% block style %}
<style>
  .alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
  }

  .alert.success {
    background-color: #04AA6D;
  }

  .alert.info {
    background-color: #2196F3;
  }

  .alert.warning {
    background-color: #ff9800;
  }

  .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
  }

  .closebtn:hover {
    color: black;
  }

  .alert {
    opacity: 1;
    transition: opacity 0.6s;
    /* 600ms to fade out */
  }
  @media (max-width: 300px) { 
    .alert>span{
      font-size: small;
    }
    .alert>strong{
      font-size: small;
    }
    .login-box{
      margin-top: 50%;
    }
   }
</style>
{% endblock %}
</head>

{% block content %}
{%if EmailSend%}
<div class="alert success w-100" style="position: absolute; top: 0px;">
  <span class="closebtn">&times;</span>
  <strong>Success!</strong> <span>{{EmailSend}}</span>
</div>
{% endif %}

{% if messages %}
<div class="alert w-100" style="position: absolute; top: 0px;">
  <span class="closebtn">&times;</span>
  <strong>Danger!</strong>
  {% for message in messages %}
  {{ message }}
  {% endfor %}
</div>
{% endif %}

<body class="hold-transition login-page">
  <div class="login-box">
    <div class="card card-outline card-primary">
      <div class="card-header text-center">
        <img src="#" alt="logo"> <!-- Add a logo -->
      </div>
      <div class="card-body">
        <p class="login-box-msg">You forgot your password? Here you can easily retrieve a new password.</p>
        <form action="{% url 'reset' %}" method="post">
          {% csrf_token %}
          <div class="input-group mb-3">
            <input type="email" class="form-control" placeholder="Email" name="email" onclick="click()" required
              id="email">
            <div class="input-group-append">
              <div class="input-group-text">
                <span class="fas fa-envelope"></span>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <button type="submit" class="btn btn-primary btn-block" onclick="this.form.submit();this.disabled = true;"
                id="myButton" data-target="#exampleModal">Request new password</button>
            </div>
            <!-- /.col -->
          </div>
        </form>
        <p class="mt-3 mb-1">
          <a href="{% url 'admin:login' %}">Login</a>
        </p>
      </div>
      <!-- /.login-card-body -->
    </div>
  </div>
  <!-- /.login-box -->

  <script>
    var close = document.getElementsByClassName("closebtn");

    close[0].onclick = function () {
      var div = this.parentElement;
      div.style.opacity = "0";
      setTimeout(function () { div.style.display = "none"; }, 600);
    }
    function click() {
      document.getElementById("myButton").disabled = false;
    }
    this.form.submit(); this.disabled = true;



  </script>
  <!-- jQuery -->
  <script src="/static/plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE App -->
  <script src="/static/dist/js/adminlte.min.js"></script>
</body>

</html>

{% endblock %}