{% extends 'ecbc-base.html' %}
{% block content %}
    <div class="jumbotron" style="padding-top: 24px; padding-bottom: 24px">

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-success" role="alert">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% if invalid %}
            <div class="alert-danger alert" role="alert">Sorry, that's not a valid email or password.</div>
        {% endif %}
        {% if logged_out %}
            <div class="alert-info alert" role="alert">You were successfully logged out.</div>
        {% endif %}
        {% if user_not_found %}
            <div class="alert-danger alert" role="alert">User not found.</div>
        {% endif %}
        <form method="post" action="/login/" class="form-signin form-control" style="padding: 16px">
            {% csrf_token %}
            <div class="row">
                <div class="col-6">
                    <div class="form-group row">
                        <h1 class="form-signin-heading col-12">Login</h1>
                    </div>
                    <hr/>
                    <div class="form-group row">
                        <label for="username" class="col-4 col-form-label">Email</label>
                        <div class="col-6">
                            <input type="text" name="username" id="login" class="form-control"
                                   placeholder="someone@example.com"
                                   required autofocus>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-4 col-form-label" for="password">Password</label>
                        <div class="col-6">
                            <input type="password" name="password" id="password" class="form-control"
                                   placeholder="********" required autofocus>
                        </div>
                    </div>
                    <hr/>
                    <div class="form-group row">
                        <div class="col-4">
                            <button type="submit" value="login" class="btn btn-lg btn-primary btn-block">Login</button>
                        </div>
                        <div class="col-8 col-form-label">
                            <label>
                                <input name="remember_me" type="checkbox" class="">
                                Keep me signed in
                            </label>
                        </div>
                    </div>
                    <div class="row" style="padding: 16px">
                        <span>Don't have an account? <strong><a class="forgot-password" href="/register/">Register here</a></strong></span>
                    </div>
                </div>
                <div id='user_type_img' class="col-6">
                </div>
            </div>
        </form>
        <hr/>

        <div class="row" style="padding: 16px">
            <a class="forgot-password" href="/forgot_password/">Forgot your password?</a>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        function findGetParameter(parameterName) {
            var result = null,
                tmp = [];
            location.search
                .substr(1)
                .split("&")
                .forEach(function (item) {
                    tmp = item.split("=");
                    if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
                });
            return result;
        }

        $(document).ready(function () {
            var user_type = findGetParameter('user_type');
            var user_type_img_div = $("#user_type_img");
            if (user_type == 'building') {
                user_type_img_div.html("<div class='fill-splash-building rounded'></div>")
            }
            if (user_type == 'national') {
                user_type_img_div.html("<div class='fill-splash-national rounded'></div>")
            }
            if (user_type == 'municipal') {
                user_type_img_div.html("<div class='fill-splash-municipal rounded'></div>")
            }
        });
    </script>
{% endblock %}