{% extends "layout.html" %}

{% block navbar %}{% endblock navbar %}

{% block heading %}
<div class="row">
    <div class="col mb-5 text-center">
        <h1>TWWeb</h2>
        <h3>Taskwarrior's Web Interface</h3>
    </div>
</div>
{% endblock heading %}

{% block content %}
<div class="row pb-4">
    <div class="col-md border rounded mx-2 p-2">
        <h4>Login</h4>

        <form action="{{ url_for('task.login') }}" method="post">
            {{ login_form.hidden_tag() }}

            <div class="form-group">
                <label for="login-username">Username</label>
                {{ login_form.username(id="login-username", class="form-control") }}
            </div>

            <div class="form-group">
                <label for="login-password">Password</label>
                {{ login_form.password(id="login-password", class="form-control") }}
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">Login</button>
            </div>
        </form>
    </div>

    <div class="col-md border rounded mx-2 p-2">
        <h4>Register</h4>

        <form action="{{ url_for('task.register') }}" method="post">
            {{ register_form.hidden_tag() }}

            <div class="form-group">
                <label for="register-username">Username</label>
                {{ register_form.username(id="register-username", class="form-control") }}
            </div>

            <div class="form-group">
                <label for="register-password">Password</label>
                {{ register_form.password(id="register-password", class="form-control") }}
            </div>

            <div class="form-group">
                <label for="register-pin">PIN code</label>
                {{ register_form.pin(id="register-pin", class="form-control") }}
                <small id="pin-help" class="form-text text-muted">PIN is set in TWWeb's configuration file.</small>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">Register</button>
            </div>
        </form>
    </div>
</div>
{% endblock content %}