<!doctype html>
<html lang="{{ config.lang }}">
<head>
<meta charset="utf-8">
<title>{{ config.title }}</title>
<meta name="description" content="{{ config.description }}">
<meta name="author" content="{{ config.author }}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" href="{{ uri(config.icon) }}">
<link rel="stylesheet" href="{{ url_for('static', filename="reveal.js/reset.css") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="reveal.js/reveal.css") }}">
<link rel="stylesheet" href="{{ url_for('static', filename="reveal.js/theme/" + config.theme + ".css") }}">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="{{ url_for('static', filename="plugin/highlight/" + config.code_theme + ".css") }}" id="highlight-theme">
</head>
<body>
<style>
{%- if config.footer.src or config.footer.label %}
#footer-left {
    position: absolute;
    bottom: 1em;
    left: 1em;
    font-family: FreeSerif, serif;
}
#footer-left > a > * {
    display: inline-block;
    vertical-align: middle;
    opacity: 0.5;
    font-size: 15pt;
}
{%- endif %}
{%- if config.default_style %}
.reveal figure {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin: 20px;
}
.reveal figure figcaption { text-align: center; }
.img-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1px;
}
.img-column { padding: 1px; }
.reveal h1 { font-size: 36pt; }
.reveal h2 { font-size: 30pt; }
.reveal h3 { font-size: 28pt; }
.reveal h4 { font-size: 24pt; }
.reveal p, .reveal li, .reveal table, figcaption { font-size: 20pt; }
.reveal strong { color: red; }
.reveal pre code, .reveal section img, #footer-left > a > img {
    border: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.reveal code {
    color: white;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    border-color: #3F3F3F;
    background: #3F3F3F;
}
.reveal pre code { border-radius: 10px; }
.reveal .slide-number {
    font-size: 24pt;
    position: absolute;
    right: 2em;
    top: 1em;
    color: #877b68;
    background-color: transparent;
}
{%- endif %}
{{ include(config.extra_style) }}
</style>

{%- macro sized(block) -%}
  src="{{ uri(block.src) }}" {% if block.width -%}
  width="{{ block.width }}"
  {%- endif %} {% if block.height -%}
  height="{{ block.height }}"
  {%- endif -%}
{%- endmacro -%}

{% macro slide(n) -%}
{%- if n.title or n.doc or n.img -%}
<section data-markdown {% if config.watermark %}data-background="{{ uri(config.watermark) }}"{% endif -%}
{% if config.watermark_size %} data-background-size="{{ config.watermark_size }}"{% endif %}>
<textarea data-template>
{% if n.title -%}
# {{ n.title }}

{% if n.is_article %}---{% endif %}
{%- endif %}

{{ n.doc -}}
{% if n.include %}
{{ include(n.include) }}
{%- endif -%}
{% if n.math -%}
<div {% if n.fragment.math -%} class="fragment {{ n.fragment.math }}"{% endif %}>
<script type="math/tex; mode=display">{{ n.math }}</script>
<div>
{%- endif %}
{% if n.img -%}
<div class="img-row">
{% for img in n.img -%}
{% if img.src -%}
<div class="img-column">
<figure {% if n.fragment.img -%} class="fragment {{ n.fragment.img }}"{% endif %}>
<img {{ sized(img) }}/>
{% if img.label -%}
<figcaption>{{ img.label }}</figcaption>
{%- endif %}
</figure>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
{% if n.embed.src -%}
<div {% if n.fragment.embed -%} class="fragment {{ n.fragment.embed }}"{% endif %} style="position: relative">
<embed class="stretch" {{ sized(n.embed) }}/>
</div>
{%- endif -%}
{% if n.youtube.src -%}
<iframe {% if n.fragment.youtube -%} class="fragment {{ n.fragment.youtube }}"{% endif %} {{ sized(n.youtube) }} allowfullscreen></iframe>
{%- endif -%}
</textarea></section>
{%- endif %}
{%- endmacro -%}

{% if config.footer.label or config.footer.src -%}
<div id="hidden" style="display: none">
<div id="footer">
<div id="footer-left">
{% if config.footer.link %}<a href="{{ config.footer.link }}">{% endif -%}
{% if config.footer.src %}<img {{ sized(config.footer) }}/>{% endif %}<span>&nbsp;{{ config.footer.label }}</span>
{%- if config.footer.link %}</a>{% endif %}
</div>
</div>
</div>
{%- endif %}

<div class="reveal">
<div class="slides">
{% for n in config.nav -%}
<section>
{{ slide(n) }}
{% for sn in n.sub %}{{ slide(sn) }}{% endfor %}
</section>
{% endfor %}
</div>
</div>
<script src="{{ url_for('static', filename="reveal.js/reveal.js") }}"></script>
{% for name, enabled in config.plugin.as_dict() -%}
{% if enabled %}<script src="{{ url_for('static', filename="plugin/" + name + "/" + name + ".js") }}"></script>{% endif %}
{%- endfor %}
<script>
    Reveal.initialize({
        navigationMode: '{{ config.nav_mode }}',
        controls: {{ config.show_arrows | lower }},
        center: {{ config.center | lower }},
        loop: {{ config.loop | lower }},
        hash: true,
        history: {{ config.history | lower }},
        slideNumber: '{{ config.slide_num }}',
        progress: {{ config.progress | lower }},
        mouseWheel: {{ config.mouse_wheel | lower }},
        previewLinks: {{ config.preview_links | lower }},
        transition: '{{ config.transition }}',
        <!-- Import order must be fixed! -->
        plugins: [
            {%- for name, enabled in config.plugin.as_dict() -%}
                {% if enabled %}Reveal{{ name | capitalize }}{% if not loop.last %},{% endif %}{% endif %}
            {%- endfor -%}
        ],
        markdown: {smartypants: true},
    });
</script>
<script src="{{ url_for('static', filename="js/jquery.min.js") }}"></script>
<script>
    $(document).ready(() => {
        {% if config.footer.label or config.footer.src -%}
        let footer = $('#footer').html();
        if (window.location.search.match(/print-pdf/gi))
            Reveal.addEventListener('ready', _ => {
                $('.slide-background').append(footer);
            });
        else
            $('div.reveal').append(footer);
        {%- endif %}
        // Open external links in new windows or tabs
        $('a').filter('[href^="http"], [href^="//"]')
              .not('[href*="' + window.location.host + '"]')
              .attr('rel', "noopener noreferrer")
              .attr('target', '_blank');
    });
</script>
</body>
</html>
