{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>Robot Hands</title>
        <script src="{% static 'marketing/tailwind.js' %}"></script>
        <script src="{% static 'datavis/htmx.min.js' %}"></script>
        <script type="module" src="{% static 'datavis/chartjs_4.5.0.min.js' %}"></script>

        <style type="text/tailwindcss">
            @theme {
                --color-surface: #f6f6f6;
                --color-surface-light: #fcfcfc;
                --color-on-surface-primary: #282828;
                --color-on-surface-secondary: #5e5e5e;
                --color-on-surface-tertiary: #7e7e7e;
                --color-on-surface-quaternary: #cfcfcf;
                --color-on-surface-quinary: #e9e9e9;
                --color-surface-container-highest: #cfcfcf;
                --color-surface-container-high: #e9e9e9;
                --color-surface-container: #f1f1f1;
                --color-surface-container-low: #f9f9f9;
                --color-surface-container-lowest: #fcfcfc;
                --color-outline-primary: #e9e9e9;
                --color-outline-secondary: #f1f1f1;
                --color-outline-tertiary: #f6f6f6;

                --color-brand: #FE4A22;
                --color-on-brand: #fcfcfc;
                --color-brand-container: #FFEBE6;
                --color-on-brand-container: #FE4A22;

                /* State / Brand */
                --color-brand-hover: #4686ff;
                --color-brand-on-hover: #fcfcfc;
                --color-brand-focused: #295ec7;
                --color-brand-on-focused: #fcfcfc;
                --color-brand-pressed: #295ec7;
                --color-brand-on-pressed: #fcfcfc;
                --color-brand-disabled: #e9e9e9;
                --color-brand-on-disabled: #b7b7b7;

                /* State / Brand Container */
                --color-brand-container-hover: #e3eefd;
                --color-brand-container-on-hover: #4686FF;
                --color-brand-container-focused: #d0e2fc;
                --color-brand-container-on-focused: #295ec7;
                --color-brand-container-pressed: #b4d1fb;
                --color-brand-container-on-pressed: #295ec7;
                --color-brand-container-disabled: #e9e9e9;
                --color-brand-container-on-disabled: #b7b7b7;

                /* State / Error */
                --color-error-hover: #f57988;
                --color-error-on-hover: #fcfcfc;
                --color-error-focused: #b41c37;
                --color-error-on-focused: #fcfcfc;
                --color-error-pressed: #b41c37;
                --color-error-on-pressed: #295ec7;
                --color-error-disabled: #e9e9e9;
                --color-error-on-disabled: #b7b7b7;

                /* Button / Secondary */
                --color-button: #007AFF;
                --color-button-hover: #00AAFF;
            }
        </style>
    </head>
    <body class="bg-surface" hx-boost="false">
    {% if debug %}
        <!-- Support django_debug_toolbar with hx-boost -->
        if (typeof window.htmx !== "undefined") {
            htmx.on("htmx:afterSettle", function(detail) {
                if (
                    typeof window.djdt !== "undefined"
                    && detail.target instanceof HTMLBodyElement
                ) {
                    djdt.show_toolbar();
                }
            });
        }
    {% endif %}
    <main class="py-4 pr-4 border-box h-screen overflow-auto flex w-full h-full">
        <aside class="flex h-full px-2 flex-0 w-fit">
            {% block nav %}
            {% endblock %}
        </aside>
        <section class="p-6 rounded-2xl bg-surface-light flex-1 border border-solid border-outline-primary shadow-sm">
        {% block content %} {% endblock %}
        </section>
    </main>
    </body>
</html>
