<div class="row">
    <div class="col-md-12">
        <h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Log in</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-12">

        <form method="post" action="/account/login">
            <input type="hidden" name="_csrf" value="{{csrfToken}}">
            <input type="hidden" name="_2faToken" id="_2faToken" value="">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Account information</h3>
                </div>
                <div class="panel-body">

                    <div class="row">
                        <div class="col-md-6">

                            <div class="form-group{{#if errors.username}} has-error{{/if}}">
                                <label class="control-label" for="username">Username</label>
                                <input type="text" class="form-control lowercase" name="username" id="username" placeholder="username" value="{{values.username}}" required>
                                {{#if errors.username}}
                                    <span class="help-block">{{errors.username}}{{#if errors.username_action}} –  <a href="{{errors.username_action.target}}">{{errors.username_action.title}}</a>{{/if}}</span>
                                {{/if}}
                            </div>

                            <div class="form-group{{#if errors.password}} has-error{{/if}}">
                                <label for="password">Your password</label>
                                <input type="password" class="form-control" name="password" id="password" placeholder="v3rys3cret" required>
                                {{#if errors.password}}
                                    <span class="help-block">{{errors.password}}</span>
                                {{/if}}
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="remember"> Remember me
                            </label>
                        </div>
                    </div>


                    <div class="form-group">
                        <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Log in</button>
                    </div>
                </div>
                
            </div>
        </form>

    </div>
</div>

<script src="/login-key-handler.js"></script>
<script>
loginKeyHandler.setup(
    document.getElementById('username'),
    document.getElementById('_2faToken'),
    '2fa'
);
</script>
