{% extends "allauth/layouts/base.html" %}
{% load wagtailimages_tags wagtailsettings_tags %}
{% comment %}
The frame of every auth page that allauth draws from its entrance elements:
messages, the ground, the site's logo (linked to its home page) and the
language menu in the top corners; the page fills the card. A page copied
whole replaces the body block, frame and all.
{% endcomment %}
{% block body %}
    {% include "account/messages.html" %}
    <main class="auth-page phx-ground">
        <header class="auth-bar">
            {% get_settings %}
            {% with site_setting=settings.phoxtail_cms.SiteSetting %}
                {% if site_setting.logo %}
                    {% image site_setting.logo height-256 as logo %}
                    {% if site_setting.logo_dark %}
                        {% image site_setting.logo_dark height-256 as logo_dark %}
                    {% endif %}
                    {% with home=site_setting.site.root_page.url %}
                        {% if home %}<a href="{{ home }}" class="auth-logo-link">{% endif %}
                        <picture>
                            {% if logo_dark %}
                                <source srcset="{{ logo_dark.file.url }}"
                                        media="(prefers-color-scheme: dark)" />
                            {% endif %}
                            <img src="{{ logo.file.url }}"
                                 alt="{{ site_setting.logo.title }}"
                                 class="auth-logo-img" />
                        </picture>
                        {% if home %}</a>{% endif %}
                    {% endwith %}
                {% endif %}
            {% endwith %}
            {% include "phoxtail_core/language_menu.html" %}
        </header>
        <div class="auth-container">
            <div class="phx-card auth-card">
                {% block content %}
                {% endblock content %}
            </div>
        </div>
    </main>
{% endblock body %}