{% if request.is_ajax %}
<style>
    .form_input_row {
        padding-bottom: 2vh;
    }

    .form_input_row .col-7 {
        padding-left: 0;
        padding-top: .5vh;
    }

    .form_input_row .col-5 {
        justify-content: right;
        display: flex;
        font-weight: bold;
        font-size: 3vh;
        align-content: center;
        flex-wrap: wrap;
        padding-right: 0;
    }

    #login_body {
        padding-bottom: 2vh;
    }

    #form_content {
        border-radius: 4vh;
    }

    #login_form_header {
        justify-content: center;
        display: flex;
        font-size: 5vh;
        padding-bottom: .4vh;
        margin-top: auto;
        padding-right: 0;
    }

    .close_button{
        justify-content: right;
        display: flex;
        font-size: 4vh;
        font-weight: bolder;
        padding-right: 0;
    }

    #login_close {
        background-color: lightgrey;
        border-top-right-radius: 4vh;
        padding-left: 2vh;
        padding-right: 2vh;
    }
</style>

<script>
    function toggle_password() {
        const password_input = $('#id_login_modal-password');

        if (password_input.attr('type') === 'password') {
          password_input.attr('type', 'text');
        } else {
          password_input.attr('type', 'password');
        }
    }

    $(document).ready(function() {
        $('#id_login_modal-username').on('click', function() {
            $('#id_login_modal-password').attr('type', 'password');
        })

        $('#id_login_modal-pin').on('click', function() {
            $('#id_login_modal-password').attr('type', 'password');
        })

        $('#login_submit').on('click', function() {
            $('#id_login_modal-password').attr('type', 'password');
        })

        $('#pin_login_submit').on('click', function() {
            $('#id_login_modal-password').attr('type', 'password');
        })

        $('#id_login_modal-username').on('focus', function() {
            $('#id_login_modal-username').blur();
        });

        $('#id_login_modal-password').on('focus', function() {
            $('#id_login_modal-password').blur();
        });

        $('#id_login_modal-pin').on('focus', function() {
            $('#id_login_modal-pin').blur();
        });

        $('#id_login_modal-username').blur();
        $('#id_login_modal-password').blur();
        $('#id_login_modal-pin').blur();
    })

</script>

<div id="login_body" class="container-fluid">
    <div class="row" style="border-bottom: 2px solid black;">
        <div id="login_form_header" class="col-11">
            <h4>Login</h4>
        </div>
        <div class="col-1 close_button">
            <span id="login_close">X</span>
        </div>
    </div>

    <div class="row" style="padding-top: 1vh;">
        <div class="col-4" style="margin-top: auto;">
            <div class="username-login-form-alerts-auth">
                {% for alert in alerts %}
                    <div class="alert alert-sm-auth alert-tight-auth alert-{{ alert.type }}">{{ alert.msg }}</div>
                {% endfor %}
            </div>
            {% if username_form.errors %}
                <div class="alert alert-sm-auth alert-danger alert-tight-auth">Either your username and/or password are invalid or your user is inactive.</div>
            {% endif %}

            <form id="username-login-form-auth" class="form-horizontal form-centered ajax-form-auth"
                  method="post" action="{% url 'site:login' %}" data-loaded-callback="login" data-submit-success-callback="login"
                  autocomplete="off">
                {% csrf_token %}

                <div class="row form_input_row">
                    <div class="col-5">
                        <label class="control-label" for="{{ username_form.username.id_for_label }}">Username:&nbsp;</label>
                    </div>
                    <div class="col-7">
                        {{ username_form.username }}
                    </div>
                </div>

                <div class="row form_input_row">
                    <div class="col-5">
                        <label class="control-label" for="{{ username_form.password.id_for_label }}">Password:&nbsp;</label>
                    </div>
                    <div class="col-7">
                        {{ username_form.password }}
                        <i onclick="toggle_password()" class="icon-eye-open"></i>
                    </div>
                </div>

                <input type="hidden" name="username_login">
                <div class="row">
                    <div class="col-3 offset-9">
                        <button class="btn btn-primary btn-primary-auth" id="login_submit" type="submit">Login</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-8">
            {% if pin_login_ready_users %}
                <div id="pin-login-well" class="well well-small">
                    {% if pin_form.errors %}
                        <div class="row d-flex justify-content-evenly">
                            <div class="alert alert-sm-auth alert-info alert-tight-auth col-7">
                                Users listed below can login with their PIN. Otherwise, you must first login with your username
                                and password to enable PIN login.
                                <div id="pin-login-users">
                                    {% for user in pin_login_ready_users %}
                                        <span class="badge badge-info bg-primary pin-user-label-auth">{{ user.username }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="alert alert-sm-auth alert-danger alert-tight-auth col-4">
                                The PIN you entered is incorrect or invalid, please try again.
                            </div>
                        </div>
                    {% else %}
                        <div class="row d-flex justify-content-center">
                            <div class="alert alert-sm-auth alert-info alert-tight-auth col-11">
                                Users listed below can login with their PIN. Otherwise, you must first login with your username
                                and password to enable PIN login.
                                <div id="pin-login-users">
                                    {% for user in pin_login_ready_users %}
                                        <span class="badge badge-info bg-primary pin-user-label-auth">{{ user.username }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <form id="pin-login-form-auth" class="form-horizontal form-centered ajax-form-auth" method="post" action="{% url 'site:login' %}"
                        data-submit-success-callback="pin_login">
                        {% csrf_token %}
                        <div class="row form_input_row">
                            <div class="col-5">
                                <label class="control-label" for="{{ pin_form.pin.id_for_label }}">PIN:&nbsp;</label>
                            </div>
                            <div class="col-7">
                                {{ pin_form.pin }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-3 offset-9">
                                <button id="pin_login_submit" class="btn btn-info btn-info-auth" type="submit">PIN Login</button>
                            </div>
                        </div>
                        <input type="hidden" name="pin_login">
                    </form>
                </div>
            {% else %}
            <div class="row d-flex justify-content-evenly">
                <div class="alert alert-sm-auth alert-warning alert-tight-auth col-11">
                    No users can currently login with their PIN. Login with your username and password to
                    enable PIN login for your user.
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% else %}
    <div class="alert alert-error">AJAX Only</div>
{% endif %}