<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../_assets/reveal.js/dist/reveal.css">
    <link rel="stylesheet" href="../_assets/reveal.js/css/print/pdf.css" media="print">
    <link rel="stylesheet" href="{{ theme }}">
    <link rel="stylesheet" href="../_assets/highlight.js/solarized-dark.css">
    <script>
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match(/print-pdf/gi) ? '../_assets/reveal.js/css/print/pdf.css' : '../_assets/reveal.js/css/print/paper.css';
      document.getElementsByTagName('head')[0].appendChild(link);
    </script>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        {{ content }}
      </div>
    </div>
    <script type="module">
      import Reveal from '../_assets/reveal.js/dist/reveal.esm.js'
      import Highlight from '../_assets/reveal.js/plugin/highlight/highlight.esm.js'
      import Zoom from '../_assets/reveal.js/plugin/zoom/zoom.esm.js'
      import Notes from '../_assets/reveal.js/plugin/notes/notes.esm.js'

      Reveal.initialize({
        controls: {{ controls | lower }},
        progress: {{ progress | lower }},
        history: {{ history | lower }},
        center: {{ center | lower }},
        controlsTutorial: false,

        showNotes: {{ show_notes | lower }},

        width: {{ width }},
        height: {{ height }},

        transition: '{{ transition }}',
        backgroundTransition: '{{ background_transition }}',

        plugins: [ Highlight, Zoom, Notes ],
      });
    </script>
  </body>
</html>
