{% extends "otree/Page.html" %}
{% load otree static %}

{% block content %}
<div class="IntroContent" id="IntroContent">

  <!-- previous button -->
  <div class="prevDiv">
    <a id="leftArrow" class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <p id="prevKey" class="prev-key"> <b>or press 'A'</b> </p>
  </div>
  <!-- Slides  -->
  <div class="mySlides">
    {% for slide in Slides %}
      <div class="slide-item" id="slide-{% forloop.counter0 %}">
        <!-- Title -->
          <h1 id="title-{% forloop.counter0 %}"> {{ slide.Title }} </h1>
        <!-- context -->
        <div class="ContentContainer"> 
          {{ include slide.path }}
        </div>
      </div>
    {% endfor %}
  </div>
  <!-- Next Button -->
  <div class="nextDiv"> 
    <a id="rightArrow" class="next" onclick="plusSlides(1)">&#10095;</a>
    <p id="nextKey" class="next-key"> <b>or press 'D' </b></p>
  </div>
</div>

<!-- Dot buttons below -->
<div class="dot_row">
  {% for slide in Slides %}
    <span class="dot" onclick="currentSlide(forloop.counter0)"></span>
  {% endfor %}
</div>

<button id="submit" style="display: none;"></button>
<input type="hidden" id="sSlideSequence" name="sSlideSequence" val="">
<input type="hidden" id="sSlideTime" name="sSlideTime" val="">

{% endblock %}

{% block scripts %}
  <script src="{% static 'global/js/Sliders.js' %}"></script>

{% endblock %}

{% block styles %}
  <link rel="stylesheet" href="{% static 'global/css/Sliders.css' %}">
{% endblock %}