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

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

{% block head_before %}
{{ block.super }}
<link rel="prefetch" href="{{ flow.background_url }}" />
{% if flow.compatibility_mode and not inspector %}
<script>ShadyDOM = { force: !navigator.webdriver };</script>
{% endif %}
<script>
window.authentik = {};
window.authentik.locale = "{{ tenant.default_locale }}";
window.authentik.config = JSON.parse( '{{ config_json|safe }}');
window.authentik.tenant = JSON.parse('{{ tenant_json|safe }}');
window.authentik.flow = {
    "layout": "{{ flow.layout }}",
};
</script>
{% endblock %}

{% block head %}
<script src="{% static 'dist/flow/FlowInterface.js' %}" type="module"></script>
<style>
:root {
    --ak-flow-background: url("{{ flow.background_url }}");
}
</style>
{% endblock %}

{% block body %}
<ak-message-container data-refresh-on-locale="true"></ak-message-container>
<ak-flow-executor data-refresh-on-locale="true">
    <section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl">
        <div class="pf-c-empty-state" style="height: 100vh;">
            <div class="pf-c-empty-state__content">
                <span class="pf-c-spinner pf-m-xl pf-c-empty-state__icon" role="progressbar" aria-valuetext="{% trans 'Loading...' %}">
                    <span class="pf-c-spinner__clipper"></span>
                    <span class="pf-c-spinner__lead-ball"></span>
                    <span class="pf-c-spinner__tail-ball"></span>
                </span>
                <h1 class="pf-c-title pf-m-lg">
                    {% trans "Loading..." %}
                </h1>
            </div>
        </div>
    </section>
</ak-flow-executor>
{% endblock %}
