{% 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 %}

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

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

        <style data-id="brand-css">{{ brand_css }}</style>
        <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>
