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

{% block title %}
    Round #
{% endblock %}

{% block styles %}
    <style>
    body{
       text-align: center;
       align-items: center;
       justify-content: center;
    }

    .otree-title.page-header{
       font-size: 40px;
       text-decoration: underline;
   }
    p{
    font-size: 24px;
    text-indent:2em;
}
    </style>
{% endblock %}

{% block content %}
    <br>
   <p>
   Throughout the experiment, you are assigned to play the role of <span id="role" style="font-weight: bold"> </span>.
   </p>
   <p>
     In each round, you will be randomly paired with a <span id="paired" style="font-weight: bold"></span>. <br>
   </p>
    <p>
      After each round, participants will be reshuffled to form new pairs.
    </p>
    <br>
    <p>
      Please click CONTINUE to proceed to the practice round.
    </p>
    <br>
    <button class="otree-btn-next btn btn-primary" id="next_page" style=" font-size: 22px; margin: 5px; padding: 5px;"> CONTINUE </button>

{% endblock %}

{% block scripts %}
    <script>
    if ({{player.id_in_group}}==1){
      $("#role").text("Member A");
      $("#paired").text("Member B");
    }
    if ({{ player.id_in_group }} ==2){
      $("#role").text("Member B");
      $("#paired").text("Member A");
    }
    if ({{ roundnum }}==0){
        $(".otree-title.page-header").text("");
    }
    if ({{ roundnum }} > 0 ){
        $(".otree-title.page-header").text("Round " + {{ roundnum }});
    }
    </script>
{% endblock %}