{% load static %}
{% load i18n %}


<!--/
Je suis spécialisé en python, pas en js...
Don't judge me
/-->

{#<script src="{% static 'javascripts/uikit/uikit.min.js' %}"></script>#}
{#<script src="{% static 'javascripts/uikit/uikit-icons.min.js' %}"></script>#}

<!-- theme -->
<script>
    window.themeCheckboxes = ["theme", "themeSidebar"];

    themeCheckboxes.forEach(checkbox => {
        const theme = document.querySelector(`input[name=${checkbox}]`);

        theme.addEventListener('change', function () {
            applyTheme(theme.checked ? 'dark' : 'light');
            console.log(theme)
        })

        theme.checked = document.documentElement.getAttribute('data-theme') === 'dark';
    })
    window.applyTheme = function (theme) {
        document.documentElement.setAttribute('data-theme', theme);

        let cards = document.querySelectorAll(".uk-card.uk-card-default,.uk-card.uk-card-secondary");
        cards.forEach(card => {
            if (theme === 'dark') {
                card.classList.replace("uk-card-default", `uk-card-secondary`)
            } else {
                card.classList.replace("uk-card-secondary", `uk-card-default`)
            }
        })

        window.sessionStorage.setItem('theme', theme)
    }
</script>

<!-- sidebar -->
<script>
    offcanvas_nav = document.getElementById("offcanvas-nav");
    trigger = document.querySelector("a.uk-navbar-toggle")

    trigger.addEventListener("click", e => {
        offcanvas_nav.classList.add("uk-offcanvas", "uk-offcanvas-overlay", "uk-open")
    })

    offcanvas_nav.querySelector("button.uk-close").addEventListener("click", e => {
        offcanvas_nav.classList.remove("uk-offcanvas-overlay", "uk-open")
    })
</script>

<!-- save theme -->
<script>
    theme_session = window.sessionStorage.getItem('theme')
    if (theme_session !== null) {
        applyTheme(theme_session);

        themeCheckboxes.forEach(checkbox => {
            document.querySelector(`input[name=${checkbox}]`).checked = theme_session === 'dark'
        })
    }
</script>

<!-- status page -->
<script src="https://qgdzfv56ntr8.statuspage.io/embed/script.js"></script>
