{% 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 }}");
    }
</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 pf-c-title pf-m-3xl">
                                {{ brand.branding_title }}
                            </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 aria-label="Site footer" class="pf-c-login__footer pf-m-dark">
                            <ul class="pf-c-list pf-m-inline">
                                {% for link in footer_links %}
                                <li>
                                    <a href="{{ link.href }}">{{ link.name }}</a>
                                </li>
                                {% endfor %}
                                <li>
                                    <span>
                                        © SUSE, All Rights Reserved
                                    </span>
                                </li>
                            </ul>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}