{% extends "layout.html" %}
{% set active_page = "exploritory" %}
{% block title %}exploritory{% endblock %}
{% block head %}
  {{ super() }}
    <link rel='stylesheet' type='text/css' href='static/css/wsw_notebook.css'>
    <link rel='stylesheet' type='text/css' href='static/css/custom.css'>
    

{% endblock %}

{% block body %}
    {{ super ()}}
        <div id="bottom-image" style='min-height: 1200px'>
        <div id="middle-image" style='min-height: 1200px'>
        <div id="top-image" style='min-height: 1200px'>
        <div class='notebook-container' style='float:center; max-width: 800px; margin-left:auto; margin-right:auto; background-color:white; color:black; padding:10px;' >
            
            <div id='buttons' style='color:black'></div>
            {{ body | safe }}
            <div id="disqus_thread"></div>
        </div>
        </div>
        </div>
        </div>
    <script>

var button_html = '<button id="output-html-btn">toggle data tables</button> <button id="show-code-btn">toggle code</button>'

$('#buttons').html(button_html)
$('.prompt').hide()
$('.output_html').hide()
$('.input_area').hide()
$('#output-html-btn').click(function (){
    $('.output_html').toggle()
});

$('#show-code-btn').click(function (event){
    $('.input_area').toggle()
});
    </script>
{% endblock %}