{% extends "_raw.html" %}

{% block raw_content %}
{% load static %}
{% 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="mb-3" style="padding: 0 50px;">
            <a href="/">
                <img src="{% static 'images/integreat-logo.png' %}" alt="Integreat Logo" class="w-full" />
            </a>
        </div>
        <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <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>Der Benutzername oder das Passwort ist falsch. Bitte versuchen Sie es erneut.</p>
                </div>
                {% endif %}
                <div class="mb-3">
                    {% include "messages.html" %}
                </div>
                <div class="-mt-3 mb-4">
                    <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
                        Benutzername
                    </label>
                    {% render_field form.username id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline" name="username" placeholder="Benutzername" %}
                </div>
                <div class="mb-4">
                    <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
                        Passwort
                    </label>
                    {% render_field form.password id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline" name="password" placeholder="Passwort" %}
                </div>
                <div class="flex items-center justify-between">
                    <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">
                        Anmelden
                    </button>
                    <a href="{% url 'password_reset' %}" class="inline-block align-baseline font-bold text-sm text-grey-darkest hover:text-integreat">
                        Passwort vergessen?
                    </a>
                </div>
            </form>

        </div>
        <p class="text-center text-grey text-xs">
            &copy;2018 Tür an Tür - Digital Factory gGmbH
        </p>
    </div>
</div>
{% endblock %}