<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>{{ title }}</title>

		<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
		<link rel="stylesheet" href="{{ url_for('static', filename='reveal/dist/reset.css') }}" />
		<link rel="stylesheet" href="{{ url_for('static', filename='reveal/dist/reveal.css') }}" />
		<link id="theme" rel="stylesheet" href="{{ url_for('static', filename='reveal/dist/theme/white.css') }}" />
		<link id="nav-theme" rel="stylesheet" href="{{ url_for('static', filename='css/nav/white.css') }}" />
                <link rel="stylesheet" href=
                    "https://use.fontawesome.com/releases/v5.6.3/css/all.css"
                    integrity=
                        "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
                        crossorigin="anonymous">


		<!-- Theme used for syntax highlighted code -->
		<!-- link rel="stylesheet" href="{{ url_for('static', filename='reveal/plugin/highlight/monokai.css') }}" -->
	</head>
	<body>
                <div id="custom-nav">
                  <!-- the zero-width-space is a tweak against tidy removing empty tags -->
                  <a href="#/" title="Home"><i class="fa fa-home">​</i></a>
                  <a id="top-link" title="Section top" disabled="disabled"><i class="fa fa-angle-double-up">​</i></a>
                  <a href="/editor" title="Edit"><i class="fa fa-user-edit">​</i></a>
                </div>
		<div class="reveal">
			<div class="slides">
                          {% for column in columns %}
				<section{% if column.params %}{% for key, value in column.params|dictsort %} data-{{key}}="{{value}}"{% endfor %}{% endif %}>
                                    <section id="{{column.id}}">
                                        {# column's top slide #}
                                        <h3 class="title slide_title">{{column.title}}</h3>
                                        {% if column.content %}{{ column.content|safe }}{% endif %}
                                        {# Main column shows links to other columns #}
                                        {% if loop.first %}
                                            <ul>
                                                {% for other in columns %}
                                                    {% if not loop.first %}<li><a href="#/{{other.id}}">{{other.title}}</a></li>{% endif %}
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                        {# if column has sub-slides, link to them #}
                                        {% if column.slides %}
                                            <ul>
                                                {% for slide in column.slides %}
                                                    <li><a href="#/{{column.id}}_{{slide.id}}">{{slide.title}}</a></li>
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                    </section>
                                    {# show all column's sub-slides #}
                                    {% for slide in column.slides %}
				        <section id="{{column.id}}_{{slide.id}}"{% if slide.params %}{% for key, value in slide.params|dictsort %} data-{{key}}="{{value}}"{% endfor %}{% endif %}>
                                            <p class="title">{{slide.title}}</p>
                                            {% if slide.content %}{{ slide.content|safe }}{% endif %}
				        </section>
                                    {% endfor %}
				</section>
                          {% endfor %}
			</div>
		</div>

		<script src="{{ url_for('static', filename='reveal/dist/reveal.js') }}"></script>
		<script src="{{ url_for('static', filename='reveal/plugin/notes/notes.js') }}"></script>
		<script src="{{ url_for('static', filename='reveal/plugin/markdown/markdown.js') }}"></script>
		<script src="{{ url_for('static', filename='reveal/plugin/highlight/highlight.js') }}"></script>
                <script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script> 
		<script>
			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,
                                // controlsTutorial: false,
                                transition: 'convex',
                                controlsBackArrows: 'visible',  // would hopefully solve the faded-arrow thing
                                // slideNumber: "h.v",
				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
			});
                        $(function() {
                            // force autoplay for bg videos (but why?!?)
                            $('.reveal .slide-background-content video').each((index, element) => element.play());
                            // open external links in new tab
                            $('.reveal a:not([href^="#"])').attr('target','_blank');
                            // extract css classes from img alt
                            $('.reveal img').each((index, element) => {
                                var img = $(element),
                                    altvec = img.attr('alt').split('|');
                                if (altvec.length>1) {
                                    img.attr('alt',altvec[0]).addClass(altvec[1]);
                                }
                            });
                            $('.reveal h1, .reveal h2, .reveal h3').addClass('r-fit-text');
                            var enterSlide = function() {
                                // set theme
                                var the_slide=$(Reveal.getCurrentSlide()),
                                    the_theme=the_slide.data('theme') ||
                                        the_slide.parent().data('theme') || 'sky';
                                $('#theme').attr('href',`static/reveal/dist/theme/${the_theme}.css`);
                                $('#nav-theme').attr('href',`static/css/nav/${the_theme}.css`);
                                // set (or hide) top link
                                var here = Reveal.getIndices();
                                if (here.v) {
                                    $('#top-link').removeAttr('disabled').attr('href', `#/${here.h}`);
                                } else {
                                    $('#top-link').removeAttr('href').attr('disabled', 'disabled');
                                }
                            };
                            enterSlide();
                            Reveal.addEventListener('slidechanged', enterSlide);
                        });
		</script>
	</body>
</html>
