<div class="reveal" id="reveal">
	<div class="slides">
		{% for ch in page.chapters %}
			<!--Capture the chapter index value-->
			{% assign chapterIndex = forloop.index0 %}

			<!--Nest all chapter's content. Chapters traverse left-right; Sections slide up-down-->
			<section>
				{% for section in site.tags[ch] reversed %}
					<!--Capture the slide index value-->
					{% assign slideIndex = forloop.index0 %}

					<!--Chapter Auto-Injection-->
					{% if forloop.first %}
						{% if section.cover != false %}
							{% include hydeslides/revealjs/slide-open-chapter %}
								<h1>{{ section.chapter }}</h1>
							{% include hydeslides/revealjs/slide-close %}
						{% endif %}
					{% endif %}

					{% include hydeslides/revealjs/slide-open %}
						<h1 {% if section.heading == false %}class="hidden"{% endif %}>{{ section.chapter }}</h1>
						<h2 {% if section.heading == false %}class="hidden"{% endif %}>{{ section.title }}</h2>
						<div class="clear-all"></div>

						{% if section.diagram_svg_path %}
							{% if section.cover != false %}
								{% capture slideIndex %}{{ slideIndex | plus: 1 }}{% endcapture %}
							{% endif %}
							<svg version="1.1"
								width="100%"
								height="100%"
								data-path="{{ section.diagram_svg_path }}"
								id="canvas-{{ chapterIndex }}-{{ slideIndex }}"
								preserveAspectRatio="xMidyMid"
								viewBox="0 0 100 100"></svg>
						{% endif %}

						{{ section.content }}

					{% include hydeslides/revealjs/slide-close %}
				{% endfor %}
			</section>
		{% endfor %}
	</div>
</div>
