<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <meta charset="UTF-8">
    <title>NearBeach Login</title>

    <!-- Webpack file with Foundation -->
    {% load static %}
    <script defer
            src="{% static 'NearBeach/login.min.js' %}"
            id="login_script"
            data-static="{% static '' %}"
    ></script>
</head>
<body>
    <div class="background">
        <div class="login-dialog">
            <h1>NearBeach Password Change</h1>
            {% if validlink %}
                <form action="" method="post" id="password-form">
                    {% csrf_token %}
                    <!-- Any errors -->
                    {% if form.new_password1.errors %}
                        {% for error in form.new_password1.errors %}
                            <div class="alert alert-danger" role="alert">
                                {{ error }}
                            </div>
                        {% endfor %}
                    {% endif %}

                    <!-- Password reset form -->
                    <div class="alert alert-primary" role="alert">
                        Please type in your new password.
                    </div>

                    <div class="alert alert-danger" role="alert" id="passwords_not_same" style="display:none;">
                        The passwords are not the same
                    </div>

                    <!-- New password fields -->
                    <div class="form-label-group">
                        <label for="id_new_password1">New Password</label>
                        {{ form.new_password1 }}
                    </div>

                    <div class="form-label-group">
                        <label for="id_new_password2">Confirm Password</label>
                        {{ form.new_password2 }}
                    </div>

                    <button class="btn btn-lg btn-primary btn-block btn-login mt-4" type="submit" id="change_passwords">Change Passwords</button>

                </form>
            {% else %}
                <div class="alert alert-danger mt-4" role="alert">
                    The password reset link was invalid, possibly because it has already been used. Please request a new password reset.
                </div>
            {% endif %}
        </div>
    </div>
</body>
</html>