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

{{ block title }}
Instructions
{{ endblock }}

{{ block content }}

{{ if session.config.dev_mode }}
<button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

{{ if participant.domain == 'tasks' }}

<div class="page" id="page1">
  
  {{ include C.READ_ALL}}

  <p>
    When you are ready, click "Next" to begin.
  </p>
  
  <button type="button" id="nextBtn1" class="btn btn-primary" style="float: right;">Next</button> 

</div>

<div class="page" id="page2">

  {{ include C.TWO_PARTS }}

  <p>
    Click "Next" to learn more about Part 1.
  </p>

  <button type="button" id="backBtn2" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn2" class="btn btn-primary" style="float: right;">Next</button>  

</div>

<div class="page" id="page3">

  {{ include C.PAYMENT }}

  <button type="button" id="backBtn3" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn3" class="btn btn-primary" style="float: right;">Next</button>  

</div>

<div class="page" id="page4">

  {{ include C.COLLABORATIVE_JOB }}

  <button type="button" id="backBtn4" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn4" class="btn btn-primary" style="float: right;">Next</button>    

</div>

<div class="page" id="page5">

  {{ include C.TASK_GENERAL }}

  <button type="button" id="backBtn5" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn5" class="btn btn-primary" style="float: right;">Next</button> 

</div>

{{ if participant.valence == 'bonus' }}

<div class="page" id="page6">

  {{ include C.BONUS }}

  <button type="button" id="backBtn6" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn6" class="btn btn-primary" style="float: right;">Next</button> 

</div>

<div class="page" id="page7">
    
  {{ include C.PENALTY }}

  <button type="button" id="backBtn7" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn7" class="btn btn-primary" style="float: right;">Next</button> 

</div>

{{ else }}

<div class="page" id="page6">

  {{ include C.PENALTY }}
  
  <button type="button" id="backBtn6" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn6" class="btn btn-primary" style="float: right;">Next</button>

</div>

<div class="page" id="page7">
  
  {{ include C.BONUS }}

  <button type="button" id="backBtn7" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn7" class="btn btn-primary" style="float: right;">Next</button> 

</div>

{{ endif }}

<div class="page" id="page8">
    
  {{ include C.SUMMARY }}

  <button type="button" id="backBtn8" class="btn btn-primary" style="float: left;">Back</button>
  <button type="button" id="nextBtn8" class="btn btn-primary" style="float: right;">Next</button> 

</div>


<div class="page" id="page9">
    
  <p>
    On the next page, we will ask you a few questions about the instructions to make sure everything is clear to you. If you need to review any part of the instructions, please return to that part before proceeding.
  </p>

  <p>
    When you are ready to answer our understanding questions, click "Next."
  </p>

  <button type="button" id="backBtn9" class="btn btn-primary" style="float: left;">Back</button>
  <button id="nextBtn9" class="btn btn-primary" style="float: right;">Next</button> 

</div>






{{ elif participant.domain == 'states' }}
 
<p>
    Instructions for states.
</p>

{{ elif participant.domain == 'time_periods' }}

<p>
    Instructions for time periods.
</p>

{{ endif }}

{% endblock %}

{% block styles %}

{% endblock %}

{% block scripts %}

<script>
  const pages = document.querySelectorAll('.page');
  const nextBtns = document.querySelectorAll('[id^="nextBtn"]');
  const backBtns = document.querySelectorAll('[id^="backBtn"]');
  
  let currentPageIndex = 0;
  
  function showPage(index) {
    pages.forEach(page => page.style.display = 'none');
    pages[index].style.display = 'block';
  
    if (index === 0) {
      backBtns.forEach(btn => btn.style.display = 'none');
    } else {
      backBtns.forEach(btn => btn.style.display = 'inline-block');
    }
  }
   
  nextBtns.forEach((btn, index) => {
    btn.addEventListener('click', () => {
      currentPageIndex = Math.min(currentPageIndex + 1, pages.length - 1);
      showPage(currentPageIndex);
    });

  });
  
  backBtns.forEach((btn, index) => {
    btn.addEventListener('click', () => {
      currentPageIndex = Math.max(currentPageIndex - 1, 0);
      showPage(currentPageIndex);
    });
  });
  
  showPage(currentPageIndex);
</script>

{% endblock %}