{{ 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 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_column1"><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="assetA1"><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="assetB1"><span><span> Asset B</span>
            </span></p></td>
        </tr>
    </table>

        </div>
       </div> <br>
</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';
    }

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

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


</script>


{{ else }}
<div class="boxes">
    <div id = "ins2" class="box" style="background-color:#F0F0F0">
            <br><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:100%">

        <tr>
            {{ if order_acc == 1 }}
            <td></td>
            <td id="styling" class="second_column"><div class="slidecontainer">
                <p id="description">Use the slider to indicate your 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 to indicate your 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 id = "ins3" class="box" style="background-color:#F0F0F0">
            <br><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:100%">
        <tr>
            {{ if order_acc == 1 }}
            <td></td>
            <td id="styling" class="second_column"><div class="slidecontainer">
                <p id="description2">Use the slider to indicate your 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 to indicate your 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>

<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';
        };
    }

    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 }}


<style>
#ins1 {
  width: 100%;
}

#ins2 {
  width: 50%;
  position: relative;
  left: -20px;
  border: 1px solid #C0C0C0;
}

#ins3 {
  width: 50%;
  position: relative;
  right: -20px;
  border: 1px solid #C0C0C0;
}

.box {
  float: left;
  width: 50%;
}

.boxes::after {
  content: "";
  clear: both;
  display: table;
}

#styling {
  text-align: center;
}

.first_column {
  table-layout: auto;
}

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

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

#assetA1 {
  position: relative;
  left: 45px;
  color: #243743;
}

#assetB1 {
  position: relative;
  right: 45px;
  color: #28B78D;
}

.second_column {
   width: 68%;
}

.second_column1 {
   width: 50%;
}


.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;
}

.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;
   }

ul {
  padding-left: 40px;
}

.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 }}