{% extends 'public_template.html' %}

{% block titulo %}DS Login Page{% endblock %}

{% block navbar %}
    {% include 'public_navbar.html' with is_login_page=False %}
{% endblock %}

{% block content %}
<div id="formulario" class="d-flex justify-content-center align-items-center" style="min-height: calc(100vh - 80px);">
    <div class="login-box mx-auto col-md-6">
        <div class="login-logo">
            <a href="/"><b id="b">Sistema</b> Senha</a>
        </div>
        <div class="card">
            <div class="card-body login-card-body rounded">
                <p class="login-box-msg mt-2 text-lg">Esqueceu sua senha? Recupere abaixo</p>
            
                {% if messages %}
                    {% for message in messages %}
                    <div class="alert alert-{{ message.tags }}">
                        {{ message }}
                    </div>
                    {% endfor %}
                {% endif %}
            
                <form class="mt-2" method="post" action="{% url 'account_reset_password' %}">
                    {% csrf_token %}
            
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        Corrija o erro e tente novamente.
                    </div>
                    {% endif %}
            
                    <div class="input-group mb-3">
                        <input class="form-control" type="email" name="email" placeholder="Email" autocomplete="email" maxlength="320" required id="email">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-envelope"></span>
                            </div>
                        </div>
                    </div>
            
                    <div class="row mt-4">
                        <div class="col-md-3">
                            <a class="btn" href="{% url 'account_login' %}">Voltar ao login</a>
                        </div>
                        <div class="col-md-5 offset-md-4">
                            <button type="submit" class="btn col-md">Enviar link de recuperação</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>    
{% endblock %}