<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <meta charset="UTF-8">
    <title>NearBeach Password Reset</title>
    {% load static %}
    <script src="{% static 'NearBeach/js/jquery.min.js' %}"></script>
    <script src="{% static 'NearBeach/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'NearBeach/css/bootstrap.min.css' %}" />

    <style>
        .bg-image {
            background-image: url('{% static "NearBeach/images/NearBeach_Background_001.webp" %}');
            background-size: cover;
            background-position: center;
            min-height: 100vh;
        }

        .align-center {
            align-self: center;
        }

        .login-heading {
            font-weight: 300;
            color: white;
            text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
        }

        label {
            color: white;
            text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
        }

        a {
            color: white;
            text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
        }



        @media (min-width: 992px) {
            .login_dialog {
                position: fixed;
                top: 50%;
                left: 100%;
                margin-top: -90px;
                margin-left: -35%;
            }
        }
    </style>
</head>
<body onload="on_page_load()">
<div class="container-fluid">
    <div class="row no-gutter bg-image">
        <div class="login_dialog col-md-12 col-lg-4 align-center" id="login_dialog">

            <h3 class="login-heading">NearBeach Password Reset</h3>
            <form action="" method="post" id="login-form">
                {% csrf_token %}
                <!-- Password reset form -->
                <div class="alert alert-primary" role="alert">
                    Have you forgotten your password? Not a problem. Please enter in your email and we will send you instructions on how to reset it.
                </div>

                <!-- If there are any errors when resetting the password. Display them here-->
                {% if form.email.errors %}
                    {% for error in form.email.errors %}
                        <div class="alert alert-danger" role="alert">
                            {{ error }}
                        </div>
                    {% endfor %}
                {% endif %}

                <!-- Password reset fields -->
                <div>
                    <label for="id_email">Email Address</label>
                    {{ form.email }}
                </div>

                <button class="btn btn-lg btn-primary btn-block btn-login mt-4" type="submit">Send Email</button>

            </form>
        </div>
    </div>
</div>

<script>
    //Add the placeholder to id_email
    document.getElementById("id_email").placeholder = "Email Address";
    document.getElementById("id_email").classList.add("form-control");
</script>

</body>
</html>