{% extends "base.html" %}
{% block title %} Log in {% endblock %}
{% block heading %}
<!-- Logo -->
<img class="logo"
    src="https://cdn.crabber.net/img/crabber_logo.svg" alt="Crabber Logo" width="43" height="43">
{% endblock %}

{% block body %}
    {% if login_failed %}
        <div class="alert alert-danger p-1" role="alert">Email or password is incorrect.</div>
    {% endif %}
    <form class="w-75 m-4" method="POST">
        <h1>Welcome back to Crabber!</h1>
        <p class="text-muted mb-5">First time? <a href="/signup">Create an account.</a></p>

        <div class="form-group cool-input">
            <label for="login-email">Email address</label>
            <input type="email" name="email" class="form-control" id="login-email" aria-describedby="emailHelp" required aria-required>
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else. Human or otherwise.</small>
        </div>
        <div class="form-group cool-input">
            <label for="login-password">Password</label>
            <input type="password" name="password" class="form-control" id="login-password" required aria-required>
        </div>
        <div class="form-group form-check mt-4" title="We don't discriminate!">
            <input type="checkbox" class="form-check-input" id="is-robot">
            <label class="form-check-label" for="is-robot">I am a robot</label>
        </div>

        <div class="d-flex align-items-center mt-4">
            <button type="submit" class="login-btn btn btn-primary rounded-pill mr-4">
                Let me in!
            </button>
            <a class="inline-block" href="/forgotpassword">
                Forgot your password again?
            </a>
        </div>
    </form>

    <div class="text-muted text-center my-5" id="cookie-footer">
        <small>Crabber uses cookies. If you care, you can <a href="https://cdn.crabber.net/legal/cookies.txt">read about it here.</a></small>
    </div>

    <!-- Spacer -->
    <div class="d-inline-block w-100 my-5 text-muted text-molt text-center"></div>
{% endblock %}