{% extends "layout.html" %}
{% set sidebars = sidebars + ["demo_sidebar.html"] %}

{% block extrahead %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ pathto("_static/demo.css", 1) }}">
<script type="text/javascript">var languagePluginUrl = "{{ pathto("_static/pyodide/", 1) }}";</script>
<script type="text/javascript" src="{{ pathto("_static/pyodide/pyodide.js", 1) }}"></script>
<script type="text/javascript" src="{{ pathto("_static/demo.js", 1) }}"></script>
{% endblock %}

{% block htmltitle %}<title>Demo{{ titlesuffix }}</title>{% endblock %}

{% block body %}
{{ body }}

<h1>Demo - Try it out!</h1>
<p>The highlighting here is performed in-browser using
    a WebAssembly translation of the latest Pygments master branch, courtesy of
    <a href="https://github.com/iodide-project/pyodide">Pyodide</a>.</p>
<p>Your content is neither sent over the web nor stored anywhere.</p>

<div id="try">
    <h2>Enter code and select a language</h2>
    <form>
        <p><span id="aroundlang">
            <label for="lang">Language:</label> &nbsp;<select id="lang" onchange="reset_err_hl()">
                <option value="">&nbsp;&nbsp;Select a lexer&nbsp;&nbsp;</option>
            </select>
	    &nbsp;&nbsp;</span>
            &middot;&nbsp;&nbsp;
            <label for="style">Style:</label> &nbsp;<select id="style">
                <option value="default">default&nbsp;&nbsp;&nbsp;&nbsp;</option>
            </select></p>
        <p><label for="file">Upload a file here:</label> &nbsp;
	    <input type="file" id="file" onchange="new_file()"> &nbsp; or enter code below:</p>
	<p><textarea id="code" rows="1" cols="60"></textarea></p>
	<p style="text-align: right">
            <input type="button" value="Highlight!" onclick="highlight()" id="hlbtn" disabled>
	    &nbsp;&nbsp;&nbsp; <input type="reset" value="Reset"></p>
    </form>
    <div id="loading">
        <p><img src="{{ pathto("_static/spinner.gif", 1) }}" style="vertical-align: middle"></p>
        <p>Loading Python...</p>
    </div>
</div>

<div id="hlcode"></div>

<div id="hlcodedl" style="display: none">
    <input type="text" id="copy_field" style="opacity: 0">
    <input type="button" value="Download" onclick="download_code()">
    &nbsp;&nbsp;&nbsp;
    <input type="button" value="Copy link" onclick="copy_link()" id="copy_btn">
</div>
{% endblock %}