{% 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 }}",
        "background": "{{ flow.background }}",
        "title": "{{ flow.title }}",
    };
</script>
{% endblock %}

{% block interface_stylesheet %}
<link rel="stylesheet" type="text/css" href="{% versioned_script 'dist/styles/flow-%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|iriencode|safe }}");
  }
</style>
{% endblock %}

{% block body %}
<ak-skip-to-content></ak-skip-to-content>
<ak-message-container></ak-message-container>
<ak-drawer id="flow-drawer">
    <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>
    
    <ak-flow-inspector
        slot="panel"
        id="flow-inspector"
        data-registration="lazy"
        slug="{{ flow.slug }}"
    ></ak-flow-inspector>
</ak-drawer>
{% endblock %}