<head>
<title>Thebe</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

<script type="text/javaScript">
	window.MathJax = {
    tex2jax: {
      inlineMath: [ ['$','$'], ["\[","\]"], ["\\(","\\)"] ],
       displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
       processEnvironments: true,
      processEscapes: true
    },
                MathML: {
                    extensions: ['content-mathml.js']
                },
                // Center justify equations in code and markdown cells. Elsewhere
                // we use CSS to left justify single line equations in code cells.
                displayAlign: 'center',
                "HTML-CSS": {
                    availableFonts: [],
                    imageFont: null,
                    preferredFont: null,
                    webFont: "STIX-Web",
                    styles: {'.MathJax_Display': {"margin": 0}},
                    linebreaks: { automatic: true }
                },
  };
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full,Safe">
</script>
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='highlight/styles/default.css') }}"> -->
<!-- <script src="{{ url_for('static', filename='highlight/highlight.pack.js') }}"></script> -->
<script type="text/javascript" src="{{ url_for('static', filename='socket.io.slim.js') }}"></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles.css') }}">
<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--	<script type="text/javascript" src="{{ url_for('static', filename='vue.min.js') }}"></script>-->
<style> {{css}} </style>
</head>
<body>
<div id="app">
<header>
<div id = "logo">
	Thebe
	<img class = 'icon' src = "{{ url_for('static', filename='favicon.ico') }}">
</div>
<button v-on:click = 'runAll' title = "Run all cells">&#x267A;</button>
<transition-group name = "messages" tag = "div">
	<div v-for = "(message, index) in messages" v-bind:key = "index">
	<div class = "message" v-if = "index == messages.length-1">
		[[ message ]]
	</div>
	</div>
</transition-group>
</header>
<div class="cells">
<div class="cell" v-for="(cell, index) in cells">
	<div class="top">
		<div class = "top-attribute" v-if = "cell.cell_type === 'code'">
			<button v-on:click = 'run_cell(index)' title = "Run cell">&#9654;</button>
			&nbsp;
			[[ cell.execution_count ]]
			&nbsp;
			[[ cell.last_changed ]]
			&nbsp;
			<div class = "loader" v-if = "index == loading"></div>
		</div>
		<div class = "top-attribute" v-if = "cell.cell_type === 'markdown'">
			Markdown
		</div>
		<div class = "top-attribute">
			[[ index ]]
		</div>
	</div>
	<div class="maincode">
		<div v-for="source in cell.source" v-html="source" v-if="cell.cell_type === 'code'"></div>
		<div v-html="cell.source" v-if="cell.cell_type === 'markdown'"></div>
	</div>
	<transition name = "bottom">
	<div class="bottom" v-if = "cell.cell_type === 'code' && cell.outputs.length > 0">
		<div class="outputs">
			<div class="output" v-for="output in cell.outputs">
				<div class="stdout" v-if="output.output_type === 'execute_result'">
					<div v-for="data in output['data']['text/plain']" v-html="data"></div>
				</div>
				<div class="stderr" v-if="output.output_type === 'error'">
					Standard Error:<br>
					<div v-for="data in output['evalue']" v-html="data"></div>
				</div>
				<div v-if="output.output_type === 'display_data'">
					<img class="plot" v-bind:src="'data:image/png;base64, ' + output['data']['image/png']" />
				</div>
			</div>
		</div>
		</div>
	</div>
</div>
</div>
</div>
</body>
