<!doctype html>
<html>

<head>
    <base href="{{base_url}}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
{% block header %}
    {% if production %}
    <script src="_solara/cdn/@widgetti/solara-vuetify-app@2.1.0/dist/solara-vuetify-app.min.js"></script>
    <script src="_solara/cdn/mermaid@9.1.7/dist/mermaid.min.js"></script>
    {% else %}
    <script src="_solara/cdn/@widgetti/solara-vuetify-app@2.1.0/dist/solara-vuetify-app.js"></script>
    <script src="_solara/cdn/mermaid@9.1.7/dist/mermaid.js"></script>
    {% endif %}

    <link rel="icon" type="image/png" sizes="any" href="static/assets/favicon.png">
    <link rel="icon" type="image/svg+xml" href="static/assets/favicon.svg">

    <link href="static/highlight.css" rel="stylesheet">
    <link href="static/highlight-dark.css" rel="stylesheet">
    </link>
    <link href="static/assets/style.css" rel="stylesheet">
    </link>
    <link href="static/nbconvert/index.css" rel="stylesheet">
    </link>
    {% if theme.variant == "light" %}
    <link href="static/nbconvert/theme-light.css" rel="stylesheet">
    </link>
    {% elif theme.variant == "dark" %}
    <link href="static/nbconvert/theme-dark.css" rel="stylesheet">
    </link>
    {% endif %}
    <link href="static/assets/custom.css" rel="stylesheet">
    </link>
    <script src="static/assets/custom.js"></script>
    <script src="static/assets/theme.js"></script>
    <title>Hello from Solara ☀️</title>

    <script src="_solara/cdn/requirejs@2.3.6/require.js" crossorigin="anonymous">
    </script>
    <script src="static/main-vuetify.js"></script>
    <script src="static/ansi.js"></script>
    </script>
    <script>
        solara.production = {{ production |tojson|safe }};
        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>
{% endblock header %}
</head>

<body>
{% raw -%}
    <div id="app" style="display: none">
        <v-app :key="forceUpdateTrigger">
          <v-progress-linear
                :style="{visibility: kernelBusy ? 'visible' : 'hidden'}"
                indeterminate
                absolute
            ></v-progress-linear>
            <v-alert v-if="needsRefresh || cancelAutoRefresh" type="warning" border="left" style="position: absolute; right: 0px; z-index: 100; left: 0px;">
            App is disconnected, and may not function properly. Please refresh the page.
        </v-alert>
{% endraw -%}
            {# {% include "transition-domino.html" %} #}
            {% include "loader-" ~ theme.loader ~ ".html" %}
            <v-overlay :value="(connectionStatus != 'connected') & wasConnected">
                <v-progress-circular
                    indeterminate
                    size="128"
                    style="text-align: center;"
                >Server disconnected.</v-progress-circular>
            </v-overlay>

            <v-dialog v-model="needsRefresh" width="500">
                <v-card>
                    <v-card-title class="text-h5 grey lighten-2">Please refresh the page</v-card-title>

                    {% if production %}
                    <v-card-text>
                        Could not restore session. Please refresh.
                    </v-card-text>
                    {% else %}
                    <v-card-text>
                        {% raw -%}
                        Could not restore session. Will refresh in {{autoRefreshCount}} seconds.
                        {% endraw -%}
                    </v-card-text>
                    {% endif %}

                    <v-divider></v-divider>

                    <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="secondary"
                        text
                        @click="reload()"
                    >
                        Refresh now
                    </v-btn>
                    <v-btn
                        color="primary"
                        text
                        @click="setCancelAutoRefresh()"
                    >
                        Cancel
                    </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
{% raw -%}

            <v-menu v-if="debug && solaraDebugMessages && solaraDebugMessages.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">{{ solaraDebugMessages.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 solaraDebugMessages" :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="solaraDebugMessages = []">
                                    <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" :color="connectionStatus != 'connected' ? 'red' : ''">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(),
                    themes: vuetifyThemes,
                },
            }),
            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))
                },
                setCancelAutoRefresh() {
                    this.needsRefresh = false;
                    this.cancelAutoRefresh = true;
                },
                reload() {
                    location.reload();
                },
            },
            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))
                    }
                }
            },
            watch: {
                needsRefresh: function(value) {
                    if(this.needsRefresh && !this.cancelAutoRefresh && !solara.production) {
                        console.log('value for needRefresh', value);
                        setTimeout(() => {
                            console.log('this.autoRefreshCount', this.autoRefreshCount)
                            this.autoRefreshCount = this.autoRefreshCount - 1;
                        }, 1000);
                    }
                },
                autoRefreshCount: function(value) {
                    console.log('value for autoRefreshCount', value);
                    if(value == 0) {
                        if(!this.cancelAutoRefresh)
                            this.reload();
                    } else if(value > 0) {
                        setTimeout(() => {
                            console.log('this.autoRefreshCount!', this.autoRefreshCount)
                            this.autoRefreshCount = this.autoRefreshCount - 1;
                        }, 1000);
                    }
                }
            },
            data() {
                return {
                    forceUpdateTrigger: 0,
                    loading_text: "Loading resources",
                    loadingPercentage: -1,
                    loading: true,
                    title: "No title",
                    solaraDebugMessages: [],
                    outputMessages: [],
                    theme: theme,
                    debug: debug,
                    connectionStatus: null,
                    wasConnected: false,
                    needsRefresh: false,
                    cancelAutoRefresh: false,
                    autoRefreshCount: 3,
                    kernelBusy: false,
                    // 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 %}
        ]);
        (async function() {
            await Promise.all([
                solaraInit('solara-main')
            ]);
        })();

    </script>

</html>
