{% load static %}
{% load django_glue %}

<!doctype html>
<html lang="en" data-theme="{{ theme.mode }}" data-theme-family="{{ theme.family }}">
<head>
    {% block base_head %}
        <style>[x-cloak] { display: none !important; }</style>

        {% block base_head_title %}
            <title>{{ html_head_title }}</title>
        {% endblock %}

        {% block base_head_meta %}
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
        {% endblock %}

        {% block base_head_additional_meta %}
        {% endblock %}

        {% block base_head_css %}
            <link rel="stylesheet" href="{% static theme.stylesheet %}" data-theme-css>

            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/css/bootstrap.min.css">
            <link rel="stylesheet" href="{% static 'django_spire/css/app-import.css' %}?v={{ DJANGO_SPIRE_VERSION }}">
            <link rel="stylesheet" href="{% static 'django_spire/css/bootstrap-override.css' %}?v={{ DJANGO_SPIRE_VERSION }}">
            <link rel="stylesheet" href="{% static 'django_spire/css/bootstrap-extension.css' %}?v={{ DJANGO_SPIRE_VERSION }}">

            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.x/font/bootstrap-icons.min.css">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
        {% endblock %}

        {% block base_head_additional_css %}
        {% endblock %}

        {% block base_head_js %}
            <script>
                window.django_spire = window.django_spire || {};
                window.django_spire.theme = {
                    active: '{{ theme.full|escapejs }}',
                    default: '{{ DJANGO_SPIRE_DEFAULT_THEME|escapejs }}',
                    path: '{{ DJANGO_SPIRE_THEME_PATH|escapejs }}'
                };
            </script>
            <link rel="manifest" href="{% static 'django_spire/favicons/manifest.json' %}">

            <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
            <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.x/dist/echarts.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/pulltorefreshjs/0.1.22/index.umd.min.js"></script>

            <script id="theme-config" type="application/json">{{ theme_config|safe }}</script>
            <script type="application/javascript" src="{% static 'django_spire/js/theme.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
            <script type="application/javascript" src="{% static 'django_spire/js/ui.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
            <script type="application/javascript" src="{% static 'django_spire/js/cookie.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
            <script type="application/javascript" src="{% static 'django_spire/js/ajax.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
            <script type="application/javascript" src="{% static 'django_spire/js/dropdown.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
            <script type="application/javascript" src="{% static 'django_spire/js/modal.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
            <script type="application/javascript" src="{% static 'django_spire/js/notification.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
            <script type="application/javascript" src="{% static 'django_spire/js/full_screen.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>
            <script type="application/javascript" src="{% static 'django_spire/js/date_time_helpers.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>

            <script type="application/javascript" src="{% static 'django_spire/js/django_glue/helpers.js' %}?v={{ DJANGO_SPIRE_VERSION }}"></script>

            <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.14.x/dist/cdn.min.js"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/mask@3.14.x/dist/cdn.min.js"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.14.x/dist/cdn.min.js"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.14.x/dist/cdn.min.js"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.14.x/dist/cdn.min.js"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/sort@3.x.x/dist/cdn.min.js"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.x/dist/cdn.min.js"></script>
        {% endblock %}

        {% block base_head_additional_js %}
        {% endblock %}

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

<body class="{% block base_body_class %}bg-app-layer-one{% endblock %}">
    {% block base_body %}
        {% block base_body_top_js %}
        {% endblock %}

        {% block base_body_additional_top_js %}
        {% endblock %}

        {% block base_body_content %}
        {% endblock %}

        {% block base_body_bottom_js %}
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/js/bootstrap.bundle.min.js"></script>
        {% endblock %}

        {% block init_pull_to_refresh %}
            <script>
                let lastTouchedElement = null;

                document.addEventListener('touchstart', function (e) {
                    lastTouchedElement = e.target;
                }, { passive: true });

                function getScrollableAncestor(element) {
                    while (element && element !== document.body) {
                        const style = window.getComputedStyle(element);
                        const overflowY = style.getPropertyValue('overflow-y');

                        if (
                            (overflowY === 'auto' || overflowY === 'scroll') &&
                            element.scrollHeight > element.clientHeight
                        ) {
                            return element;
                        }

                        element = element.parentElement;
                    }

                    return null;
                }

                function isIOS() {
                    return /iPhone|iPad|iPod/i.test(navigator.userAgent);
                }

                function isWebkit() {
                    return /WebKit/i.test(navigator.userAgent) && !/Chrome/i.test(navigator.userAgent);
                }

                function isStandaloneMode() {
                    return window.navigator.standalone === true ||
                           window.matchMedia('(display-mode: standalone)').matches;
                }

                const ptr = PullToRefresh.init({
                    mainElement: 'body',

                    shouldPullToRefresh: function () {
                        if (!(isIOS() && isWebkit() && isStandaloneMode())) {
                            return false;
                        }

                        const scrollable = getScrollableAncestor(lastTouchedElement);

                        if (scrollable) {
                            return false;
                        }

                        return document.scrollingElement.scrollTop === 0;
                    },

                    onRefresh() {
                        window.location.reload();
                    }
                });
            </script>
        {% endblock %}

        {% block base_body_additional_bottom_js %}
        {% endblock %}

        {% glue_init %}
    {% endblock %}
</body>
</html>
