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

    <!--
    Bootstrap and jquery are utilised throughout ALL of NearBeach
    -->
    {% 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>
        .g-recaptcha {
            margin: 17px 0px;
        }

        .bg-image {
            background-image: url('{% static background_image %}');
            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>

    <script>
        function on_page_load() {
            if (!!window.MSInputMethodContext && !!document.documentMode) {
                var elem = document.getElementById("unsupported_browser");
                elem.innerHTML = '<div class="alert alert-danger"><h1>BROWSER NOT SUPPORTED!!</h1>' +
                    '<p>We are sorry, but we can not support the Internet Explorer browser. We recommend using the following browsers' +
                    '<ul><li><a href="https://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a></li>' +
                    '<li><a href="https://www.google.com/chrome/">Google Chrome</a></li>' +
                    '<li>Safari (MAC)</li></ul>' +
                    'There are features that will not work in Internet Explorer.</p>' +
                    '</div>';

                //Clear the login screen
                document.getElementById("login_dialog").innerHTML = "";

            }
        }
    </script>
</head>
<body onload="on_page_load()">
<div class="container-fluid">
    <!-- Renders a warning if browser is not supported -->
    <div id="unsupported_browser"></div>

    <!-- Login dialog with background image -->
    <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</h3>
            <form action="{%  url 'login' %}" method="post" id="login-form">
                {% csrf_token %}

                <!--If there are any login errors. Show them here-->
                {% if login_form.non_field_errors %}
                    {% for error in login_form.non_field_errors %}
                        <div class="alert alert-danger" role="alert">
                            {{ error }}
                        </div>
                    {% endfor %}
                {% endif %}

                <!-- LOGIN form -->
                <div class="form-label-group">
                    <label for="id_username">Username</label>
                    {{ login_form.username }}
                </div>

                <div class="form-label-group">
                    <label for="id_password">Password</label>
                    {{ login_form.password }}
                </div>

                {% if not RECAPTCHA_SITE_KEY == '' %}
                    <div class="form-label-group">
                        <script src="https://www.google.com/recaptcha/api.js" &render=explicit async defer></script>
                        <div class="g-recaptcha" data-sitekey="{{ RECAPTCHA_PUBLIC_KEY }}"></div>
                    </div>
                {% endif %}

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

                <div class="text-center">
                    <a href="{% url 'password_reset' %}">Forgot password?</a>
                </div>
            </form>
        </div>
    </div>
</div>


</body>
</html>