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

{% block top_bar %}{% endblock %}
{% block sidebar_left %}{% endblock %}
{% block sidebar_right %}{% endblock %}
{% block page_header %}{% endblock %}
{% block footer %}{% 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 %}
        {% if welcome_message %}
            <div class="text-center mb-4">
                <h1 class="display-6 fw-bold lh-1 mb-0">{{ welcome_message }}</h1>
            </div>
        {% endif %}
    {% endblock login_welcome %}

    {% comment %}
      The card itself is delegated to a partial so the login flow can swap
      it via HTMX (credentials → tenant picker → final redirect).
      ``card_template`` defaults to the credentials card, but
      ``ConjuntoLoginView`` may set it to the tenant-pick partial on a
      non-HTMX fallback render.
    {% endcomment %}
    {% include card_template|default:"registration/_login_card.html" %}

    {% 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 %}
        {% if login_footer_html %}{{ login_footer_html|safe }}{% endif %}
    {% endblock login_footer %}
{% endblock %}