{% extends 'base/skeleton.html' %}

{% load static %}
{% load i18n %}
{% load authentik_core %}

{% block head_before %}
<link rel="prefetch" href="{{ request.brand.branding_default_flow_background_url }}" />
{% include "base/header_js.html" %}
{% endblock %}

{% block head %}
<style data-id="static-styles">
    :root {
        --ak-global--background-image: url("{{ request.brand.branding_default_flow_background_url|iriencode|safe }}");
    }
    :root[data-theme="dark"] .branding-logo--light,
    :root:not([data-theme="dark"]) .branding-logo--dark {
        display: none;
    }
</style>

<link rel="stylesheet" type="text/css" href="{% versioned_script 'dist/styles/static-%v.css' %}" />
{% endblock %}

{% block body %}
<ak-skip-to-content></ak-skip-to-content>
<ak-message-container></ak-message-container>

<div class="pf-c-page__drawer">
    <div class="pf-c-drawer pf-m-collapsed">
        <div class="pf-c-drawer__main">
            <div class="pf-c-drawer__content">
                <div class="pf-c-drawer__body">
                    <div class="pf-c-login" data-layout="stacked">
                        <main class="pf-c-login__main" aria-label="Authentication form">
                            <div class="pf-c-login__main-header pf-c-brand">
                                {% with themed=brand.branding_logo_themed_urls %}
                                {% if themed %}
                                <img class="branding-logo branding-logo--light" src="{{ themed.light }}" alt="authentik Logo" />
                                <img class="branding-logo branding-logo--dark" src="{{ themed.dark }}" alt="authentik Logo" />
                                {% else %}
                                <img class="branding-logo" src="{{ brand.branding_logo_url }}" alt="authentik Logo" />
                                {% endif %}
                                {% endwith %}
                            </div>
                            <div class="pf-c-login__main-header">
                                <h1 class="pf-c-title pf-m-3xl" data-test-id="card-title">
                                    {% block card_title %}
                                    {% endblock %}
                                </h1>
                            </div>
                            <div class="pf-c-login__main-body">
                                {% block card %}
                                {% endblock %}
                            </div>
                        </main>
                        <footer
                            name="site-footer"
                            aria-label="{% trans 'Site footer' %}"
                            class="pf-c-login__footer pf-m-dark">
                            <div name="flow-links" aria-label="{% trans 'Flow links' %}">
                                <ul class="pf-c-list pf-m-inline" part="list">
                                    {% for link in footer_links %}
                                    <li part="list-item">
                                        <a part="list-item-link" href="{{ link.href }}">{{ link.name }}</a>
                                    </li>
                                    {% endfor %}
                                    <li part="list-item">
                                        <span>
                                            {% trans 'Powered by authentik' %}
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}