{% extends 'base.html' %}
{% load i18n widget_tweaks allauth account socialaccount %}

{% block head_title %}cmoser.eu - {% translate 'Log in' %}{% endblock head_title %}

{% block content %}
<main class="card rounded mx-auto p-4" style="width:30rem;">
    <div class="card-body">
        <div class="d-flex flex-column">
            <div class="flex flex-col text-center mb-4">
                <h1 class="h3">Melde dich bei deinem Account an</h1>
            <form method="POST" class="mb-4">
                {% csrf_token %}
                {% if form.errors %}
                    {% for field, errors in form.errors.items %}
                        {% for error in errors %}
                        <div class="p-2 my-2 text-sm text-red-700 bg-red-50 rounded-md border-red-300 border">
                            {{ error }}
                        </div>
                        {% endfor %}
                    {% endfor %}
                {% endif %}

                <div class="form-floating mb-3">
                    {% render_field form.login class="form-control" placeholder="Emailadresse" %}
                    <label for="{{ form.login.id_for_label }}">Emailaddresse</label>
                </div>
                <div class="form-floating mb-3">
                    {% render_field form.password class="form-control" %}
                    <label for="{{ form.password.id_for_label }}">Passwort</label>
                </div>
                <div>
                    {% render_field form.remember class="input-checked" %}
                    <label class="input-checked-label" for="{{ form.remember.id_for_label }}">{{ form.remember.label }}</label>
                </div>
                <div class="text-end">
                <button type="submit" class="btn btn-success">Sign in</button>
                </div>
            </form>
        </div>
        <hr>
        <h2 class="h4 text-center">Oder nutze deinen Socialaccount</h3>
        {% if SOCIALACCOUNT_ENABLED %}
            {% include 'socialaccount/snippets/login.html' with page_layout="entrance" %}
        {% endif %}
        
    </div>
</main>
{% endblock content %}