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

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


{% block head_before %}
{{ block.super }}
<link rel="prefetch" href="{{ flow_background_url }}" />
{% if flow.compatibility_mode and not inspector %}
{% comment %}
    @see {@link web/types/webcomponents.d.ts} for type definitions.
{% endcomment %}
<script data-id="shady-dom">
    "use strict";

    window.ShadyDOM = window.ShadyDOM || {}
    window.ShadyDOM.force = true
</script>
{% endif %}
{% include "base/header_js.html" %}
<script data-id="flow-config">
    "use strict";

    window.authentik.flow = {
        "layout": "{{ flow.layout }}",
    };
</script>

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

{% block head %}
<script src="{% versioned_script 'dist/flow/FlowInterface-%v.js' %}" type="module"></script>
<style data-id="flow-css">
  :root {
      --ak-global--background-image: url("{{ flow_background_url }}");
  }
</style>
{% 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" id="flow-drawer">
        <div class="pf-c-drawer__main">
            <div class="pf-c-drawer__content">
                <div class="pf-c-drawer__body">
                        <ak-flow-executor
                            slug="{{ flow.slug }}"
                            class="pf-c-login"
                            data-layout="{{ flow.layout|default:'stacked' }}"
                            loading
                        >
                            {% include "base/placeholder.html" %}

                            <ak-brand-links name="flow-links" slot="footer"></ak-brand-links>
                        </ak-flow-executor>
                    </div>
                </div>

                <ak-flow-inspector
                    id="flow-inspector"
                    data-registration="lazy"
                    class="pf-c-drawer__panel pf-m-width-33"
                    slug="{{ flow.slug }}"
                ></ak-flow-inspector>
            </div>
        </div>
    </div>
</div>
{% endblock %}