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

{% block title %}
    Treatment
{% endblock %}

{% block content %}
   {% if player.prob == 1 and player.uncertainty == 1 and player.heuristic == 1 %}
       Now you are randomly assigned to treatment 1. The information about your vehicle
       value, insurance, and accident is the same as introduction showed. You can start
       your experiment now.
   <br><br>
       <p style="color:#8b000c">
       Attention please:
       <p style="color:#030303">
       In the following 10 rounds, whether an accident happens or not is randomly determined by the computer.
       The probability of accident occurrence would be {{ player.probability }} (10%) and independent in each round.



   {% elif player.prob == 2 and player.uncertainty == 1 and player.heuristic == 1 %}
       Now you are randomly assigned to treatment 2. The information about your vehicle
       value, insurance, and accident is the same as introduction showed. You can start
       your experiment now.
   <br><br>
       <p style="color:#8b000c">
       Attention please:
       <p style="color:#030303">
       In the following 10 rounds, whether an accident happens or not is randomly determined by the computer.
       The probability of accident occurrence would be {{ player.probability }} (20%) and independent in each round.


   {% elif player.prob == 1 and player.uncertainty == 2 and player.heuristic == 1 %}
       Now you are randomly assigned to treatment 3. The information about your vehicle
       value, insurance, and accident is the same as introduction showed. You can start
       your experiment now.
   <br><br>
       <p style="color:#8b000c">
       Attention please:
       <p style="color:#030303">
       In the following 10 rounds, whether an accident happens or not is randomly determined by the computer.
       The probability of accident occurrence (unknown) will keep the same and independent in each round.


   {% elif player.prob == 2 and player.uncertainty == 2 and player.heuristic == 1 %}
       Now you are randomly assigned to treatment 4. The information about your vehicle
       value, insurance, and accident is the same as introduction showed. You can start
       your experiment now.
   <br><br>
       <p style="color:#8b000c">
       Attention please:
       <p style="color:#030303">
       In the following 10 rounds, whether an accident happens or not is randomly determined by the computer.
       The probability of accident occurrence (unknown) will keep the same and independent in each round.



   {% elif player.prob == 1 and player.uncertainty == 2 and player.heuristic == 2 %}
       Now you are randomly assigned to treatment 5. The information about your vehicle
       value, insurance, and accident is the same as introduction showed. You can start
       your experiment now.
   <br><br>
       <p style="color:#8b000c">
       Attention please:
       <p style="color:#030303">
       In the following 10 rounds, whether an accident happens or not is randomly determined by the computer.
       The probability of accident occurrence (unknown) will keep the same and independent in each round.
       <p style="color:#8b000c">
       Remember that your earnings would be determined by your performance. Before you start, please finish this video.
    <br><br>
{#      <iframe width="560" height="315" src="https://www.youtube.com/embed/FyHtm2m1QN4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>#}
   {% else %}
      Now you are randomly assigned to treatment 6. The information about your vehicle
       value, insurance, and accident is the same as introduction showed. You can start
       your experiment now.
   <br><br>
       <p style="color:#8b000c">
       Attention please:
   <br><br>
       <p style="color:#030303">
       In the following 10 rounds, whether an accident happens or not is randomly determined by the computer.
       The probability of accident occurrence (unknown) will keep the same and independent in each round.
       <p style="color:#8b000c">
        Remember that your earnings would be determined by your performance. Before you start, please finish this video.
       <br><br>
{#<iframe width="560" height="315" src="https://www.youtube.com/embed/FyHtm2m1QN4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>#}
    {% endif %}
<br><br>

{% if player.uncertainty == 2 and player.heuristic == 2 %}
     <div id="video_player"></div>
{% endif %}
<input type="submit" id="continue" class="otree-btn-next btn btn-primary" value="next">

{% endblock %}
{% block script %}
    <script src="https://www.youtube.com/player_api"></script>
    <script>

          uncertainty = {{ player.uncertainty }};
          heuristic = {{ player.heuristic }};
          console.log('uncertainty = ' + uncertainty);
          console.log('heuristic = ' + heuristic);
          let btn = $('#continue');
          if (uncertainty == 2 && heuristic == 2){
              console.log('inside if')
               // Disable button
               btn.prop('disabled', true);

           // create youtube player
           let video_player;
           function onYouTubePlayerAPIReady() {
               player = new YT.Player('video_player', {
                 width: '640',
                 height: '390',
                 videoId: 'FyHtm2m1QN4',
                 events: {
                   onReady: onPlayerReady,
                   onStateChange: onPlayerStateChange
                 }
               });
           }
           // autoplay video
           function onPlayerReady(event) {
               // event.target.playVideo();
           }
           // enable button when video ends
           function onPlayerStateChange(event) {
               if(event.data === 0) {
                   $('#continue').prop('disabled', false);
               }
           }
            }
    </script>
{% endblock %}