{{ block title }}
{{ endblock }}
{{ block content }}

<h2><center> Round {{player.round_number}} </center></h2><br>

{{ if participant.treatment == 1 or participant.treatment == 2  }}
    {{ if player.num_acc == 1 }}
<p><center><strong>There is 1 account in this round</strong></center><br></p>
    {{ else }}
<p><center><strong>There are 2 accounts in this round</strong></center><br></p>
    {{endif}}
{{ else}}
{{ if player.num_acc == 2 }}
<p><center><strong>First, examine both accounts, then purchase your investments.</strong></center><br></p>
    {{ else }}
<p><center><strong>Examine the account, then purchase your investments.</strong></center><br></p>
{{ endif}}
{{ endif}}

{{ if player.num_acc == 1 }}
<p>
<div class="tab">
<button class="tablinks" id="tab1" type="button" onclick="openAccount(event, 'Account1')">Account 1</button>
</div>

<div id="Account1" class="tabcontent">
    <div id = "ins1" class="card bg-light m-3">
        <div class="card-body">
            <center><u><strong> Investment Account 1</strong></u></center>
            <ul>
                <li> You have {{ budgetAB }} ECU available in Account 1. Two assets are available
                for purchase: Asset A and Asset B</li>
                <li> The price of Asset A is 1 ECU per unit</li>
                <li> The price of Asset B is 1 ECU per unit</li>
                <li> One unit in Asset A pays:
                <ul>
                    <li> ${{ A_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ A_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
                <li> One unit in Asset B pays:
                <ul>
                    <li> ${{ B_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ B_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
            </ul><br>

    <table style="width:90%">
        <tr>
            <td></td>
            <td id="styling" class="second_column"><div class="slidecontainer">
                <p id="description">Use the slider below to indicate your asset purchase</p>
                <input type="range" class = "slider" id="asset_A" name="asset_A" min="0" max="max1"
                       onchange="showButton1()" oninput="updateDescription(this);updateSlider(this)" onclick="updateDescription(this);showButton1()">
            </div></td>
			<td></td>

		</tr>
        <tr>
         <td id="styling" class="first_column"><p id="assetA"><span><span> Asset A</span>
            </span></p></td>
         <td id="arrowA">
             <div class="arrow">
                <div class="line"></div>
                <div class="point"></div>
             </div>
         </td>
         <td></td>
        </tr>
        <tr>
         <td></td>
         <td id="arrowB">
             <div class="arrow2">
                <div class="line2"></div>
                <div class="point2"></div>
             </div>
         </td>
         <td id="styling" class="third_column"><p id="assetB"><span><span> Asset B</span>
            </span></p></td>
        </tr>
    </table>
    </div></div>
</div>
</p>

<button id="next2" style="visibility: hidden;" onclick="myFunction()"
        class="btn btn-primary popup" type="button">Finalize your choices
    <span class="popuptext" id="myPopup"> To revise your choices, click the decision screen.
To finalize your choices, click the button below again.</span>
</button>

<script>
var clickCount = 0;
var next2 = document.getElementById("next2");
var popup = document.getElementById("myPopup");
var asset_A = document.getElementById("asset_A");
function myFunction() {
  popup.style.visibility = 'visible';
  asset_A.onchange = function() {
    popup.style.visibility = 'hidden';
    clickCount = 0;
    }
  if (popup.style.visibility == 'hidden') {
      next2.type = "button"
      };
  if (popup.style.visibility == 'visible') {
      clickCount++;
      next2.type = "button"
      if (clickCount == 2) {
          next2.type = ""
      }};

}
</script>

<script>
    let max1 = js_vars.budgetAB
    document.getElementById("asset_A").setAttribute("max",max1);
    let description = document.getElementById('description');
    function updateDescription(input) {
        let asset_A = parseInt(input.value);
        let asset_B = max1 - asset_A
        description.innerText = `${asset_A} units of Asset A and ${asset_B} units of Asset B`
    }


    function showButton1(){
        document.getElementById("asset_A").classList.add('slider-thumb-PR');
        document.getElementById('next2').style.visibility = 'visible';
    }

    document.getElementById('tab1').addEventListener("click", function() {
    liveSend({'tab_click': 1});
    });

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

    function updateSlider(slider) {
        liveSend({'slider_move': parseInt(slider.value)});
    }

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });
</script>

{{else}}
<p>
<div class="tab">
<button class="tablinks" id="tab1" type="button" onclick="openAccount(event, 'Account1')">Account 1</button>
<button class="tablinks" id="tab2" type="button" onclick="openAccount(event, 'Account2')">Account 2</button>
</div>

<div id="Account1" class="tabcontent">
    <div id = "ins1" class="card bg-light m-3">
        <div class="card-body">
            <center><u><strong> Investment Account 1</strong></u></center>
            <ul>
                {{ if order_acc == 1 }}
                <li> You have {{ budgetAB }} ECU available in Account 1. Two assets are available
                for purchase: Asset A and Asset B</li>
                <li> The price of Asset A is 1 ECU per unit</li>
                <li> The price of Asset B is 1 ECU per unit</li>
                <li> One unit in Asset A pays:
                <ul>
                    <li> ${{ A_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ A_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
                <li> One unit in Asset B pays:
                <ul>
                    <li> ${{ B_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ B_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
                {{ else }}
                <li> You have {{ budgetCD }} ECU available in Account 1. Two assets are available
                for purchase: Asset A and Asset B</li>
                <li> The price of Asset A is 1 ECU per unit</li>
                <li> The price of Asset B is 1 ECU per unit</li>
                <li> One unit in Asset A pays:
                <ul>
                    <li> ${{ C_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ C_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
                <li> One unit in Asset B pays:
                <ul>
                    <li> ${{ D_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ D_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
                {{ endif }}
            </ul><br>

    <table style="width:90%">
        <tr>
            {{ if order_acc == 1 }}
            <td></td>
            <td id="styling" class="second_column"><div class="slidecontainer">
                <p id="description">Use the slider below to indicate your asset purchase</p>
                <input type="range" class = "slider" id="asset_A" name="asset_A" min="0" max="max1"
                       onchange="showButton1()" oninput="updateDescription(this);updateSlider(this)" onclick="updateDescription(this);showButton1()">
        </div></td>
			<td></td>
            {{ else }}
            <td></td>
            <td id="styling" class="second_column"><div class="slidecontainer">
                <p id="description">Use the slider below to indicate your asset purchase</p>
                <input type="range" class = "slider" id="asset_C" name="asset_C" min="0" max="max2"
                       onchange="showButton1()" oninput="updateDescription(this);updateSlider(this)" onclick="updateDescription(this);showButton1()">
        </div></td>
			<td></td>
            {{ endif }}

		</tr>

        <tr>
         <td id="styling" class="first_column"><p id="assetA"><span><span> Asset A</span>
            </span></p></td>
         <td id="arrowA">
             <div class="arrow">
                <div class="line"></div>
                <div class="point"></div>
             </div>
         </td>
         <td></td>
        </tr>

        <tr>
         <td></td>
         <td id="arrowB">
             <div class="arrow2">
                <div class="line2"></div>
                <div class="point2"></div>
             </div>
         </td>
         <td id="styling" class="third_column"><p id="assetB"><span><span> Asset B</span>
            </span></p></td>
        </tr>
    </table>
</div></div>
</div>


<div id="Account2" class="tabcontent">
    <div id = "ins1" class="card bg-light m-3">
        <div class="card-body">
    <center><u><strong> Investment Account 2</strong></u></center>
            <ul>
                {{ if order_acc == 1}}
                <li> You have {{ budgetCD }} ECU available in Account 2. Two assets are available
                for purchase: Asset C and Asset D</li>
                <li> The price of Asset C is 1 ECU per unit</li>
                <li> The price of Asset D is 1 ECU per unit</li>
                <li> One unit in Asset C pays:
                <ul>
                    <li> ${{ C_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ C_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
                <li> One unit in Asset D pays:
                <ul>
                    <li> ${{ D_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ D_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>

                {{ else }}
                <li> You have {{ budgetAB }} ECU available in Account 2. Two assets are available
                for purchase: Asset C and Asset D</li>
                <li> The price of Asset C is 1 ECU per unit</li>
                <li> The price of Asset D is 1 ECU per unit</li>
                <li> One unit in Asset C pays:
                <ul>
                    <li> ${{ A_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ A_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
                <li> One unit in Asset D pays:
                <ul>
                    <li> ${{ B_123 }} if the dice roll is 1, 2, or 3</li>
                    <li> ${{ B_456 }} if the dice roll is 4, 5, or 6</li>
                </ul></li>
                {{ endif }}

            </ul><br>

    <table style="width:90%">
        <tr>
            {{ if order_acc == 1 }}
            <td></td>
            <td id="styling" class="second_column"><div class="slidecontainer">
                <p id="description2">Use the slider below to indicate your asset purchase</p>
                <input type="range" class = "slider" id="asset_C" name="asset_C" min="0" max="max2"
                       onchange="showButton()" oninput="updateDescription2(this);updateData(this)" onclick="updateDescription2(this);showButton()">
            </div></td>
			<td></td>

            {{ else }}
            <td></td>
            <td id="styling" class="second_column"><div class="slidecontainer">
                <p id="description2">Use the slider below to indicate your asset purchase</p>
                <input type="range" class = "slider" id="asset_A" name="asset_A" min="0" max="max1"
                       onchange="showButton()" oninput="updateDescription2(this);updateData(this)" onclick="updateDescription2(this);showButton()">
            </div></td>
			<td></td>
            {{ endif }}
        </tr>

        <tr>
         <td id="styling" class="first_column"><p id="assetA"><span><span> Asset C</span>
            </span></p></td>
         <td id="arrowA">
             <div class="arrow">
                <div class="line"></div>
                <div class="point"></div>
             </div>
         </td>
         <td></td>
        </tr>
        <tr>
         <td></td>
         <td id="arrowB">
             <div class="arrow2">
                <div class="line2"></div>
                <div class="point2"></div>
             </div>
         </td>
         <td id="styling" class="third_column"><p id="assetB"><span><span> Asset D</span>
            </span></p></td>
        </tr>

    </table>

        </div></div></div>
</p>

<button id="next2" style="visibility: hidden;" onclick="myFunction()"
        class="btn btn-primary popup" type="button">Finalize your choices
    <span class="popuptext" id="myPopup"> To revise your choices, click the decision screen.
To finalize your choices, click the button below again.</span>
</button>
<script>

var clickCount = 0;
var clickCount2 = 0;
var next2 = document.getElementById("next2");
var popup = document.getElementById("myPopup");
var asset_A = document.getElementById("asset_A");
var asset_C = document.getElementById("asset_C");
function myFunction() {
  popup.style.visibility = 'visible';

  asset_A.onchange = function() {
    popup.style.visibility = 'hidden';
    clickCount = 0;
    }
  asset_C.onchange = function() {
    popup.style.visibility = 'hidden';
    clickCount = 0;
    }
  if (popup.style.visibility == 'hidden') {
      next2.type = "button"
      };
  if (popup.style.visibility == 'visible') {
      clickCount++;
      next2.type = "button"
      if (clickCount == 2) {
          next2.type = ""
      }};
}
</script>

<script>
    var movingSlider1 = false
    var movingSlider2 = false
    let max1 = js_vars.budgetAB
    let max2 = js_vars.budgetCD
    document.getElementById("asset_A").setAttribute("max",max1);
    document.getElementById("asset_C").setAttribute("max",max2);

    let description = document.getElementById('description');
    function updateDescription(input) {
        if (js_vars.order == 1) {
            let asset_A = parseInt(input.value);
            let asset_B = max1 - asset_A
            description.innerText = `${asset_A} units of Asset A and ${asset_B} units of Asset B`;
            movingSlider1 = true;
        }
        else {
            let asset_A = parseInt(input.value);
            let asset_B = max2 - asset_A
            description.innerText = `${asset_A} units of Asset A and ${asset_B} units of Asset B`;
            movingSlider1 = true;
        };
    };

    let description2 = document.getElementById('description2');
    function updateDescription2(input) {
        if (js_vars.order == 1) {
            let asset_C = parseInt(input.value);
            let asset_D = max2 - asset_C;
            description2.innerText = `${asset_C} units of Asset C and ${asset_D} units of Asset D`;
            movingSlider2 = true;
        }
        else {
            let asset_C = parseInt(input.value);
            let asset_D = max1 - asset_C;
            description2.innerText = `${asset_C} units of Asset C and ${asset_D} units of Asset D`;
            movingSlider2 = true;
        };
    }

    function showButton1(){
        if (js_vars.order == 1) {
            document.getElementById("asset_A").classList.add('slider-thumb-PR');
        }
        else {
            document.getElementById("asset_C").classList.add('slider-thumb-PR2');
        };
        if ((movingSlider1)&&(movingSlider2)) {
            document.getElementById('next2').style.visibility = 'visible';
        };
    }

    function showButton() {
        if (js_vars.order == 1) {
            document.getElementById("asset_C").classList.add('slider-thumb-PR2');
        }
        else {
            document.getElementById("asset_A").classList.add('slider-thumb-PR');
        };
        if ((movingSlider1)&&(movingSlider2)) {
            document.getElementById('next2').style.visibility = 'visible';
        };
    }

    document.getElementById('tab1').addEventListener("click", function() {
    liveSend({'tab_click': 1});
    });

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

    document.getElementById('tab2').addEventListener("click", function() {
    liveSend({'tab_click': 2});
    });

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

    function updateSlider(slider) {
        liveSend({'slider_move': parseInt(slider.value)});
    }

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

    function updateData(slider) {
        liveSend({'slider_move2': parseInt(slider.value)});
    }

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

</script>
{{ endif }}

<script>
function openAccount(evt,Account) {
  let tabcontent = document.getElementsByClassName("tabcontent");
  let tablinks = document.getElementsByClassName("tablinks");
  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    tablinks[i].classList.remove("active");
  }
  document.getElementById(Account).style.display = "block";
  evt.currentTarget.classList.add("active");
}
</script>

<style>

#styling {
  text-align: center;
}

.first_column {
  table-layout: auto;
}

.second_column {
   width: 50%;
}

.third_column {
   table-layout: auto;
}


.slider{
  -webkit-appearance: none;
   width: 100%;
   height: 15px;
   border-radius: 5px;
   background: #d3d3d3;
   outline: none;
   opacity: 0.7;
}


.slider:hover {
  opacity: 1;
}


.slider-thumb-PR::-webkit-slider-thumb{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4f858c;
}

.slider-thumb-PR2::-webkit-slider-thumb{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4f858c;
}

input[type=range]::-webkit-slider-thumb {
   border: none;
   height: 25px;
   width: 25px;
   border-radius: 50%;
   -webkit-appearance: none;
   }

#assetA {
  position: relative;
  left: 50px;
  color: #243743;
}

#assetB {
  position: relative;
  right: 50px;
  color: #28B78D;
}

.arrow {
  width: 100%;
  position: relative;
}

.line {
  margin-top: 8px;
  width: 98%;
  background: #243743;
  height: 2px;
  float: left;
  position: absolute;
}

.point {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #243743;
  float: right;
}

.arrow2 {
  width: 100%;
  position: relative;
}

.line2 {
  margin-top: 9px;
  width: 98%;
  background: #28B78D;
  height: 2px;
  float: right;
  position: absolute;
}

.point2 {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #28B78D;
  float: left;
}

.tab {
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
}

.tab button.active {
  background-color: #ccc;
}

.tab button {
  border: none;
  outline: none;
  padding: 15px;
  transition: 0.2s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tabcontent {
  display: none;
  padding: 10px 15px;
  -webkit-animation: fadeEffect 0.3s;
  animation: fadeEffect 0.3s;
}

@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

ul {
  padding-left: 80px;
}

.popuptext {
  visibility: hidden;
  position: absolute;
  margin-left: -180px;
  width: 300px;
  background-color: #555;
  color: #fff;
  text-align: center;
  bottom: 125%;
  font-size: 12.5px;
}

.popup {
  position: relative;
  cursor: pointer;
}

.popup .show {
  visibility: visible;
}

#next2 {
   background-color: #BAD0DE; color: black;
   border: #D4E1CD;
   float: right;
   margin: 40px auto;
   border-radius: 60px;
   height: 55px;
   width: 150px
    }

</style>
{{ endblock }}