{% load static %}
{% load bloomerp %}

<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta name="htmx-config" content='{"refreshOnHistoryMiss": true}' />
<meta name="bloomerp-message-sound-url" content="{% static 'bloomerp/message-sound.mp3' %}" />

<!-- Apply the persisted theme before styles and application JavaScript load. -->
<script>
    (() => {
        const storageKey = 'bloomerp_theme_preference';
        const allowedPreferences = ['light', 'dark', 'auto'];
        let preference = 'auto';

        try {
            const storedPreference = window.localStorage.getItem(storageKey);
            if (allowedPreferences.includes(storedPreference)) {
                preference = storedPreference;
            }
        } catch (_error) {
            // Storage can be unavailable in privacy-restricted browser contexts.
        }

        const isDark = preference === 'dark'
            || (preference === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
        document.documentElement.classList.toggle('dark', isDark);
        document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
        document.documentElement.dataset.themePreference = preference;
        document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
    })();
</script>

<title>
    Bloomerp {% block title %}{% endblock title %}
</title>
<meta content="" name="description" />
<meta content="" name="keywords" />

<!-- Favicons -->
<link href="{% static 'bloomerp/img/bloomerp-touch-icon.png' %}" rel="icon" />
<link href="{% static 'bloomerp/img/bloomerp-touch-icon.png' %}" rel="logo-touch-icon" />

<!-- Icons (Font Awesome Free, including Brands) -->
<link href="{% static 'bloomerp/vendor/fontawesome/css/all.min.css' %}" rel="stylesheet" />

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap"
    rel="stylesheet" />

<!-- Plotly (for server-rendered chart hydration) TODO: move to main-->
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>

<!--HTMX Download-->
<script src="{% static 'bloomerp/js/htmx-download.js' %}"></script>

<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--Alpine-->
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

<!--Ace editor-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.0/ace.js"
    integrity="sha512-jZW/Y5ZrHGo7MsZjfcmajLQKN2ax6njLZ6tuiPkhGH3l2Y0FAsGXS6uWFf/ItiR6oGVeP4TXpGPXMGEqFl7WSA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/mode-json.min.js"
    integrity="sha512-K+H+3WTfhwE9fnfv4makUYJxz4kwIadQPOjGHAmOT96FtMSPRnvnuGR/sZjuNB2MmmHQ94Mnc9zoDxTHKMMEww=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/mode-python.min.js"
    integrity="sha512-DUdq0nHbbCHQMqQNALNivk5tAdpFWOpm3mplXDwBqIpXD6/vfgXp8fESbfsnePQT3jZKVI3mCbEQumz/S4IHPA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/mode-html.min.js"
    integrity="sha512-JSkDZ0Crk8+F/F/lCqh6LZ/mzPqhSrRanUC3TExEziPsbLPFIJQmR5R7p954sdM88cOL9+WlVR6XBFJa3nXcdA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/mode-css.min.js"
    integrity="sha512-/j2txHwfn9J3633V80jkkMDKbz0nq3hxhnrh2dZIKKQzFYuEVyMLx+wsbtgC2aViUYenhx1mb4EuZyGiluBwXA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/mode-javascript.min.js"
    integrity="sha512-S5TwCMItd+YdNiTApqHt2QkA2sd90dgpWxHoYhulWm+Nb/i9GppPsve8IOraaTj56uNJgIOtmFQFggL1PuKkWA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/mode-sql.min.js"
    integrity="sha512-dABa+YCy/MOELLU5BKnJeR/pcORL8icJNR1TBZWrRmlFoWXZEFketX6Qx/DVBkewMZC8mUOGJMJ70fwxcpIDCw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!--Main CSS file-->
{% if DEBUG and BLOOMERP_VITE_DEV_SERVER_URL %}

    <script type="module" src="{{ BLOOMERP_VITE_DEV_SERVER_URL }}/src/styles.css"></script>

{% else %}
    <!-- Production mode: Built bundle -->
    {% bloomerp_asset_version as asset_version %}
    <link href="{% static 'bloomerp/js/dist/main.css' %}?v={{ asset_version|urlencode }}" rel="stylesheet" />
    <link href="{% static 'bloomerp/css/dist/styles.css' %}?v={{ asset_version|urlencode }}" rel="stylesheet" />
{% endif %}