{% extends tinyuser_base_template %}
{% load i18n widget_tweaks allauth account socialaccount %}

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

{% block content %}
<main class="card login-card rounded mx-auto" style="width:30rem;">
    <div class="card-header text-center">
        <h1 class="h3">{% translate "Log into your account" %}</h1>
    </div>
    <div class="card-body">
        <div class="d-flex flex-column">
            <div class="flex flex-col text-center">
                <form method="POST">
                    {% 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">
                        {% translate "Email address" as email_placeholder %}
                        {% render_field form.login class="form-control" placeholder=email_placeholder %}
                        <label for="{{ form.login.id_for_label }}">{{ email_placeholder }}</label>
                    </div>
                    <div class="form-floating mb-3">
                        {% translate "Password" as password_placeholder %}
                        {% render_field form.password class="form-control" placeholder=password_placeholder %}
                        <label for="{{ form.password.id_for_label }}">{{ password_placeholder }}</label>
                    </div>
                    <div class="mb-3">
                        {% render_field form.remember class="input-checked" %}
                        <label class="input-checked-label" for="{{ form.remember.id_for_label }}">{{ form.remember.label }}</label>
                    </div>
                    <p class="mb-3"><a href="{% url 'account_reset_password' %}">{% translate "Forgot your password?" %}</a></p>

                    <button type="submit" class="btn btn-success">{% translate "Sign in" %}</button>
                </form>
            </div>
        {% if SOCIALACCOUNT_ENABLED and socialaccount_providers %}
            <hr class="mt-4">
            <h2 class="h4 text-center">{% translate "Or use your social account" %}</h2>

            {% include 'socialaccount/snippets/login.html' with page_layout="entrance" %}
        {% endif %}
        </div>
    </div>
</main>
{% endblock content %}