{% extends "_raw.html" %}

{% block raw_content %}
{% load widget_tweaks %}
<div id="no-session" class="flex flex-wrap flex-col justify-center px-3 py-10">
    <div class="mx-auto w-full max-w-xs">
        <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <h3 class="font-bold text-center mb-6">Passwort zurücksetzen</h3>
            <form method="post">
                {% csrf_token %}
                {% if form.errors %}
                <div class="bg-red-lightest border-l-4 border-red text-red-dark px-4 py-3 mb-5" role="alert">
                    <p>
                        Es ist ein Fehler aufgetreten. Womöglich ist diese E-Mail Adresse nicht im System vorhanden. Bitte versuchen Sie es erneut.
                    </p>
                </div>
                {% endif %}
                {% if messages %}
                    {% for msg in messages %}
                        {% if msg.level_tag == 'info' %}
                            <div class="bg-blue-lightest border-l-4 border-blue text-blue-dark px-4 py-3 mb-5" role="alert">
                                <p>{{msg.message}}</p>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
                <div class="mb-4">
                    <label class="block text-grey-darker text-sm font-bold mb-2" for="email">
                        E-Mail Adresse
                    </label>
                    {% render_field form.email placeholder="E-Mail" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline" %}
                </div>
                <div>
                    <button type="submit" class="bg-integreat hover:bg-grey-dark hover:text-white text-grey-darkest font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                        Passwort zurücksetzen
                    </button>
                </div>
            </form>
            <div class="pt-5 flex flex-wrap justify-end text-sm">
                <a href="{% url 'login' %}" class="text-grey-darker">
                    &larr; zurück zur Anmeldung
                </a>
            </div>
        </div>
        <p class="text-center text-grey text-xs">
            &copy;2018 Tür an Tür - Digital Factory gGmbH
        </p>
    </div>
</div>
{% endblock %}