{% extends "ordr:templates/layout.jinja2" %}

{% block content %}
<div class="row mt-5">
    <div class="col-8 offset-2">
        <div class="jumbotron">
            <h1 class="display-4">Welcome to <span class="text-primary">ordr</span>!</h1>
            <p class="lead">An order management system to simplify your shopping for laborartory supplies.</p>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-4 offset-2">
        <h4 class="mb-4">Login</h4>
        <form action="/login" method="POST">
            <div class="form-group">
                <input type="text" class="form-control" id="input-username" placeholder="Username" name="username" autofocus="autofocus">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="input-password" placeholder="Password" name="password">
            </div>
            <button type="submit" class="btn btn-primary">Login</button>
            <small class="float-right mt-2"><a href="/forgot">Forgot your password?</a></small>
        </form>
    </div>
    <div class="col-4">
        <h4 class="mb-4">Register</h4>
        <p>
            Registration is easy as 1-2-3.
            Just fill out the <a href="/register">form</a> and as soon as your
            account has been activated you can start shopping.
        </p>
    </div>
</div>
{% endblock content %}