{% 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">
            {% if validlink %}
            <h3 class="font-bold text-center mb-6">Neues Passwort festlegen</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 -mt-2 mb-5 password_reset_errors" role="alert">
                    <p>
                        {{ form.new_password1.errors }}
                        {{ form.new_password2.errors }}
                    </p>
                </div>
                {% endif %}
                <div class="mb-4">
                    <label class="block text-grey-darker text-sm font-bold mb-2" for="new_password1">
                        Passwort
                    </label>
                    {% render_field form.new_password1 placeholder="Passwort" id="new_password1" name="new_password1" 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 class="mb-4">
                    <label class="block text-grey-darker text-sm font-bold mb-2" for="new_password2">
                        Passwort wiederholen
                    </label>
                    {% render_field form.new_password2 placeholder="Passwort wiederholen" id="new_password2" name="new_password2" 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">
                        Neues Passwort setzen
                    </button>
                </div>
            </form>
            {% else %}
            <div class="bg-red-lightest border-l-4 border-red text-red-dark px-4 py-3" role="alert">
                <p>
                    Der Link zum Zurücksetzen des Passworts ist ungültig. Vielleicht wurde er schon genutzt. Bitte erzeugen Sie <a href="{% url 'password_reset' %}">einen neuen Link</a>.
                </p>
            </div>
            {% endif %}
            <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 %}