{% extends "conjunto/app_base.html" %}
{% load i18n static conjunto %}

{% block top_bar %}{% endblock %}
{% block sidebar %}{% endblock %}
{% block header %}{% endblock %}

{% block extra_css %}
    {{ block.super }}
    {# Keep the password-toggle icon container visually flush with the input #}
    {# in all states (default, focus, is-invalid, browser autofill, dark mode). #}
    {# Root cause: .input-group-text has its own background (var(--tblr-bg-forms)) #}
    {# which does not track the adjacent input's background when the browser paints #}
    {# -webkit-autofill (yellow overlay) or when the input is marked .is-invalid. #}
    <style>
        /* Tabler already sets `.input-group-flat .input-group-text { background:
           var(--tblr-bg-forms) }`, which matches the input's default background.
           That's fine for the default state. We only need to patch the cases
           where the input's *visible* background diverges from --tblr-bg-forms:
           browser autofill (see below) and validation errors (just border). */

        /* Neutralize Chrome/Safari autofill yellow on the password/email inputs:
           use the standard form background via an inset box-shadow (the only way
           to override -webkit-autofill's internal background-color). */
        .card-body .form-control:-webkit-autofill,
        .card-body .form-control:-webkit-autofill:hover,
        .card-body .form-control:-webkit-autofill:focus,
        .card-body .form-control:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 1000px var(--tblr-bg-forms) inset !important;
            box-shadow: 0 0 0 1000px var(--tblr-bg-forms) inset !important;
            -webkit-text-fill-color: var(--tblr-body-color);
            caret-color: var(--tblr-body-color);
            transition: background-color 9999s ease-in-out 0s;
        }

        /* When the input is .is-invalid, Tabler only recolors the border.
           Ensure the icon container border matches, so the right edge does not
           appear detached from the invalid input. */
        .input-group-flat:has(> .form-control.is-invalid) > .input-group-text {
            border-color: var(--tblr-form-invalid-border-color);
        }
    </style>
{% endblock extra_css %}

{% block content %}
    {% block login_brand %}
        <div class="text-center mb-4">
            <a href="/" class="navbar-brand navbar-brand-autodark navbar-brand-centered">
                <img src="{% static 'brand.svg' %}" height="48"
                     alt="{{ site.name|default:globals.project_title }}"
                     class="navbar-brand-image"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
                <span style="display:none;">{{ site.name|default:globals.project_title }}</span>
            </a>
        </div>
    {% endblock login_brand %}

    {% block login_welcome %}{% endblock login_welcome %}

    <div class="card card-md">
        <div class="card-body">
            <h2 class="h2 text-center mb-4">{% block login_title %}{% translate "Login to your account" %}{% endblock login_title %}</h2>
            <form action="{% url 'login' %}" method="post" autocomplete="off" novalidate="">
                {% block login_form_top %}{% endblock login_form_top %}
                {% csrf_token %}
                {% if form.non_field_errors %}
                    {% comment %}
                      Non-field errors (e.g. "wrong username or password") rendered
                      as a Tabler alert with icon. The message text itself is owned
                      by django.contrib.auth / allauth and is intentionally kept
                      generic for security reasons (no user enumeration). Do not
                      rewrite or synthesize field-level errors from this.
                    {% endcomment %}
                    <div class="alert alert-danger mb-3" role="alert">
                        <div class="d-flex">
                            <div>
                                <i class="ti ti-alert-triangle fs-2 me-2"></i>
                            </div>
                            <div>
                                {% for error in form.non_field_errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="mb-3">
                    <label class="form-label">{% translate "Email address" %}</label>
                    <input type="email" name="username" class="form-control {% if form.username.errors %}is-invalid{% endif %}" placeholder="{% translate 'your@email.com' %}" autocomplete="off" value="{{ form.username.value|default:'' }}">
                    {% if form.username.errors %}
                        <div class="invalid-feedback">
                            {% for error in form.username.errors %}
                                <div>{{ error }}</div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="mb-2" x-data="{ visible: false }">
                    <label class="form-label">
                        {% translate "Password" %}
                        {% url 'password_reset' as password_reset_url %}
                        {% if password_reset_url %}
                            <span class="form-label-description">
                                <a href="{{ password_reset_url }}">{% translate "I forgot password" %}</a>
                            </span>
                        {% endif %}
                    </label>
                    <div class="input-group input-group-flat">
                        <input name="password" :type="visible ? 'text' : 'password'" type="password" class="form-control {% if form.password.errors %}is-invalid{% endif %}" placeholder="{% translate 'Your password' %}" autocomplete="off">
                        <span class="input-group-text">
                            <a href="#" class="link-secondary" aria-label="{% translate 'Show password' %}" @click.prevent="visible = !visible">
                                <i class="ti fs-2" :class="visible ? 'ti-eye-off' : 'ti-eye'"></i>
                            </a>
                        </span>
                        {% if form.password.errors %}
                            <div class="invalid-feedback">
                                {% for error in form.password.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="mb-2">
                    <label class="form-check">
                        <input type="checkbox" name="remember_me" class="form-check-input"{% if form.remember_me.value %} checked{% endif %}>
                        <span class="form-check-label">{% translate "Remember me on this device" %}</span>
                    </label>
                </div>
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary w-100">{% translate "Sign in" %}</button>
                </div>
            </form>
        </div>
    </div>

    {% block login_alternative_methods %}
        {% login_methods as methods %}
        {% if methods %}
            <div class="hr-text hr-text-center mt-4">{% translate "Or sign in with" %}</div>
            <div class="row g-2 mt-2">
                {% for method in methods %}
                    <div class="col">
                        {% if method.rendered %}
                            {{ method.rendered|safe }}
                        {% else %}
                            <a href="{{ method.url }}" class="btn btn-outline-secondary w-100" data-login-method="{{ method.name }}">
                                {% if method.icon %}<i class="ti ti-{{ method.icon }} me-1"></i>{% endif %}
                                {{ method.label }}
                            </a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endblock login_alternative_methods %}

    {% block login_extensions %}{% endblock login_extensions %}

    {% block login_footer %}{% endblock login_footer %}
{% endblock %}