{% raw -%}
<div id="app" style="display: none">
    <v-app>
        <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>
            <v-layout v-show="!loading">
                <v-navigation-drawer v-model="showNavBar" app>
                    <v-toolbar flat>
                        <v-list>
                            <v-list-item>
                                <v-list-item-title class="title">
                                    <jupyter-widget-mount-point mount-id="content-title">
                                        Model Parameter
                                    </jupyter-widget-mount-point>
                                </v-list-item-title>
                            </v-list-item>
                        </v-list>
                    </v-toolbar>

                    <v-divider></v-divider>
                    <jupyter-widget-mount-point mount-id="content-nav">
                        <v-container>
                            Placeholder for widget with mount id <i>content-nav</i>.
                        </v-container>
                        <v-list dense class="pt-0">
                            <v-list-item v-for="item in items" :key="item.title" :href="item.url"
                                         target="_blank">
                                <v-list-item-action>
                                    <v-icon>{{ item.icon }}</v-icon>
                                </v-list-item-action>

                                <v-list-item-content>
                                    <v-list-item-title>{{ item.title }}</v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list>
                    </jupyter-widget-mount-point>
                </v-navigation-drawer>
                <v-app-bar app>
                    <v-app-bar-nav-icon
                        v-if="!showNavBar"
                        @click.stop="showNavBar = !showNavBar">
                    </v-app-bar-nav-icon>
                    <jupyter-widget-mount-point mount-id="content-bar">
                        <v-toolbar-title>Bistable Organic Electrochemical Transistors</v-toolbar-title>
                    </jupyter-widget-mount-point>
                </v-app-bar>

                <v-content>
                    <jupyter-widget-mount-point mount-id="content-main">
                            <v-container>
                                    Placeholder for widget with mount id <i>content-main</i>.
                            </v-container>
                    </jupyter-widget-mount-point>
                </v-content>
            </v-layout>
        </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-divider></v-divider>

        <v-footer fixed padless>
            <v-card flat tile class="flex text-center">
                <v-card-text class="caption">
                    © {{ new Date().getFullYear() }} Lukas Bongartz
                </v-card-text>
            </v-card>
        </v-footer>
    </v-app>
</div>

<script>

var app = new Vue({
    vuetify: new Vuetify({
       theme: { dark: themeIsdark },
    }),
    el: '#app',
    mounted() {
        document.querySelector('#app').removeAttribute("style");
    },
    data() {
        return {
            loading_text: "Loading page",
            loadingPercentage: -1,
            showNavBar: null,
            loading: true,
            right: null,
            url: 'https://www.w3schools.com/',
            items: [
                {icon: "dashboard", title: "voila", url: "https://github.com/voila-dashboards/voila"},
                {icon: "touch_app", title: "voila-vuetify", url: "https://github.com/voila-dashboards/voila-vuetify"},
                {icon: "web", title: "ipvuetify", url: "https://github.com/mariobuikhuizen/ipyvuetify"},
                {icon: "web", title: "vuetify", url: "https://v15.vuetifyjs.com/en/"},
                {icon: "widgets", title: "jupyter widgets", url: "https://github.com/jupyter-widgets/ipywidgets"},
                {icon: "bar_chart", title: "bqplot", url: "https://github.com/bloomberg/bqplot/"},
            ],
            title: 'Bistable OECTs',
            debug: false,
            voilaDebugMessages: [],
        }
    }
});

</script>
{% endraw -%}
