{% extends "templates/page.html" %}

{% block login %}
<div class="container login-container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="login-panel panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Welcome to JupyterHub</h3>
                </div>
                <div class="panel-body">
                    <form action="{{authenticator_login_url}}" method="post" role="form">
                        <div class="form-group">
                            <label for="username_input">User</label>
                            <input
                                id="username_input"
                                type="text"
                                class="form-control"
                                name="username"
                                autocapitalize="off"
                                autocorrect="off"
                                required
                            />
                        </div>
                        <div class="form-group">
                            <label for="password_input">Password</label>
                            <input
                                id="password_input"
                                type="password"
                                class="form-control"
                                name="password"
                                required
                            />
                        </div>
                        <div class="form-group">
                            <input
                                type="submit"
                                id="login_submit"
                                class="btn btn-jupyter btn-lg btn-block"
                                value="Sign In"
                            />
                        </div>
                        {% if login_error %}
                        <div class="alert alert-danger" role="alert">
                            {{login_error}}
                        </div>
                        {% endif %}
                    </form>
                    {% if authenticator.enable_signup %}
                    <div class="text-center">
                        <p>Don't have an account? <a href="{{authenticator_signup_url}}">Sign up</a></p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock login %}

<style>
.btn-jupyter {
    background-color: #FFFFFF;
    color: white;
    border-color: #F37626;
}
.btn-jupyter:hover {
    background-color: #D85F1C;
    border-color: #D85F1C;
}
.login-container {
    margin-top: 50px;
}
</style>