{% if request.is_ajax %}
    <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-error 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">
        {% csrf_token %}
        <div class="control-group">
            <label class="control-label" for="{{ username_form.username.id_for_label }}">Username</label>
            <div class="controls">
                {{ username_form.username }}
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="{{ username_form.password.id_for_label }}">Password</label>
            <div class="controls">
                {{ username_form.password }}
            </div>
        </div>
        <input type="hidden" name="username_login">
        <div class="control-group">
            <div class="controls">
                <button class="btn btn-primary btn-primary-auth" type="submit">Login</button>
            </div>
        </div>
    </form>

    {% if pin_login_ready_users %}

        <div id="pin-login-well" class="well well-small">

            <div class="alert alert-sm-auth alert-info alert-tight-auth">
                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="label label-info pin-user-label-auth">{{ user.username }}</span>
                    {% endfor %}
                </div>
            </div>


            {% if pin_form.errors %}
                <div class="alert alert-sm-auth alert-error alert-tight-auth">
                    The PIN you entered is incorrect or invalid, please try again.
                </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="control-group">
                    <label class="control-label" for="{{ pin_form.pin.id_for_label }}">PIN</label>
                    <div class="controls">
                        {{ pin_form.pin }}
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button 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="alert alert-sm-auth alert-tight-auth">
            No users can currently login with their PIN. Login with your username and password to
            enable PIN login for your user.
        </div>
    {% endif %}

{% else %}
    <div class="alert alert-error">AJAX Only</div>
{% endif %}