{% raw -%}
<div id="web-app" style="display: none">
    <v-app :key="forceUpdateTrigger">
        <v-slide-y-transition>
            <v-layout v-show="loading" align-center justify-center>
                <v-card style="min-width: 600px">
                    <v-progress-linear
                            :indeterminate="loadingPercentage < 0"
                            v-model="loadingPercentage"
                            height="15"
                    ></v-progress-linear>

                    <v-card-title primary-title class="py-8">
                        <h1>{{ loading_text }}</h1>
                    </v-card-title>
                </v-card>
            </v-layout>
        </v-slide-y-transition>
        <v-slide-y-transition>
            <template v-show="!loading">
                    <jupyter-widget-mount-point style="max-height: 100vh" mount-id="content">
                    </jupyter-widget-mount-point>
            </template>
        </v-slide-y-transition>
        <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.join('\n')" 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-app>
</div>

<script>

var app = new Vue({
    vuetify: new Vuetify({
        icons: {
            iconfont: 'md',
        },
    }),
    el: '#web-app',
    created() {
        const original_$forceUpdate = this.$forceUpdate.bind(this);
        this.$forceUpdate = (() => {
            this.forceUpdateTrigger += 1;
            original_$forceUpdate();
        });
    },
    mounted() {
        document.querySelector('#web-app').removeAttribute("style");
        this.$vuetify.theme.dark = !!document.querySelector('body.theme-dark');
    },
    data() {
        return {
            forceUpdateTrigger: 0,
            loading_text: "Loading page",
            loadingPercentage: -1,
            loading: true,
            debug: false,
            voilaDebugMessages: [],
        }
    }
});

</script>
{% endraw -%}