{% load i18n static unfold %}

{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}

{% capture as branding silent %}{% block branding %}{% endblock %}{% endcapture %}
{% capture as pretitle silent %}{% block pretitle %}{% endblock %}{% endcapture %}
{% capture as content_title silent %}{% block content_title %}{% if title %}{{ title }}{% endif %}{% endblock %}{% endcapture %}
{% capture as content_subtitle silent %}{% block content_subtitle %}{% if subtitle %}{{ subtitle }}{% endif %}{% endblock %}{% endcapture %}
{% capture as nav_global silent %}{% block nav-global %}{% endblock %}{% endcapture %}
{% capture as nav_global_side silent %}{% block nav-global-side %}{% endblock %}{% endcapture %}
{% capture as actions_items silent %}{% block actions-items %}{% endblock %}{% endcapture %}
{% capture as extra_userlinks silent %}{% block extra_userlinks %}{% endblock %}{% endcapture %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:"rtl,ltr,auto" }}" {% if theme %}class="{{ theme }}"{% endif %} x-data="{ adminTheme: {% if theme %}'{{ theme }}'{% else %}$persist('auto').as('adminTheme'){% endif %} }" x-bind:class="{'dark': adminTheme === 'dark' || (adminTheme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)}" x-cloak>

    <head>
        <title>{% block title %}{% endblock %}</title>

        <link href="{% static "unfold/fonts/inter/styles.css" %}" rel="stylesheet">
        <link href="{% static "unfold/fonts/material-symbols/styles.css" %}" rel="stylesheet">

        {% for style in styles %}
            <link href="{{ style }}" rel="stylesheet">
        {% endfor %}

        {% for favicon in site_favicons %}
            <link {% if favicon.rel %}rel="{{ favicon.rel }}"{% endif %} {% if favicon.href %}href="{{ favicon.href }}"{% endif %} {% if favicon.type %}type="{{ favicon.type }}"{% endif %} {% if favicon.sizes %}sizes="{{ favicon.sizes }}"{% endif %}>
        {% endfor %}

        <link href="{% static 'unfold/css/styles.css' %}" rel="stylesheet">
        <link href="{% static 'unfold/css/simplebar.css' %}" rel="stylesheet">

        <script src="{% static 'unfold/js/alpine.anchor.js' %}" defer></script>
        <script src="{% static 'unfold/js/alpine.persist.js' %}" defer></script>
        <script src="{% static 'unfold/js/alpine.sort.js' %}" defer></script>
        <script src="{% static 'unfold/js/alpine.resize.js' %}" defer></script>
        <script src="{% static 'unfold/js/alpine.js' %}" defer></script>
        <script src="{% static 'unfold/js/htmx.js' %}"></script>
        <script src="{% static 'unfold/js/chart.js' %}"></script>

        {% for script in scripts %}
            <script src="{{ script }}"></script>
        {% endfor %}

        {% block extrastyle %}{% endblock %}

        {% block extrahead %}{% endblock %}

        <script src="{% static 'unfold/js/app.js' %}"></script>

        {% block responsive %}
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% endblock %}

        {% block blockbots %}
            <meta name="robots" content="NONE,NOARCHIVE">
        {% endblock %}
    </head>

    <body class="antialiased bg-white font-sans text-font-default-light text-sm dark:bg-base-900 dark:text-font-default-dark {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ mainWidth: 0, {% if opts %}activeTab: 'general',{% endif %} sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = {% if opts %}window.location.hash?.replace('#', '') || 'general'{% else %}''{% endif %}">
        {% if colors %}
            <style id="unfold-theme-colors">
                :root {
                    {% if border_radius %}
                        --border-radius: {{ border_radius }};
                    {% endif %}

                    {% for name, weights in colors.items %}
                        {% for weight, value in weights.items %}
                            --color-{{ name }}-{{ weight }}: {{ value }};
                        {% endfor %}
                    {% endfor %}
                }
            </style>
        {% endif %}

        {% block base %}{% endblock %}

        <div id="modal-overlay" class="backdrop-blur-sm bg-opacity-80 bg-base-900 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>
        <script src="{% static 'unfold/js/simplebar.js' %}"></script>
    </body>

</html>
