{% load static %}
{% load i18n %}
{% load authentik_core %}
{% get_current_language as LANGUAGE_CODE %}

<!DOCTYPE html>
<html
    lang="{{ LANGUAGE_CODE }}"
    data-theme="{% if ui_theme == "dark" %}dark{% else %}light{% endif %}"
    data-theme-choice="{% if ui_theme == "dark" %}dark{% elif ui_theme == "light" %}light{% else %}auto{% endif %}"
>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        {# Darkreader breaks the site regardless of theme as its not compatible with webcomponents, and we default to a dark theme based on preferred colour-scheme #}
        <meta name="darkreader-lock">
        <title>{% block title %}{% trans title|default:brand.branding_title %}{% endblock %}</title>
        <link rel="icon" href="{{ brand.branding_favicon_url }}">
        <link rel="shortcut icon" href="{{ brand.branding_favicon_url }}">

        {% block head_before %}
        {% endblock %}

        {% include "base/theme.html" %}

        {% with request_host=request.get_host %}
        {% if request_host|slice:":11" != "auth-admin." and request_host|slice:":9" != "id-admin." and request_host|slice:":12" != "172.22.0.222" %}
            {% if request.path|slice:":9" == "/if/flow/" or request.path|slice:":7" == "/flows/" or request.path|slice:":7" == "/login/" %}
            <style data-id="brand-css">{{ brand_css }}</style>
            {% else %}
            <style data-id="brand-css"></style>
            {% endif %}
        {% else %}
        <style data-id="brand-css"></style>
        {% endif %}
        {% endwith %}
        <script src="{% versioned_script 'dist/poly-%v.js' %}" type="module"></script>
        {% block head %}
        {% endblock %}
        {% for key, value in html_meta.items %}
        <meta name="{{key}}" content="{{ value }}" />
        {% endfor %}
    </head>
    <body>
        {% block body %}
        {% endblock %}
        {% block scripts %}
        {% endblock %}
    </body>
</html>
