<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Try pandoc!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
       <![endif]-->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script>
"use strict";
(function($) { // https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values
	$.QueryString = (function(a) {
	    if (a == "") return {};
	    var b = {};
	    for (var i = 0; i < a.length; ++i)
	    {
		var p=a[i].split('=');
		if (p.length != 2) continue;
		b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
	    }
	    return b;
        })(window.location.search.substr(1).split('&'))
})(jQuery);

function newpage() {
  var input = $("#text").val();
  var from = $("#from").val();
  var to = $("#to").val();
  var standalone = $("#standalone").is(':checked') ? "1" : "0";
  var href = window.location.href;
  window.location.href = href.replace(/([?].*)?$/,"?" + $.param({text: input, from: from, to: to, standalone: standalone}));
};

$(document).ready(function() {
    var text = $.QueryString["text"];
    $("#text").val(text);
    var from = $.QueryString["from"] || "markdown";
    $("#from").val(from);
    var to = $.QueryString["to"] || "html";
    $("#to").val(to);
    var standalone = ($.QueryString["standalone"] === "1") ? "1" : "0";
    $("#standalone").prop('checked', (standalone === "1"));
    if (text && text != "") {
       $.getJSON("/cgi-bin/trypandoc", { from: from, to: to, text: text, standalone: standalone },
         function(res) {
          $("#results").text(res.html);
          $("#version").text(res.version);
          var commandString = "pandoc"
            + ((standalone === "1") ? " --standalone" : "")
            + " --from " + from + " --to " + to;
          $("#command").text(commandString);
         });
    };
    $("#convert").click(newpage);
    $("#from").change(newpage);
    $("#to").change(newpage);
});
  </script>
  <style>
    h1 { margin-bottom: 1em; }
    body { margin: auto; }
    textarea { height: auto; width: 100%; font-family: monospace; margin-top: 15px; }
    div.alert { margin: 1em; }
    h3 { margin-top: 0; margin-bottom: 0; padding: 0; font-size: 100%; }
    pre#results { width: 100%; margin-top: 15px; }
    footer { color: #555; text-align: center; margin: 1em; }
    p.version { color: #555; }
    button#convert { vertical-align: bottom; }
    pre#command { margin-top: 1em; background-color: transparent; border: none; }
  </style>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <h1>Try pandoc!</h1>
    </div>
    <div class="col-md-6">
      <pre id="command"></pre>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <button class="btn btn-primary btn-xs" id="convert">Convert</button>
      &nbsp;
      <label for="from">
      from
      </label>
      <select id="from">
        <option value="commonmark">CommonMark</option>
        <option value="creole">Creole</option>
        <option value="docbook">DocBook</option>
        <option value="dokuwiki">DokuWiki</option>
        <option value="fb2">FB2</option>
        <option value="haddock">Haddock markup</option>
        <option value="html">HTML</option>
        <option value="jats">JATS</option>
        <option value="jira">Jira</option>
        <option value="ipynb">Jupyter Notebook (ipynb)</option>
        <option value="latex">LaTeX</option>
        <option value="man">Man</option>
        <option value="markdown" selected>Markdown (pandoc)</option>
        <option value="gfm">Markdown (GitHub-flavored)</option>
        <option value="markdown_phpextra">Markdown (PHP Markdown Extra)</option>
        <option value="markdown_strict">Markdown (strict)</option>
        <option value="mediawiki">MediaWiki</option>
        <option value="markdown_mmd">MultiMarkdown</option>
        <option value="muse">Muse</option>
        <option value="native">Native (Pandoc AST)</option>
        <option value="opml">OPML</option>
        <option value="org">Org Mode</option>
        <option value="rst">reStructuredText</option>
        <option value="t2t">Txt2Tags</option>
        <option value="textile">Textile</option>
        <option value="tikiwiki">TikiWiki</option>
        <option value="twiki">TWiki</option>
        <option value="vimwiki">Vimwiki</option>
      </select>
      <input type="checkbox" id="standalone" name="standalone">
      <label for="standalone">Generate standalone document
        <a href="https://pandoc.org/MANUAL.html#option--standalone" target="_blank">(?)</a>
      </label>
      <br/>
      <textarea id="text" maxlength="3000" rows="15"></textarea>
    </div>
    <div class="col-md-6">
      <label for="to">
      to
      </label>
      <select id="to">
        <option value="S5">S5</option>
        <option value="asciidoc">AsciiDoc (original)</option>
        <option value="asciidoctor">AsciiDoc (asciidoctor-flavored)</option>
        <option value="beamer">LaTeX Beamer</option>
        <option value="commonmark">CommonMark</option>
        <option value="context">ConTeXt</option>
        <option value="docbook4">DocBook v4</option>
        <option value="docbook5">DocBook v5</option>
        <option value="dokuwiki">DokuWiki</option>
        <option value="dzslides">DZSlides</option>
        <option value="haddock">Haddock markup</option>
        <option value="html4">HTML 4</option>
        <option value="html5" selected>HTML 5</option>
        <option value="icml">ICML</option>
        <option value="jats">JATS</option>
        <option value="jira">Jira</option>
        <option value="json">JSON</option>
        <option value="ipynb">Jupyter Notebook (ipynb)</option>
        <option value="latex">LaTeX</option>
        <option value="man">Man</option>
        <option value="ms">Ms</option>
        <option value="markdown">Markdown (pandoc)</option>
        <option value="gfm">Markdown (GitHub-flavored)</option>
        <option value="markdown_phpextra">Markdown (PHP Markdown Extra)</option>
        <option value="markdown_strict">Markdown (strict)</option>
        <option value="mediawiki">MediaWiki</option>
        <option value="markdown_mmd">MultiMarkdown</option>
        <option value="muse">Muse</option>
        <option value="native">Native (Pandoc AST)</option>
        <option value="opendocument">OpenDocument</option>
        <option value="opml">OPML</option>
        <option value="org">Org Mode</option>
        <option value="plain">Plain text</option>
        <option value="revealjs">reveal.js</option>
        <option value="rst">reStructuredText</option>
        <option value="rtf">RTF</option>
        <option value="slideous">Slideous</option>
        <option value="slidy">Slidy</option>
        <option value="tei">TEI</option>
        <option value="texinfo">Texinfo</option>
        <option value="textile">Textile</option>
        <option value="zimwiki">ZimWiki</option>
      </select>
      <br/>
      <pre id="results"></pre>
    </div>
  </div>
</div>
<footer>
 <p class="version">pandoc <span id="version"></span></p>
 <p><a href="https://pandoc.org">https://pandoc.org</a></p>
</footer>
</body>
</html>