<!doctype html>
<html>

<head>
    <base href="{{base_url}}/">
    {% if production %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.27/dist/vuetify.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.27/dist/vuetify.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
    <link href='https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css' rel="stylesheet">
    <script src="https://unpkg.com/mermaid@8.6.4/dist/mermaid.min.js"></script>
    {% else %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.27/dist/vuetify.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.27/dist/vuetify.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
    <link href='https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.css' rel="stylesheet">
    <script src="https://unpkg.com/mermaid@8.6.4/dist/mermaid.js"></script>
    {% endif %}

    <link rel="icon" type="image/png" href="static/sun64.png">

    <link href="static/highlight.css" rel="stylesheet">
    <link href="static/highlight-dark.css" rel="stylesheet">
    </link>
    <link href="static/style.css" rel="stylesheet">
    </link>
    <link href="static/nbconvert/index.css" rel="stylesheet">
    </link>
    <link href="static/nbconvert/theme-light.css" rel="stylesheet">
    </link>
    <title>Hello from Solara ☀️</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.js" crossorigin="anonymous">
    </script>
    <script src="static/main-vuetify.js"></script>
    <script src="static/ansi.js"></script>
    </script>
    <script>
        const themeVariants = ['light', 'dark', 'auto']
        var theme = {{ theme |tojson|safe }}
        if(theme.variant_user_selectable) {
            if(localStorage.getItem('theme.variant')) {
                theme.variant = JSON.parse(localStorage.getItem('theme.variant'))
            }
        }
        function prefersDarkScheme() {
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
        }
        function inDarkMode() {
            if(theme.variant == 'auto') {
                return prefersDarkScheme();
            }
            else {
                return theme.variant == 'dark';
            }
        }
    </script>
    <script id="jupyter-config-data" type="application/json">
    {
        "baseUrl": "{{base_url}}/jupyter",
        "kernelId": "1234"
    }
    </script>
    <style>
        {% include "loader-" ~ theme.loader ~ ".css" %}
    </style>
</head>

<body>
{% raw -%}
    <div id="app" style="display: none">
        <v-app :key="forceUpdateTrigger">
{% endraw -%}
            {# {% include "transition-domino.html" %} #}
            {% include "loader-" ~ theme.loader ~ ".html" %}
{% raw -%}

            <v-menu v-if="debug && voilaDebugMessages && voilaDebugMessages.length" offset-y top
                :close-on-content-click="false">
                <template v-slot:activator="{ on }">
                    <v-btn text v-on="on" style="position: fixed; bottom: 8px; right: 8px">
                        <span style="color: red">{{ voilaDebugMessages.length }}</span>
                        <v-icon right large color="red">mdi-bug-outline</v-icon>
                    </v-btn>
                </template>
                <v-sheet class="pa-2" style="overflow: auto; max-height: 80vh">
                    <div style="display: flex" v-for="message in voilaDebugMessages" :key="message.cell" class="pa-2">
                        <div style="width: 50px">[{{ message.cell }}]</div>
                        <div v-if="message.traceback" class="jp-RenderedText jp-OutputArea-output"
                            data-mime-type="application/vnd.jupyter.stderr">
                            <pre v-html="message.traceback" class="pa-2"></pre>
                        </div>
                        <pre v-else><span :style="message.name === 'stderr' ? 'background-color: var(--jp-rendermime-error-background)' : ''"
                                   class="pa-2"
                                >{{ message.text }}</span>
                        </pre>
                    </div>
                    <div class="d-flex justify-end">
                        <v-tooltip top>
                            <template v-slot:activator="{ on, attrs }">
                                <v-btn icon v-bind="attrs" v-on="on" @click="voilaDebugMessages = []">
                                    <v-icon>mdi-trash-can-outline</v-icon>
                                </v-btn>
                            </template>
                            <span>Clear messages</span>
                        </v-tooltip>
                    </div>
                </v-sheet>
            </v-menu>

            <v-menu offset-y top :close-on-content-click="false" style="z-index: 100001">
                <template v-slot:activator="{ on }">
                    <v-btn text v-on="on" style="position: fixed; top: 8px; right: 8px; z-index: 100000">
                        <v-icon right large style="opacity: 0.5">mdi-account</v-icon>
                    </v-btn>
                </template>
                <v-list>
                    <v-list-item @click="stateReset()" link>
                        <v-list-item-icon>
                            <v-icon>mdi-close-box</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>Reset application
                        </v-list-item-title>
                    </v-list-item>
                    <v-list-item v-if="theme.variant_user_selectable">
                            <v-btn-toggle v-model="themeVariantIndex" tile group mandatory>
                                <v-btn vaue="light" icon>
                                    <v-icon>mdi-white-balance-sunny</v-icon>
                                </v-btn>
                                <v-btn>
                                    <v-icon>mdi-weather-night</v-icon>
                                </v-btn>
                                <v-btn>
                                    <v-icon>mdi-theme-light-dark</v-icon>
                                </v-btn>
                            </v-btn-toggle>
                    </v-list-item>

                </v-list>
            </v-menu>
            <!-- <v-menu v-if="debug && outputMessages && outputMessages.length" offset-y top
                :close-on-content-click="false">
                <template v-slot:activator="{ on }">
                    <v-btn text v-on="on" style="position: fixed; top: 8px; right: 8px">
                        <span style="color: #333">{{ outputMessages.length }}</span>
                        <v-icon right large color="#333">mdi-information-outline</v-icon>
                    </v-btn>
                </template>
                <v-sheet class="pa-2" style="overflow: auto; max-height: 80vh">
                    <div style="display: flex" v-for="message in outputMessages" :key="message.cell" class="pa-2">
                        <div style="width: 50px">[{{ message.cell }}]</div>
                        <div v-if="message.traceback" class="jp-RenderedText jp-OutputArea-output"
                            data-mime-type="application/vnd.jupyter.stderr">
                            <pre v-html="message.traceback" class="pa-2"></pre>
                        </div>
                        <pre v-else><span :style="message.name === 'stderr' ? 'background-color: var(--jp-rendermime-error-background)' : ''"
                                   class="pa-2"
                                >{{ message.text }}</span>
                        </pre>
                    </div>
                    <div class="d-flex justify-end">
                        <v-tooltip top>
                            <template v-slot:activator="{ on, attrs }">
                                <v-btn icon v-bind="attrs" v-on="on" @click="outputMessages = []">
                                    <v-icon>mdi-trash-can-outline</v-icon>
                                </v-btn>
                            </template>
                            <span>Clear messages</span>
                        </v-tooltip>
                    </div>
                </v-sheet>
            </v-menu> -->
        </v-app>
    </div>
{% endraw -%}
    <script>
        window.for_pyodide = false;
        {% if for_pyodide %}
        const solaraWorker = new Worker("./static/webworker.js");
        window.for_pyodide = true;
        {% endif %}
        var debug = true;
        var app = new Vue({
            vuetify: new Vuetify({
                theme: { dark: inDarkMode() },
            }),
            el: '#app',
            created() {
                const original_$forceUpdate = this.$forceUpdate.bind(this);
                this.$forceUpdate = (() => {
                    this.forceUpdateTrigger += 1;
                    original_$forceUpdate();
                });
            },
            mounted() {
                document.querySelector('#app').removeAttribute("style");
                // listen to change in preferred color scheme (e.g if choosing dark in OSX)
                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                    this.$vuetify.theme.dark = inDarkMode();
                });
            },
            methods: {
                stateReset() {
                    console.log('reset')
                    msg = { "type": "state_reset", "reason": "user command" }
                    wsWatchdog.send(JSON.stringify(msg))
                },
            },
            computed: {
                themeVariantIndex:{
                    get() {
                        return themeVariants.indexOf(theme.variant)
                    },
                    set(value) {
                        theme.variant = themeVariants[value]
                        this.$vuetify.theme.dark = inDarkMode()
                        localStorage.setItem('theme.variant', JSON.stringify(theme.variant))
                    }
                }
            },
            data() {
                return {
                    forceUpdateTrigger: 0,
                    loading_text: "Loading resources",
                    loadingPercentage: -1,
                    loading: true,
                    title: "No title",
                    voilaDebugMessages: [],
                    outputMessages: [],
                    theme: theme,
                    debug: debug,
                    // outputMessages: [{ name: 'stderr', text: 'lala' }],
                }
            }
        });

        // Loading classic notebook extensions.
        {% if 'jupyter-vuetify/extension' in resources.nbextensions -%}
        window.enable_nbextensions = true;
        {% endif -%}
        requirejs.config({
            baseUrl: '{{resources.base_url}}static/',
            waitSeconds: 3000,
            map: {
                '*': {
                        {% if 'jupyter-vue/extension' in resources.nbextensions -%}
                            'jupyter-vue': 'nbextensions/jupyter-vue/nodeps',
                        {% endif -%}
                        {% if 'jupyter-vuetify/extension' in resources.nbextensions -%}
                            'jupyter-vuetify': 'nbextensions/jupyter-vuetify/nodeps',
                        {% endif -%}
                    },
                }
            });
        requirejs([
            {% for ext in resources.nbextensions if ext != 'jupyter-vuetify/extension' and ext != 'jupyter-vue/extension' -%}
                "{{resources.base_url}}static/nbextensions/{{ ext }}.js",
            {% endfor %}
        ]);

        window.solaraInitialized = solaraInit()
        {% if not for_pyodide %}
        solaraMount("{{model_id}}")
        {% endif %}

    </script>

</html>
