---
layout: default
lang: pt
---

		<main>
			<div class="page-aula">
				<div class="detals-aula">
					<div class="info-aula">
						<h1 class="title">{{ page.title }}</h1>
						<h2 class="aula-name">{{ page.software }} - {{ page.level }}</h2>

						<h3 class="aula-name">{{ page.author }}</h3>
						<h3 class="aula-name">{{ page.date | date: "%d/%m/%Y" }}</h3>
					</div>

					<div class="download">
						{% assign aula_name = page.name | replace: '.md', '' %}
						{% assign zip_file = 'aulas/' | append:  aula_name | append: '.zip' %}
							<a class="button" href="{{ site.baseurl }}{{ zip_file }}" download>
								Download
							</a>
							<a class="button" id="etherpad" etherpad>
								Etherpad
							</a>
					</div>
				</div>
			</div>
								 
			<div id="aula">
				{% assign aula_slug = page.title %}
				{% assign video_aula = '' | append: aula_slug | append: '.mp4' %}
				<video controls class="aula-video">
					<source src="{{ site.baseurl }}/videos/{{ page.user }}/dest/{{ video_aula }}" type="video/mp4">
					Seu navegador não suporta o elemento de vídeo.
				</video>
			</div>

			<div id="etherpad-container" style="display: none;">
				<iframe 
				  id="etherpad-iframe" 
				  src="https://pad.alice.ufsj.edu.br/p/{{ page.title }}" 
				  width="100%" 
				  height="900px" 
				  frameborder="0">
				</iframe>
			  </div>
			  

			<div class="content-aula">
				{{ page.description }}
				</br>
				</br>
				<h2>Links relacionados:</h2>
				{% for link in page.links %}
					<li><a href="{{ link }}">{{ link }}</a></li>
				{% endfor %}
			</div>
		</main>

		<!--  -->
		<script>
			document.addEventListener("DOMContentLoaded", function () {
			  const etherpadButton = document.getElementById("etherpad"); // Botão
			  const aulaDiv = document.getElementById("aula"); // Div da aula
			  const etherpadContainer = document.getElementById("etherpad-container"); // Div do Etherpad
		  
			  etherpadButton.addEventListener("click", function () {
				if (aulaDiv.style.display === "none") {
				  // Se a aula estiver oculta, exibe a aula e oculta o Etherpad
				  aulaDiv.style.display = "block";
				  etherpadContainer.style.display = "none";
				} else {
				  // Caso contrário, oculta a aula e exibe o Etherpad
				  aulaDiv.style.display = "none";
				  etherpadContainer.style.display = "block";
				}
			  });
			});
		</script>