<div id="login">
    <div class="container">
        <div class="col-xs-12">
            <div class="form-wrap">
                <form class="form-horizontal">
                    <h1>Log in with your email account</h1>
                    <div class="form-group" data-bind="validationElement: username">
                        <label class="sr-only" for="username">Username</label>
                        <input class="form-control" id="username" type="text" data-bind="value: username" placeholder="User name">
                    </div>
                    <div class="form-group" data-bind="validationElement: password">
                        <label class="sr-only" for="password">Password</label>
                        <input id="password" class="form-control " type="password" data-bind="value: password" placeholder="Password">
                    </div>
                    <div class="checkbox showpass">
                        <span class="character-checkbox" onclick="showPassword()"></span>
                        <span class="label" onclick="showPassword()">Show password</span>
                    </div>
                    <div class="checkbox col-lg-offset-4 hide">
                        <input type="checkbox" data-bind="checked: rememberMe" checked="checked">
                        <span class="label">Remember me</span>
                    </div>
                    <div class="col-lg-offset-4 mart2">
                        <button type="submit" class="btn btn-primary" data-bind="click: login">Sign in</button>
                        <button type="reset" class="btn btn-default">Reset</button>
                        <!--ko if: externalLoginProviders().length-->
                        <hr />
                        <a href="#" class="btn btn-default" data-bind="attr: { href: convertRouteToHash('/account/register') }">Register</a>
                        <a href="#" class="btn btn-default" data-bind="attr: { href: convertRouteToHash('/account/forgotpassword') }">Forgot your password?</a>
                        <hr/>
                        <!--/ko-->

                    </div>

                </form>
            </div>
            <!--ko if: externalLoginProviders().length-->
            <div class="col-offset-1 col-lg-5">
                <div class="page-header">
                    <h4>... or you can sign in using another service</h4>
                </div>
                <div class="list-group" data-bind="foreach: externalLoginProviders">
                    <a class="list-group-item lead" href="#" data-bind="click: login, attr: { 'data-provider': name,  title: 'Log in using your ' + name() + ' account'}">
                        <i data-bind="css: socialIcon($data)"></i>
                        <span data-bind="text: name"></span>
                    </a>
                </div>
            </div>
            <!--/ko-->
        </div>
        </div>
    </div>
</div>
