{% extends "layout.html.j2" %}

{% block content %}
{% if message %}
<div class="alert alert-info" role="alert">{{ message | safe }}</div>
{% endif %}
<h1 class="fs-5">Login</h1>
<a type="button" class="btn btn-discord my-2" href="{{ discord_oauth }}">
    <i class="bi bi-discord"></i>
    Login with Discord
</a>
<hr>
<form id="loginForm" action="/auth/email" method="post" class="need-validation" novalidate>

    <div class="input-group mb-2 col-md-3">
        <input id="loginEmail" , class="form-control me-2" type="email" name="email" autocomplete="email"
            pattern="[^@]+@{1}[^\.]+\..+" placeholder="Email" required aria-required>
        <div class="invalid-feedback">
            Invalid email address
        </div>
    </div>
    <div class="input-group mb-2 col-md-3">
        <input id="loginPassword" class="form-control me-2" type="password" name="password"
            autocomplete="current-password" placeholder="Password">
        <div class="valid-feedback">
            No password or forgotten? Keep empty and "Reset Password"
        </div>
    </div>
    <div class="d-flow">
        <button id="loginLogin" type="submit" class="btn btn-primary me-2 mb-2" disabled>Login</button>
        <button id="loginReset" type="submit" class="btn btn-secondary me-2 mb-2" formaction="/auth/email/reset"
            disabled>
            Reset Password
        </button>
    </div>
</form>
{% endblock %}