{% 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 %}

{% comment %}
  The login page reuses the full app layout but blanks the chrome above.
  Force both sidebars collapsed so ``.cj-page-content`` reserves no sidebar
  gutter (the left one is ``full`` by default → it would push the card right),
  and zero the navbar/statusbar heights since neither is rendered here. The
  card itself is centred by the ``.container-tight`` wrapper in ``content``.
{% endcomment %}
{% block body_attrs %}
    class="antialiased cj-sidebar-left-mode-collapsed cj-sidebar-right-mode-collapsed"
    style="--cj-navbar-height: 0px; --cj-statusbar-height: 0px;"
{% 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). #}
    {# A stylesheet rather than a <style> block, which a CSP with #}
    {# ``style-src 'self'`` refuses; the rationale is in the file itself. #}
    <link rel="stylesheet" href="{% static 'conjunto/css/login.css' %}">
{% endblock extra_css %}

{% block content %}
    <div class="container-tight py-4">
    {% block login_brand %}
        <div class="text-center mb-4">
            {# Missing brand.svg → the browser renders the alt text; see the #}
            {# same fallback in app_base.html. #}
            <a href="/" class="navbar-brand navbar-brand-autodark navbar-brand-centered">
                <img src="{% static 'brand.svg' %}" height="48"
                     alt="{{ globals.project_title }}"
                     class="navbar-brand-image">
            </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 %}
    </div>{# /.container-tight #}
{% endblock %}